Implement Phoenix channel to send Greeter hello to Phoenix frontend

apps/phoenix_app/assets/js/app.js

@@ -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"

apps/phoenix_app/assets/js/socket.js

@@ -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

apps/phoenix_app/lib/phoenix_app_web/channels/greet_channel.ex

@@ -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

apps/phoenix_app/lib/phoenix_app_web/channels/user_socket.ex

@@ -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

apps/phoenix_app/lib/phoenix_app_web/templates/layout/app.html.eex

@@ -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>

apps/phoenix_app/lib/phoenix_app_web/templates/page/index.html.eex

@@ -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>

apps/phoenix_app/test/phoenix_app_web/controllers/page_controller_test.exs

@@ -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