Skip to content
Permalink
Browse files

Implement Phoenix channel to send Greeter hello to Phoenix frontend

  • Loading branch information...
picandocodigo committed Dec 11, 2017
1 parent 46359c6 commit 696957f96a64554894c1b91d8d21528c8315f2fc

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -18,4 +18,4 @@ import "phoenix_html"
// Local files can be imported directly using relative
// paths "./socket" or full ones "web/static/js/socket".

// import socket from "./socket"
import socket from "./socket"
@@ -54,9 +54,24 @@ let socket = new Socket("/socket", {params: {token: window.userToken}})
socket.connect()

// Now that you are connected, you can join channels with a topic:
let channel = socket.channel("topic:subtopic", {})
let channel = socket.channel("room:greet", {})
channel.join()
.receive("ok", resp => { console.log("Joined successfully", resp) })
.receive("error", resp => { console.log("Unable to join", resp) })

let nameInput = document.getElementById('name')
let greeter = document.getElementById('greet')
let greetingContainer = document.getElementById('greeting')

greeter.addEventListener('click', function () {
channel.push('greet', {name: nameInput.value})
nameInput.value = ''
})

channel.on('greet', payload => {
window.payload = payload
console.log(payload)
greetingContainer.innerHTML = `${payload.msg}`
})

export default socket
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,17 @@
defmodule PhoenixApp.GreetChannel do
use Phoenix.Channel

def join("room:greet", _message, socket) do
{:ok, socket}
end

def greet("room:greet", name, socket) do
greet = Greeter.hello(name)
{:ok, greet}
end

def handle_in("greet", %{"name" => name}, socket) do
broadcast! socket, "greet", %{msg: Greeter.hello(name)}
{:noreply, socket}
end
end
@@ -2,7 +2,7 @@ defmodule PhoenixAppWeb.UserSocket do
use Phoenix.Socket

## Channels
# channel "room:*", PhoenixAppWeb.RoomChannel
channel "room:*", PhoenixApp.GreetChannel

## Transports
transport :websocket, Phoenix.Transports.WebSocket
@@ -16,15 +16,12 @@
<header class="header">
<nav role="navigation">
<ul class="nav nav-pills pull-right">
<li><a href="http://www.phoenixframework.org/docs">Get Started</a></li>
<li><a href="http://cultivatehq.com">Cultivate Software</a></li>
</ul>
</nav>
<span class="logo"></span>
</header>

<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>

<main role="main">
<%= render @view_module, @view_template, assigns %>
</main>
@@ -1,36 +1,6 @@
<div class="jumbotron">
<h2><%= gettext "Welcome to %{name}!", name: "Phoenix" %></h2>
<p class="lead">A productive web framework that<br />does not compromise speed and maintainability.</p>
</div>

<div class="row marketing">
<div class="col-lg-6">
<h4>Resources</h4>
<ul>
<li>
<a href="http://phoenixframework.org/docs/overview">Guides</a>
</li>
<li>
<a href="https://hexdocs.pm/phoenix">Docs</a>
</li>
<li>
<a href="https://github.com/phoenixframework/phoenix">Source</a>
</li>
</ul>
</div>

<div class="col-lg-6">
<h4>Help</h4>
<ul>
<li>
<a href="http://groups.google.com/group/phoenix-talk">Mailing list</a>
</li>
<li>
<a href="http://webchat.freenode.net/?channels=elixir-lang">#elixir-lang on freenode IRC</a>
</li>
<li>
<a href="https://twitter.com/elixirphoenix">@elixirphoenix</a>
</li>
</ul>
</div>
<label for="name">Name</label>
<input type="text" name="name" id="name">
<button id="greet" name="greet">Greet</button>
<h2 id="greeting"></h2>
</div>
@@ -9,7 +9,7 @@ defmodule PhoenixAppWeb.PageControllerTest do

test "with valid credentials" do
conn = get conn_with_basic_auth(), "/"
assert html_response(conn, 200) =~ "Welcome to Phoenix!"
assert html_response(conn, 200) =~ "Name"
end
end

0 comments on commit 696957f

Please sign in to comment.
You can’t perform that action at this time.