zoom : socket.io - room

zoom/src/public/js/app.js

@@ -2,10 +2,24 @@ const socket = io();
 
 const welcome = document.getElementById("welcome");
 const form = welcome.querySelector("form");
+const room = document.getElementById("room");
 
+room.hidden = true;
 
-function backendDone(msg) {
-    console.log(`The backend says: `, msg);
+let roomName;
+
+function addMessage(messages) {
+    const ul = room.querySelector("ul");
+    const li = document.createElement("li");
+    li.innerText = messages;
+    ul.appendChild(li);
+}
+
+function showRoom() {
+    welcome.hidden = true;
+    room.hidden = false;
+    const h3 = room.querySelector("h3");
+    h3.innerText = `Room : ${roomName}`;
 }
 function handleRoomSubmit(event) {
     event.preventDefault();
@@ -13,10 +27,19 @@ function handleRoomSubmit(event) {
 
     socket.emit(
         "enter_room", 
-        {payload: input.value},
-        backendDone
+        input.value,
+        showRoom
     );
+    roomName = input.value;
     input.value = "";
 }
 
-form.addEventListener("submit", handleRoomSubmit);
+form.addEventListener("submit", handleRoomSubmit);
+
+socket.on("welcome", () => {
+    addMessage("Someone joined!");
+})
+
+socket.on("bye", () => {
+    addMessage("Someone left...");
+})

zoom/src/server.js

@@ -17,12 +17,19 @@ const httpServer = http.createServer(app);
 const wsServer = SocketIo(httpServer);
 
 wsServer.on("connection", socket => {
-    socket.on("enter_room", (roomName, done) => {
-        console.log(roomName);
-        setTimeout(() => {
-            done("hello from the backend")            
-        }, 10000);
+    socket.onAny((event) => {
+        console.log(`Socket Event: ${event}`)
     });
+    socket.on("enter_room", (roomName, done) => {
+        socket.join(roomName);
+        done();
+        socket.to(roomName).emit("welcome");
+    });
+    socket.on("disconnecting", () => {
+        socket.rooms.forEach((room) => {
+            socket.to(room).emit("bye");
+        });
+    })
 });
 
 httpServer.listen(3000, handleListen);

zoom/src/views/home.pug

@@ -15,6 +15,13 @@ html(lang="en")
 				form
 					input(placeholder="room name", required, type="text")
 					button Enter Room
+			
+			div#room
+				h3  
+				ul
+				form
+					input(placeholder="message", required, type="text")
+					button Send
 
 		script(src="/socket.io/socket.io.js") 
 		script(src="/public/js/app.js")