Update events

broken/chat.js

@@ -0,0 +1,38 @@
+var socket;
+
+function add_message(message) {
+    $('#messages').append('<p></p>').children().last().text(message);
+}
+
+function read_message_input() {
+    return $('#message').val();
+}
+
+function connect_to_chat() {
+
+    socket = new WebSocket("ws://localhost:8080/ws");
+
+    socket.onopen = function () {
+        add_message("Connected.")
+    };
+
+    socket.onmessage = function (event) {
+        add_message(event.data);
+    };
+
+    socket.onclose = function () {
+        add_message("Connection closed.");
+    };
+}
+
+function send_message(e) {
+    var message = read_message_input();
+    add_message(message);
+    socket.send(message);
+    $('#message').val("");
+}
+
+$(document).ready(function () {
+    connect_to_chat();
+    $('#send-button').click(send_message);
+})

broken/chat_room.erl

@@ -0,0 +1,84 @@
+-module(chat_room).
+-behaviour(gen_server).
+
+-export([start_link/0, enter/1, leave/1, send_message/2]).
+
+%% gen_server callbacks
+-export([
+    init/1,
+    handle_call/3,
+    handle_cast/2,
+    handle_info/2,
+    terminate/2,
+    code_change/3
+]).
+
+-define(SERVER, ?MODULE).
+
+-record(state, {clients = []}).
+
+%%%=============================================================================
+%%% API
+%%%=============================================================================
+
+start_link() ->
+    gen_server:start_link({local, ?SERVER}, ?MODULE, [], []).
+
+enter(Pid) ->
+    gen_server:cast(?SERVER, {enter, Pid}).
+
+leave(Pid) ->
+    gen_server:cast(?SERVER, {leave, Pid}).
+
+send_message(Pid, Message) ->
+    gen_server:cast(?SERVER, {send_message, Pid, Message}).
+
+%%%=============================================================================
+%%% gen_server callbacks
+%%%=============================================================================
+
+init([]) ->
+    Dispatch = cowboy_router:compile([
+        {'_', [
+            {"/", cowboy_static, {priv_file, erws, "index.html"}},
+            {"/ws", ws_h, []},
+            {"/static/[...]", cowboy_static, {priv_dir, erws, "static"}}
+        ]}
+    ]),
+    cowboy:start_clear(http, [{port, 8080}], #{
+        env => #{dispatch => Dispatch}
+    }),
+    {ok, #state{}}.
+
+handle_call(_Request, _From, State) ->
+    {noreply, State}.
+
+handle_cast({enter, Pid}, State = #state{clients = Clients}) ->
+    {noreply, State#state{clients = [Pid | Clients]}};
+handle_cast({leave, Pid}, State = #state{clients = Clients}) ->
+    {noreply, State#state{clients = Clients -- [Pid]}};
+handle_cast({send_message, Pid, Message}, State) ->
+    do_send_message(Pid, Message, State),
+    {noreply, State}.
+
+handle_info(_Info, State) ->
+    {noreply, State}.
+
+terminate(_Reason, _State) ->
+    cowboy:stop_listener(chat).
+
+code_change(_OldVsn, State, _Extra) ->
+    {ok, State}.
+
+%%%=============================================================================
+%%% Internal functions
+%%%=============================================================================
+
+do_send_message(Pid, Message, #state{clients = Clients}) ->
+    OtherPids = Clients -- [Pid],
+    lists:foreach(
+        fun(OtherPid) ->
+            OtherPid ! {send_message, self(), Message}
+        end,
+        OtherPids
+    ).

broken/erws_app.erl

@@ -0,0 +1,15 @@
+%% Feel free to use, reuse and abuse the code in this file.
+
+%% @private
+-module(erws_app).
+-behaviour(application).
+
+%% API.
+-export([start/2, stop/1]).
+
+%% API.
+start(_Type, _Args) ->
+    erws_sup:start_link().
+
+stop(_State) ->
+    ok = cowboy:stop_listener(http).

broken/erws_sup.erl

@@ -0,0 +1,28 @@
+%% Feel free to use, reuse and abuse the code in this file.
+
+%% @private
+-module(erws_sup).
+-behaviour(supervisor).
+
+%% API
+-export([start_link/0]).
+
+%% Supervisor callbacks
+-export([init/1]).
+
+%% Helper macro for declaring children of supervisor
+-define(CHILD(I, Type), {I, {I, start_link, []}, permanent, 5000, Type, [I]}).
+
+%% ===================================================================
+%% API functions
+%% ===================================================================
+
+start_link() ->
+    supervisor:start_link({local, ?MODULE}, ?MODULE, []).
+
+%% ===================================================================
+%% Supervisor callbacks
+%% ===================================================================
+
+init([]) ->
+    {ok, {{one_for_one, 5, 10}, [?CHILD(chat_room, worker)]}}.

broken/index.html

@@ -0,0 +1,55 @@
+<html>
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+    <title>Chat room application</title>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+</head>
+
+<body>
+    <input type="text" id="message"></input>
+    <button id="send-button">Send</button>
+    <div id="messages"></div>
+
+    <script type="text/javascript">
+        var socket;
+
+        function add_message(message) {
+            $('#messages').append('<p></p>').children().last().text(message);
+        }
+
+        function read_message_input() {
+            return $('#message').val();
+        }
+
+        function connect_to_chat() {
+            socket = new WebSocket("ws://localhost:8080/ws");
+
+            socket.onopen = function () {
+                //add_message("Connected.")
+            };
+
+            socket.onmessage = function (event) {
+                add_message(event.data);
+            };
+
+            socket.onclose = function () {
+                //add_message("Connection closed.");
+            };
+        }
+
+        function send_message(e) {
+            var message = read_message_input();
+            add_message(message);
+            socket.send(message);
+            $('#message').val("");
+        }
+
+        $(document).ready(function () {
+            connect_to_chat();
+            $('#send-button').click(send_message);
+        })
+    </script>
+</body>
+
+</html>

broken/ws_h.erl

@@ -0,0 +1,29 @@
+-module(ws_h).
+
+-export([init/2]).
+-export([websocket_init/1]).
+-export([websocket_handle/3]).
+-export([websocket_info/3]).
+-export([websocket_terminate/3]).
+
+init(Req, Opts) ->
+	{cowboy_websocket, Req, Opts}.
+
+websocket_init(Req) ->
+    chat_room:enter(self()),
+    {ok, Req}.
+
+websocket_handle({text, Msg}, Req, State) ->
+    chat_room:send_message(self(), Msg),
+    {ok, Req, State};
+websocket_handle(_Data, Req, State) ->
+    {ok, Req, State}.
+
+websocket_info({send_message, _ServerPid, Msg}, Req, State) ->
+    {reply, {text, Msg}, Req, State};
+websocket_info(_Info, Req, State) ->
+    {ok, Req, State}.
+
+websocket_terminate(_Reason, _Req, _State) ->
+    chat_room:leave(self()),
+    ok.

priv/index.html

@@ -3,42 +3,41 @@
 
 <head>
     <meta charset="utf-8" />
-    <title>Websocket client</title>
+    <title>Erlang WebSocket</title>
 </head>
 
 <body>
 
     <header>
-        <h1>Websocket client</h1>
+        <h1>Erlang WebSocket</h1>
         <div id="status"></div>
     </header>
 
     <nav>
         <div id="connecting">
             <input type='text' id="server" value=""></input>
-            <button type="button" onclick="toggle_connection()">connection</button>
+            <button type="button" onclick="toggle_connection()">Conectar</button>
         </div>
 
         <div id="connected">
             <input type='text' id="message" value=""></input>
-            <button type="button" onclick="sendTxt();">send</button>
+            <button type="button" onclick="sendTxt();">Enviar</button>
         </div>
     </nav>
 
     <main id="content">
-        <button id="clear" onclick="clearScreen()">Clear text</button>
+        <button id="clear" onclick="clearScreen()">Limpar</button>
         <div id="output"></div>
     </main>
 
     <script type="text/javascript">
-
-        var websocket;
-        var server = document.getElementById("server");
-        var message = document.getElementById("message");
-        var connecting = document.getElementById("connecting");
-        var connected = document.getElementById("connected");
-        var content = document.getElementById("content");
-        var output = document.getElementById("output");
+        let websocket;
+        let server = document.getElementById("server");
+        let message = document.getElementById("message");
+        let connecting = document.getElementById("connecting");
+        let connected = document.getElementById("connected");
+        let content = document.getElementById("content");
+        let output = document.getElementById("output");
 
         server.value = "ws://" + window.location.host + "/websocket";
         connected.style.display = "none";
@@ -70,25 +69,25 @@
             if (websocket.readyState == websocket.OPEN) {
                 var msg = message.value;
                 websocket.send(msg);
-                showScreen('sending: ' + msg);
+                showScreen('<span><b>CLIENT</b>: ' + msg + '</span>');
             } else {
                 showScreen('websocket is not connected');
             };
         };
 
         function onOpen(evt) {
-            showScreen('<span style="color: green;">CONNECTED </span>');
+            showScreen('<span><b>SERVER</b>: Conectado</span>');
             connecting.style.display = "none";
             connected.style.display = "";
             content.style.display = "";
         };
 
         function onClose(evt) {
-            showScreen('<span style="color: red;">DISCONNECTED</span>');
+            showScreen('<span><b>SERVER</b>: Desconectado</span>');
         };
 
         function onMessage(evt) {
-            showScreen('<span style="color: blue;">RESPONSE: ' + evt.data + '</span>');
+            showScreen('<span><b>SERVER</b>: ' + evt.data + '</span>');
         };
 
         function onError(evt) {

src/erws_app.erl

@@ -1,14 +1,9 @@
-%% Feel free to use, reuse and abuse the code in this file.
-
-%% @private
 -module(erws_app).
 -behaviour(application).
 
-%% API.
 -export([start/2]).
 -export([stop/1]).
 
-%% API.
 start(_Type, _Args) ->
     Dispatch = cowboy_router:compile([
         {'_', [
@@ -17,7 +12,7 @@ start(_Type, _Args) ->
             {"/static/[...]", cowboy_static, {priv_dir, erws, "static"}}
         ]}
     ]),
-    {ok, _} = cowboy:start_clear(http, [{port, 8080}], #{
+    {ok, _} = cowboy:start_clear(http, [{port, 5555}], #{
         env => #{dispatch => Dispatch}
     }),
     erws_sup:start_link().

src/erws_sup.erl

@@ -1,23 +1,14 @@
-%% Feel free to use, reuse and abuse the code in this file.
-
-%% @private
 -module(erws_sup).
 -behaviour(supervisor).
 
-%% API.
 -export([start_link/0]).
 
-%% supervisor.
 -export([init/1]).
 
-%% API.
-
 -spec start_link() -> {ok, pid()}.
 start_link() ->
     supervisor:start_link({local, ?MODULE}, ?MODULE, []).
 
-%% supervisor.
-
 init([]) ->
     Procs = [],
     {ok, {{one_for_one, 10, 10}, Procs}}.

src/ws_h.erl

@@ -9,16 +9,16 @@ init(Req, Opts) ->
     {cowboy_websocket, Req, Opts}.
 
 websocket_init(State) ->
-    erlang:start_timer(1000, self(), <<"Hello!">>),
+    erlang:start_timer(1000, self(), <<"Ola!">>),
     {[], State}.
 
 websocket_handle({text, Msg}, State) ->
-    {[{text, <<"That's what she said! ", Msg/binary>>}], State};
+    {[{text, <<"Voce disse: ", Msg/binary>>}], State};
 websocket_handle(_Data, State) ->
     {[], State}.
 
 websocket_info({timeout, _Ref, Msg}, State) ->
-    erlang:start_timer(1000, self(), <<"How' you doin'?">>),
+    erlang:start_timer(1000, self(), <<"Tudo bem?">>),
     {[{text, Msg}], State};
 websocket_info(_Info, State) ->
     {[], State}.