From f7f00b979bc1a35b6e4fe50256b56001177579be Mon Sep 17 00:00:00 2001
From: haerong22 <haerong22@naver.com>
Date: Mon, 4 Oct 2021 17:15:20 +0900
Subject: [PATCH] zoom : chatting

---
 zoom/README.md            |  6 ++++++
 zoom/package-lock.json    | 29 ++++++++++++++++++++++++++++-
 zoom/package.json         |  3 ++-
 zoom/src/public/js/app.js | 25 ++++++++++++++++++++++++-
 zoom/src/server.js        | 22 +++++++++++++++++++++-
 zoom/src/views/home.pug   |  7 +++++--
 6 files changed, 86 insertions(+), 6 deletions(-)
 create mode 100644 zoom/README.md

diff --git a/zoom/README.md b/zoom/README.md
new file mode 100644
index 00000000..af3e486e
--- /dev/null
+++ b/zoom/README.md
@@ -0,0 +1,6 @@
+# Zooom
+
+Zoom Clone Project
+- WebRTC
+- WebSockets
+- NodeJS
\ No newline at end of file
diff --git a/zoom/package-lock.json b/zoom/package-lock.json
index 0438ec0d..20f278cc 100644
--- a/zoom/package-lock.json
+++ b/zoom/package-lock.json
@@ -10,7 +10,8 @@
       "license": "MIT",
       "dependencies": {
         "express": "^4.17.1",
-        "pug": "^3.0.2"
+        "pug": "^3.0.2",
+        "ws": "^8.2.3"
       },
       "devDependencies": {
         "@babel/cli": "^7.15.7",
@@ -4991,6 +4992,26 @@
         "typedarray-to-buffer": "^3.1.5"
       }
     },
+    "node_modules/ws": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+      "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/xdg-basedir": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
@@ -8732,6 +8753,12 @@
         "typedarray-to-buffer": "^3.1.5"
       }
     },
+    "ws": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+      "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+      "requires": {}
+    },
     "xdg-basedir": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
diff --git a/zoom/package.json b/zoom/package.json
index 28bbc0c4..9ff9a8ec 100644
--- a/zoom/package.json
+++ b/zoom/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "express": "^4.17.1",
-    "pug": "^3.0.2"
+    "pug": "^3.0.2",
+    "ws": "^8.2.3"
   }
 }
diff --git a/zoom/src/public/js/app.js b/zoom/src/public/js/app.js
index 6b2af482..2ea3efd3 100644
--- a/zoom/src/public/js/app.js
+++ b/zoom/src/public/js/app.js
@@ -1 +1,24 @@
-alert("hello")
\ No newline at end of file
+const messageList = document.querySelector("ul");
+const messageForm = document.querySelector("form");
+
+const socket = new WebSocket(`ws://${window.location.host}`);
+
+socket.onopen = () => {
+    console.log("Connected to Server");
+}
+
+socket.onmessage = (message) => {
+    console.log("Just got this: ", message.data, " from the server");
+}
+
+socket.onclose = () => {
+    console.log("Disconnected")
+}
+
+
+messageForm.addEventListener("submit", (event) => {
+    event.preventDefault();
+    const input = messageForm.querySelector("input");
+    socket.send(input.value);
+    input.value = "";
+})
\ No newline at end of file
diff --git a/zoom/src/server.js b/zoom/src/server.js
index f8ccea7d..1614e6e4 100644
--- a/zoom/src/server.js
+++ b/zoom/src/server.js
@@ -1,3 +1,5 @@
+import http from "http";
+import WebSocket from "ws";
 import express, { application } from "express";
 
 const app = express();
@@ -10,4 +12,22 @@ app.use("/public", express.static(__dirname + "/public"));
 app.get("/", (req, res) => res.render("home"));
 app.get("/*", (req, res) => res.redirect("/"));
 const handleListen = () => console.log(`Listening on http://localhost:3000`);
-app.listen(3000, handleListen);
\ No newline at end of file
+
+const server = http.createServer(app);
+const wss = new WebSocket.Server({server});
+
+const sockets = [];
+
+wss.on("connection", (socket) => {
+    sockets.push(socket)
+    console.log("Connected to Browser");
+    socket.onclose = () => {
+        console.log("Disconnect from the Browser")
+    }
+    socket.onmessage = (message) => {
+        sockets.forEach(aSocket => aSocket.send(message.data))
+    }
+    socket.send("Hello!!");
+});
+
+server.listen(3000, handleListen);
\ No newline at end of file
diff --git a/zoom/src/views/home.pug b/zoom/src/views/home.pug
index c2ecd796..8e568148 100644
--- a/zoom/src/views/home.pug
+++ b/zoom/src/views/home.pug
@@ -11,6 +11,9 @@ html(lang="en")
 		header 
 			h1 Zooom!
 		main 
-			h2 Welcome to Zooom
-			
+			ul 
+			form
+				input(type="text", placeholder="write a msg", required)
+				button Send
+
 		script(src="/public/js/app.js") 
\ No newline at end of file