chat sample

- サンプルプロジェクトのチャットアプリを取り込み、Webpackの構成で動くように修正

lib/js/app.js

@@ -1,4 +1,59 @@
-let socket = new Phoenix.Socket("/socket", {
-    params: {token: window.userToken},
-    logger: (kind, msg, data) => { console.log(`${kind}: ${msg}`, data); }
-});
+let $ = require("./jquery.min.js")
+import { Socket } from "./phoenix.js"
+
+class App {
+
+  static init(){
+    let socket = new Socket("/socket", {
+      logger: ((kind, msg, data) => { console.log(`${kind}: ${msg}`, data) })
+    })
+
+    socket.connect({user_id: "123"})
+    var $status    = $("#status")
+    var $messages  = $("#messages")
+    var $input     = $("#message-input")
+    var $username  = $("#username")
+
+    socket.onOpen( ev => console.log("OPEN", ev) )
+    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"))
+               .receive("timeout", () => 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("")
+      }
+    })
+
+    chan.on("new:msg", msg => {
+      $messages.append(this.messageTemplate(msg))
+      scrollTo(0, document.body.scrollHeight)
+    })
+
+    chan.on("user:entered", msg => {
+      var username = this.sanitize(msg.user || "anonymous")
+      $messages.append(`<br/><i>[${username} entered]</i>`)
+    })
+  }
+
+  static sanitize(html){ return $("<div/>").text(html).html() }
+
+  static messageTemplate(msg){
+    let username = this.sanitize(msg.user || "anonymous")
+    let body     = this.sanitize(msg.body)
+
+    return(`<p><a href='#'>[${username}]</a>&nbsp; ${body}</p>`)
+  }
+
+}
+
+$( () => App.init() )
+
+export default App

lib/websocket_chat_web/channels/room_channel.ex

@@ -0,0 +1,36 @@
+defmodule WebsocketChatWeb.RoomChannel do
+    use Phoenix.Channel
+    require Logger
+
+    def join("rooms:lobby", message, socket) do
+      Process.flag(:trap_exit, true)
+      :timer.send_interval(5000, :ping)
+      send(self, {:after_join, message})
+
+      {:ok, socket}
+    end
+
+    def join("rooms:" <> _private_subtopic, _message, _socket) do
+      {:error, %{reason: "unauthorized"}}
+    end
+
+    def handle_info({:after_join, msg}, socket) do
+      broadcast! socket, "user:entered", %{user: msg["user"]}
+      push socket, "join", %{status: "connected"}
+      {:noreply, socket}
+    end
+    def handle_info(:ping, socket) do
+      push socket, "new:msg", %{user: "SYSTEM", body: "ping"}
+      {:noreply, socket}
+    end
+
+    def terminate(reason, _socket) do
+      Logger.debug"> leave #{inspect reason}"
+      :ok
+    end
+
+    def handle_in("new:msg", msg, socket) do
+      broadcast! socket, "new:msg", %{user: msg["user"], body: msg["body"]}
+      {:reply, {:ok, %{msg: msg["body"]}}, assign(socket, :user, msg["user"])}
+    end
+  end

lib/websocket_chat_web/channels/user_socket.ex

@@ -2,7 +2,7 @@ defmodule WebsocketChatWeb.UserSocket do
   use Phoenix.Socket
 
   ## Channels
-  # channel "room:*", WebsocketChatWeb.RoomChannel
+  channel "rooms:*", WebsocketChatWeb.RoomChannel
 
   ## Transports
   transport :websocket, Phoenix.Transports.WebSocket

lib/websocket_chat_web/templates/layout/app.html.eex

@@ -30,7 +30,6 @@
       </main>
 
     </div> <!-- /container -->
-    <script src="<%= static_path(@conn, "/js/phoenix.js") %>"></script>
     <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
   </body>
 </html>

lib/websocket_chat_web/templates/page/index.html.eex

@@ -1,36 +1,17 @@
-<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 id="messages" class="container">
 </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 id="footer">
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-2">
+        <div class="input-group">
+          <span class="input-group-addon">@</span>
+          <input id="username" type="text" class="form-control" placeholder="username">
+        </div><!-- /input-group -->
+      </div><!-- /.col-lg-6 -->
+      <div class="col-sm-10">
+        <input id="message-input" class="form-control" />
+      </div><!-- /.col-lg-6 -->
+    </div><!-- /.row -->
   </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>
-</div>
+</div>

webpack.config.js

@@ -2,8 +2,10 @@ module.exports = {
 
   mode: 'development',
 
+  context: __dirname + "/lib/js", // rootにしたいパスを指定
+
   // メインとなるJavaScriptファイル（エントリーポイント）
-  entry: `./lib/js/app.js`,
+  entry: `./app.js`,
 
   // ファイルの出力設定
   output: {