zoom : socket.io - message

zoom/src/public/js/app.js

@@ -15,11 +15,31 @@ function addMessage(messages) {
     ul.appendChild(li);
 }
 
+function handleMessageSubmit(event) {
+    event.preventDefault();
+    const input = room.querySelector("#msg input");
+    const value = input.value;
+    socket.emit("message", input.value, roomName, () => {
+        addMessage(`You : ${value}`);
+    });
+    input.value = "";
+}
+
+function handleNicknameSubmit(event) {
+    event.preventDefault();
+    const input = room.querySelector("#name input");
+    socket.emit("nickname", input.value);
+}
+
 function showRoom() {
     welcome.hidden = true;
     room.hidden = false;
     const h3 = room.querySelector("h3");
     h3.innerText = `Room : ${roomName}`;
+    const msgForm = room.querySelector("#msg");
+    const nameForm = room.querySelector("#name");
+    msgForm.addEventListener("submit", handleMessageSubmit);
+    nameForm.addEventListener("submit", handleNicknameSubmit);
 }
 function handleRoomSubmit(event) {
     event.preventDefault();
@@ -36,10 +56,12 @@ function handleRoomSubmit(event) {
 
 form.addEventListener("submit", handleRoomSubmit);
 
-socket.on("welcome", () => {
-    addMessage("Someone joined!");
+socket.on("welcome", (user) => {
+    addMessage(`${user} joined!`);
 })
 
-socket.on("bye", () => {
-    addMessage("Someone left...");
-})
+socket.on("bye", (left) => {
+    addMessage(`${left} left...`);
+})
+
+socket.on("message", addMessage);

zoom/src/server.js

@@ -17,19 +17,27 @@ const httpServer = http.createServer(app);
 const wsServer = SocketIo(httpServer);
 
 wsServer.on("connection", socket => {
+    socket['nickname'] = "Anonymous";
     socket.onAny((event) => {
         console.log(`Socket Event: ${event}`)
     });
     socket.on("enter_room", (roomName, done) => {
         socket.join(roomName);
         done();
-        socket.to(roomName).emit("welcome");
+        socket.to(roomName).emit("welcome", socket.nickname);
     });
     socket.on("disconnecting", () => {
         socket.rooms.forEach((room) => {
-            socket.to(room).emit("bye");
+            socket.to(room).emit("bye", socket.nickname);
         });
     })
+    socket.on("message", (msg, room, done) => {
+        socket.to(room).emit("message", `${socket.nickname}: ${msg}`);
+        done();
+    })
+    socket.on("nickname", (nickname) => {
+        socket["nickname"] = nickname;
+    })
 });
 
 httpServer.listen(3000, handleListen);

zoom/src/views/home.pug

@@ -19,7 +19,10 @@ html(lang="en")
 			div#room
 				h3  
 				ul
-				form
+				form#name
+					input(placeholder="nickname", required, type="text")
+					button Save
+				form#msg
 					input(placeholder="message", required, type="text")
 					button Send