Small changes to make run

README.md

@@ -1,5 +1,7 @@
 # Simple Chat Example
 
+> I got here via [HexDocs](https://hexdocs.pm/phoenix/channels.html#content)
+
 > Built with the [Phoenix Framework](https://github.com/phoenixframework/phoenix)
 
 To start your new Phoenix application you have to:
@@ -143,3 +145,5 @@ defmodule Chat.RoomChannel do
   end
 end
 ```
+
+## This probably worked about 5 years ago when originally created, but the biggest problem is how JS centric the whole app feels. Maybe I missed something, so I decided to try and spend a little bit of time and bring it in to being maybe a bit more Elixir/Phoenix focused and less JS focused.

web/static/js/app.js

@@ -3,11 +3,9 @@ import {Socket, LongPoller} from "phoenix"
 class App {
 
   static init(){
-    let socket = new Socket("/socket", {
-      logger: ((kind, msg, data) => { console.log(`${kind}: ${msg}`, data) })
-    })
+    let socket = new Socket("/socket", {params: {token: window.userToken}, 
+                                        logger: ((kind, msg, data) => {console.log('${kind}: ${msg}', data)})})
 
-    socket.connect({user_id: "123"})
     var $status    = $("#status")
     var $messages  = $("#messages")
     var $input     = $("#message-input")
@@ -17,26 +15,31 @@ class App {
     socket.onError( ev => console.log("ERROR", ev) )
     socket.onClose( e => console.log("CLOSE", e))
 
-    var chan = socket.channel("rooms:lobby", {})
-    chan.join().receive("ignore", () => console.log("auth error"))
-               .receive("ok", () => console.log("join ok"))
-               .after(10000, () => console.log("Connection interruption"))
-    chan.onError(e => console.log("something went wrong", e))
-    chan.onClose(e => console.log("channel closed", e))
-
-    $input.off("keypress").on("keypress", e => {
-      if (e.keyCode == 13) {
-        chan.push("new:msg", {user: $username.val(), body: $input.val()})
-        $input.val("")
+    // Finally, connect to the socket:
+    let channel           = socket.channel("rooms:lobby", {})
+    let chatInput         = document.querySelector("#message-input")
+    let messagesContainer = document.querySelector("#messages")
+
+    channel.join().receive("ok", () => console.log("join yay!"))
+                  .receive("ignore", () => console.log("you stink, go away"))
+    channel.onError(e => console.log("something went wrong", e))
+    channel.onClose(e => console.log("channel closed", e))
+
+    socket.connect()
+
+    chatInput.addEventListener("keypress", event => {
+      if(event.key === 'Enter'){
+        channel.push("new:msg", {user: $username.val(), body: chatInput.value})
+        chatInput.value = ""
       }
     })
 
-    chan.on("new:msg", msg => {
+    channel.on("new:msg", msg => {
       $messages.append(this.messageTemplate(msg))
       scrollTo(0, document.body.scrollHeight)
     })
 
-    chan.on("user:entered", msg => {
+    channel.on("user:entered", msg => {
       var username = this.sanitize(msg.user || "anonymous")
       $messages.append(`<br/><i>[${username} entered]</i>`)
     })

web/templates/page/index.html.eex

@@ -1,5 +1,4 @@
-<div id="messages" class="container">
-</div>
+<div id="messages" class="container"/>
 <div id="footer">
   <div class="container">
     <div class="row">