nithinbekal · nithinbekal · Jul 13, 2015 · Jul 6, 2015 · Jul 6, 2015 · Jul 6, 2015
diff --git a/.gitignore b/.gitignore
@@ -13,6 +13,7 @@ erl_crash.dump
 # we ignore priv/static. You may want to comment
 # this depending on your deployment strategy.
 /priv/static/
+bower_components
 
 # The config/prod.secret.exs file by default contains sensitive
 # data and you should not commit it into version control.

diff --git a/bower.json b/bower.json
@@ -0,0 +1,6 @@
+{
+  "name": "chat",
+  "dependencies": {
+    "jquery": "~ 2.1"
+  }
+}
diff --git a/web/channels/room_channel.ex b/web/channels/room_channel.ex
@@ -0,0 +1,12 @@
+defmodule Chat.RoomChannel do
+  use Phoenix.Channel
+
+  def join("rooms:lobby", message, socket) do
+    {:ok, socket}
+  end
+
+  def handle_in("new:message", msg, socket) do
+    broadcast! socket, "new:message", %{body: msg["body"], user: msg["user"]}
+    {:noreply, socket}
+  end
+end
diff --git a/web/router.ex b/web/router.ex
@@ -12,6 +12,10 @@ defmodule Chat.Router do
     plug :accepts, ["json"]
   end
 
+  socket "/ws", Chat do
+    channel "rooms:*", RoomChannel
+  end
+
   scope "/", Chat do
     pipe_through :browser # Use the default browser stack
 

diff --git a/web/static/js/app.js b/web/static/js/app.js
@@ -1,13 +1,46 @@
 import {Socket} from "phoenix"
 
-// let socket = new Socket("/ws")
-// socket.connect()
-// let chan = socket.chan("topic:subtopic", {})
-// chan.join().receive("ok", chan => {
-//   console.log("Success!")
-// })
-
-let App = {
+class App {
+  static init() {
+    var $message  = $("#message")
+    var $username = $("#username")
+    var $messages = $("#messages")
+
+    var socket = new Socket("/ws")
+    socket.connect()
+    socket.onClose( e => console.log("Closed") )
+
+    var channel = socket.chan("rooms:lobby", {})
+    channel.join()
+      .receive("error", () => console.log("Failed to connect"))
+      .receive("ok", () => console.log("Connected!"))
+
+    channel.on("new:message", msg => this.appendMessage(msg))
+
+    $message
+      .off("keypress")
+      .on("keypress", e => {
+        if(e.keyCode == 13) {
+          channel.push("new:message", {
+            user: $username.val(),
+            body: $message.val()
+          })
+          $message.val("")
+        }
+      })
+  }
+
+  static sanitize(msg) { return $("<div />").text(msg).html() }
+
+  static appendMessage(message) {
+    var $messages = $("#messages")
+    var username = this.sanitize(message.user || "New User")
+    var message  = this.sanitize(message.body)
+
+    $messages.append(`<p><b>[${username}]</b>: ${message}</p>`)
+  }
 }
 
+$( () => App.init() )
+
 export default App
diff --git a/web/templates/layout/app.html.eex b/web/templates/layout/app.html.eex
@@ -14,7 +14,7 @@
   <body>
     <div class="container" role="main">
       <div class="header">
-        <h1>Hello, world!</h1>
+        <h1>Chat</h1>
       </div>
 
       <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>

diff --git a/web/templates/page/index.html.eex b/web/templates/page/index.html.eex
@@ -1 +1,13 @@
-<h2>Welcome to Phoenix</h2>
+<div id="messages"></div>
+
+<br/>
+
+<div class="col-md-2 form-group">
+  <label>Username</label>
+  <input id="username" type="text" class="form-control" />
+</div>
+
+<div class="col-md-6 form-group">
+  <label>Message</label>
+  <input id="message" type="text" class="form-control" />
+</div>