-

Hello, world!

+

Chat

From 5238a5b93d4a9d2b57b79af3107b957db46ecceb Mon Sep 17 00:00:00 2001 From: Nithin Bekal Date: Mon, 6 Jul 2015 23:51:50 +0530 Subject: [PATCH 04/12] Add chat form inputs --- web/templates/page/index.html.eex | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/web/templates/page/index.html.eex b/web/templates/page/index.html.eex index d1ece87..6b4ab5f 100644 --- a/web/templates/page/index.html.eex +++ b/web/templates/page/index.html.eex @@ -1 +1,13 @@ -

Welcome to Phoenix

+
+ +
+ +
+ + +
+ +
+ + +
From 0a70e1aff35d0326749855eb361f817f8b222a7e Mon Sep 17 00:00:00 2001 From: Nithin Bekal Date: Tue, 7 Jul 2015 00:01:03 +0530 Subject: [PATCH 05/12] Log message to console on hitting enter --- web/static/js/app.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/web/static/js/app.js b/web/static/js/app.js index 1ece579..1e90075 100644 --- a/web/static/js/app.js +++ b/web/static/js/app.js @@ -2,7 +2,16 @@ import {Socket} from "phoenix" class App { static init() { - console.log("Hello, world!") + var $message = $("#message") + var $username = $("#username") + + $message + .off("keypress") + .on("keypress", e => { + if(e.keyCode == 13) { + console.log(`[${$username.val()}] ${$message.val()}` ) + } + }) } } From 5c61e1abb114d612ad93b5bdbf2af9996a7b9e8d Mon Sep 17 00:00:00 2001 From: Nithin Bekal Date: Tue, 7 Jul 2015 00:07:12 +0530 Subject: [PATCH 06/12] Add websocket routes --- web/router.ex | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/web/router.ex b/web/router.ex index 0d55eb1..da7895d 100644 --- 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 From 24227e93d8eecbf4a9cd998f66a8348b11781273 Mon Sep 17 00:00:00 2001 From: Nithin Bekal Date: Tue, 7 Jul 2015 00:07:29 +0530 Subject: [PATCH 07/12] Connect socket to /ws --- web/static/js/app.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/web/static/js/app.js b/web/static/js/app.js index 1e90075..bfcf6e0 100644 --- a/web/static/js/app.js +++ b/web/static/js/app.js @@ -5,6 +5,10 @@ class App { var $message = $("#message") var $username = $("#username") + var socket = new Socket("/ws") + socket.connect() + socket.onClose( e => console.log("Closed") ) + $message .off("keypress") .on("keypress", e => { From 29da441a643919b6a0ed973c205f7b75d8496587 Mon Sep 17 00:00:00 2001 From: Nithin Bekal Date: Tue, 7 Jul 2015 00:14:35 +0530 Subject: [PATCH 08/12] Join channel, and handle error response --- web/static/js/app.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/web/static/js/app.js b/web/static/js/app.js index bfcf6e0..153e42a 100644 --- a/web/static/js/app.js +++ b/web/static/js/app.js @@ -9,6 +9,10 @@ class App { socket.connect() socket.onClose( e => console.log("Closed") ) + var channel = socket.chan("rooms:lobby", {}) + channel.join() + .receive("error", () => console.log("Failed to connect")) + $message .off("keypress") .on("keypress", e => { From e4e86d984337ea6fb3fb9dcbf89dcac3fdaadcbe Mon Sep 17 00:00:00 2001 From: Nithin Bekal Date: Tue, 7 Jul 2015 00:17:09 +0530 Subject: [PATCH 09/12] Add RoomChannel --- web/channels/room_channel.ex | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 web/channels/room_channel.ex diff --git a/web/channels/room_channel.ex b/web/channels/room_channel.ex new file mode 100644 index 0000000..f49448e --- /dev/null +++ b/web/channels/room_channel.ex @@ -0,0 +1,7 @@ +defmodule Chat.RoomChannel do + use Phoenix.Channel + + def join("rooms:lobby", message, socket) do + {:ok, socket} + end +end From bf595a3e418b2fb5375366aa4bfc96991a72941c Mon Sep 17 00:00:00 2001 From: Nithin Bekal Date: Tue, 7 Jul 2015 00:17:30 +0530 Subject: [PATCH 10/12] Handle successful connection on the client side --- web/static/js/app.js | 1 + 1 file changed, 1 insertion(+) diff --git a/web/static/js/app.js b/web/static/js/app.js index 153e42a..0599547 100644 --- a/web/static/js/app.js +++ b/web/static/js/app.js @@ -12,6 +12,7 @@ class App { var channel = socket.chan("rooms:lobby", {}) channel.join() .receive("error", () => console.log("Failed to connect")) + .receive("ok", () => console.log("Connected!")) $message .off("keypress") From aabf13e4cbbf256c2404c740ad738d95905f801b Mon Sep 17 00:00:00 2001 From: Nithin Bekal Date: Tue, 7 Jul 2015 00:46:56 +0530 Subject: [PATCH 11/12] Handle incoming connections --- web/channels/room_channel.ex | 5 +++++ web/static/js/app.js | 9 ++++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/web/channels/room_channel.ex b/web/channels/room_channel.ex index f49448e..e695ee2 100644 --- a/web/channels/room_channel.ex +++ b/web/channels/room_channel.ex @@ -4,4 +4,9 @@ defmodule Chat.RoomChannel do def join("rooms:lobby", message, socket) do {:ok, socket} end + + def handle_in("new:message", msg, socket) do + broadcast! socket, "new:message", %{body: msg["message"]} + {:noreply, socket} + end end diff --git a/web/static/js/app.js b/web/static/js/app.js index 0599547..2659c52 100644 --- a/web/static/js/app.js +++ b/web/static/js/app.js @@ -14,11 +14,18 @@ class App { .receive("error", () => console.log("Failed to connect")) .receive("ok", () => console.log("Connected!")) + channel.on("new:message", msg => { + console.log(msg.body) + }) + $message .off("keypress") .on("keypress", e => { if(e.keyCode == 13) { - console.log(`[${$username.val()}] ${$message.val()}` ) + channel.push("new:message", { + user: $username.val(), + message: $message.val() + }) } }) } From 72a8338a6a4141e359656325693cbc59ab86b576 Mon Sep 17 00:00:00 2001 From: Nithin Bekal Date: Wed, 8 Jul 2015 23:25:08 +0530 Subject: [PATCH 12/12] Render new messages to the page --- web/channels/room_channel.ex | 2 +- web/static/js/app.js | 18 ++++++++++++++---- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/web/channels/room_channel.ex b/web/channels/room_channel.ex index e695ee2..f57802e 100644 --- a/web/channels/room_channel.ex +++ b/web/channels/room_channel.ex @@ -6,7 +6,7 @@ defmodule Chat.RoomChannel do end def handle_in("new:message", msg, socket) do - broadcast! socket, "new:message", %{body: msg["message"]} + broadcast! socket, "new:message", %{body: msg["body"], user: msg["user"]} {:noreply, socket} end end diff --git a/web/static/js/app.js b/web/static/js/app.js index 2659c52..749e195 100644 --- a/web/static/js/app.js +++ b/web/static/js/app.js @@ -4,6 +4,7 @@ class App { static init() { var $message = $("#message") var $username = $("#username") + var $messages = $("#messages") var socket = new Socket("/ws") socket.connect() @@ -14,9 +15,7 @@ class App { .receive("error", () => console.log("Failed to connect")) .receive("ok", () => console.log("Connected!")) - channel.on("new:message", msg => { - console.log(msg.body) - }) + channel.on("new:message", msg => this.appendMessage(msg)) $message .off("keypress") @@ -24,11 +23,22 @@ class App { if(e.keyCode == 13) { channel.push("new:message", { user: $username.val(), - message: $message.val() + body: $message.val() }) + $message.val("") } }) } + + static sanitize(msg) { return $("
").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(`

[${username}]: ${message}

`) + } } $( () => App.init() )