Room events added

client/src/scripts/main.js

@@ -1,7 +1,7 @@
 import '../styles/main.css';
 import 'regenerator-runtime/runtime'
 import { fetchRoomInfo, createRoom } from './controller.js';
-import {leftBubble, rightBubble} from './templates';
+import {leftBubble, rightBubble, newUserText, userGoneText} from './templates';
 
 import $ from 'jquery';
 
@@ -21,7 +21,7 @@ $(() => {
         }
     })
 
-    $("#create-btn").on('click', async (e) => {
+    $("#create-btn").on('click', async () => {
         try {
             let data = await createRoom();
             openRoom(data);
@@ -47,20 +47,35 @@ $(() => {
         $("#join-section, #choose-room").hide();
     }
 
+    function closeRoom() {
+        $("#chat-room").hide();
+        $("#choose-room").show();
+    }
+
     /** SOCKETS LOGIC */
     function openSocket(addr) {
         App.socket = new WebSocket(`ws://${addr}`);
 
-        App.socket.addEventListener("message", (event) => {
-            let response = JSON.parse(event.data);
-            if(response.first) {
+        App.socket.addEventListener("message", (e) => {
+            let response = JSON.parse(e.data);
+            let event = response.event;
+            
+            if(event == 'open') {
                 App.userId = response.id;
-                return;
+            } else if (event == 'new_user') {
+                $('.chat-body').append(newUserText(response));
+            } else if (event == 'user_gone') {
+                $('.chat-body').append(userGoneText());
+            } else if (event == 'message') {
+                if(response.id == App.userId) $('.chat-body').append(rightBubble(response));
+                else $('.chat-body').append(leftBubble(response));
             }
-
-            if(response.id == App.userId) $('.chat-body').append(rightBubble(response));
-            else $('.chat-body').append(leftBubble(response));
         })
+
+        App.socket.addEventListener("close", () => {
+            alert("The room has been closed for innactivity");
+            closeRoom();
+        });
     }
 });
 

client/src/scripts/templates.js

@@ -3,4 +3,8 @@ export const leftBubble = (response) => `<div class="bubble-right msg-bubble">
                                             ${response.msg}
                                         </div>`;
 
-export const rightBubble = (response) => `<div class="bubble-left msg-bubble">${response.msg}</div>`;
+export const rightBubble = (response) => `<div class="bubble-left msg-bubble">${response.msg}</div>`;
+
+export const newUserText = (response) => `<div class="info-msg">A new <i class="fas fa-user-ninja"></i> has joined the room!</div>`;
+
+export const userGoneText = () => `<div class="info-msg">A <i class="fas fa-user-ninja"></i> has left the room</div>`;

client/src/styles/chat.css

@@ -108,6 +108,15 @@
     top: 0px;
 }
 
+.info-msg {
+    text-align: center;
+    color: gray;
+    font-size: 1.1rem;
+    padding: .5rem 1rem;
+    position: relative;
+}
+
+
 .chat-input ::placeholder {
     /* Chrome, Firefox, Opera, Safari 10.1+ */
     color: white;

server/src/rooms/room.rs

@@ -3,36 +3,56 @@ extern crate ws;
 use serde_json;
 use std::net::SocketAddr;
 use std::thread;
-use ws::{Handler, Handshake, Message, Result as WResult, Sender as WSender, WebSocket};
+use ws::{Handler, Handshake, Message, Result as WResult, Sender as WSender, WebSocket, CloseCode};
 
 struct Room {
-    out: WSender,
+    out: WSender
+}
+
+impl Room {
+    fn open_msg(&self) -> String {
+        serde_json::json!({
+            "event": "open",
+            "id": self.out.connection_id()
+        }).to_string()
+    }
+
+    fn new_user_msg(&self) -> String {
+       serde_json::json!({
+            "event": "new_user",
+            "id": self.out.connection_id()
+        }).to_string()
+    }
+
+    fn user_gone_msg(&self) -> String {
+        serde_json::json!({
+            "event": "user_gone",
+            "msg": "A ninja has disconnected" 
+        }).to_string()
+    }
+
+    fn user_msg(&self, msg: Message) -> String {
+        serde_json::json!({
+            "event": "message",
+            "id": self.out.connection_id(),
+            "msg": msg.to_string() 
+        }).to_string()
+    }
 }
 
 impl Handler for Room {
     fn on_open(&mut self, _: Handshake) -> WResult<()> {
-        let response = serde_json::json!({
-            "first": true,
-            "id": self.out.connection_id()
-        });
-        self.out.send(response.to_string())?;
+        self.out.send(self.open_msg())?;
+        self.out.broadcast(self.new_user_msg())?;
         Ok(())
     }
 
     fn on_message(&mut self, msg: Message) -> WResult<()> {
-        let response = serde_json::json!({
-            "first": false,
-            "id": self.out.connection_id(),
-            "msg": msg.to_string() 
-        });
-        Ok(self.out.broadcast(response.to_string())?)
+        Ok(self.out.broadcast(self.user_msg(msg))?)
     }
 
-    fn on_shutdown(&mut self) {
-        println!(
-            "Room with sender id {} closing...",
-            self.out.connection_id()
-        )
+    fn on_close(&mut self, _: CloseCode, _: &str) {
+        self.out.broadcast(self.user_gone_msg()).unwrap();
     }
 }