Skip to content
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}})

// Now that you are connected, you can join channels with a topic:
let channel ="topic:subtopic", {})
let channel ="room:greet", {})
.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
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}

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

def handle_in("greet", %{"name" => name}, socket) do
broadcast! socket, "greet", %{msg: Greeter.hello(name)}
{:noreply, socket}
@@ -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="">Get Started</a></li>
<li><a href="">Cultivate Software</a></li>
<span class="logo"></span>

<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 %>
@@ -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 class="row marketing">
<div class="col-lg-6">
<a href="">Guides</a>
<a href="">Docs</a>
<a href="">Source</a>

<div class="col-lg-6">
<a href="">Mailing list</a>
<a href="">#elixir-lang on freenode IRC</a>
<a href="">@elixirphoenix</a>
<label for="name">Name</label>
<input type="text" name="name" id="name">
<button id="greet" name="greet">Greet</button>
<h2 id="greeting"></h2>
@@ -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"

0 comments on commit 696957f

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