zoom : chatting

zoom/README.md

@@ -0,0 +1,6 @@
+# Zooom
+
+Zoom Clone Project
+- WebRTC
+- WebSockets
+- NodeJS

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",

zoom/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "express": "^4.17.1",
-    "pug": "^3.0.2"
+    "pug": "^3.0.2",
+    "ws": "^8.2.3"
   }
 }

zoom/src/public/js/app.js

@@ -1 +1,24 @@
-alert("hello")
+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 = "";
+})

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);
+
+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);

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")