From 29e097f543106072e0d9f3b380f98676f2b5fae9 Mon Sep 17 00:00:00 2001
From: haerong22 <haerong22@naver.com>
Date: Sat, 16 Oct 2021 19:48:18 +0900
Subject: [PATCH] zoom : socket.io - message

---
 zoom/src/public/js/app.js | 32 +++++++++++++++++++++++++++-----
 zoom/src/server.js        | 12 ++++++++++--
 zoom/src/views/home.pug   |  5 ++++-
 3 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/zoom/src/public/js/app.js b/zoom/src/public/js/app.js
index 4f0c24c0..14bf9799 100644
--- a/zoom/src/public/js/app.js
+++ b/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...");
-})
\ No newline at end of file
+socket.on("bye", (left) => {
+    addMessage(`${left} left...`);
+})
+
+socket.on("message", addMessage);
\ No newline at end of file
diff --git a/zoom/src/server.js b/zoom/src/server.js
index 8ddeb984..7f17107c 100644
--- a/zoom/src/server.js
+++ b/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);
\ No newline at end of file
diff --git a/zoom/src/views/home.pug b/zoom/src/views/home.pug
index e4f795ce..a2537add 100644
--- a/zoom/src/views/home.pug
+++ b/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