WebDevSimplified · nitishsingh6277 · Nov 21, 2022
diff --git a/index1.html b/index1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Socket.IO chat</title>
+    <style>
+      body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
+
+      #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
+      #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
+      #input:focus { outline: none; }
+      #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
+
+      #messages { list-style-type: none; margin: 0; padding: 0; }
+      #messages > li { padding: 0.5rem 1rem; }
+      #messages > li:nth-child(odd) { background: #efefef; }
+    </style>
+  </head>
+  <body>
+    <ul id="messages"></ul>
+    <form id="form" action="">
+      <input id="input" autocomplete="off" /><button>Send</button>
+    </form>
+    <script src="/socket.io/socket.io.js"></script>
+<script>
+  var socket = io();
+  var form = document.getElementById('form');
+  var input = document.getElementById('input');
+
+  form.addEventListener('submit', function(e) {
+    e.preventDefault();
+    if (input.value) {
+      socket.emit('chat message', input.value);
+      input.value = '';
+    }
+  });
+</script>
+  </body>
+</html>
diff --git a/index2.html b/index2.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+   <meta charset="UTF-8" />
+   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+   <title>Socket.io Example</title>
+ </head>
+
+ <body>
+   <h1>Our Socket.io Chat Application</h1>
+   <div>
+     <h2>Messages</h2>
+     <ul></ul>
+   </div>
+   <form action="">
+     <input type="text" />
+     <button>Send</button>
+   </form>
+   <script src="/socket.io/socket.io.js"></script>
+   <script>
+     //const socket = io();
+      // select relevant elements
+ const form = document.querySelector("form");
+ const input = document.querySelector("input");
+ messageList = document.querySelector("ul");
+
+ // establish socket.io connection
+ const socket = io();
+
+ // handle sending message to server & input reset
+ function sendMessage(e) {
+   // prevent form submission refreshing page
+   e.preventDefault();
+   // send input value to server as type 'message'
+   socket.emit("message", input.value);
+   // reset input value
+   input.value = "";
+ }
+
+ // add listener to form submission
+ form.addEventListener("submit", sendMessage);
+
+ // add message to our page
+ function addMessageToHTML(message) {
+   // create a new li element
+   const li = document.createElement("li");
+   // add message to the elements text
+   li.innerText = message;
+   // add to list of messages
+   messageList.append(li);
+ }
+  // watch for socket to emit a 'message'
+ socket.on("message", addMessageToHTML);
+
+ // display message when a user connects
+ function alertUserConnected() {
+   addMessageToHTML("User connected");
+ }
+  // watch for socket to emit a 'user connected' event
+ socket.on("user connected", alertUserConnected);
+
+   </script>
+ </body>
+</html>
diff --git a/index_demo.js b/index_demo.js
@@ -0,0 +1,18 @@
+const app = require("express")();
+const http = require("http").createServer(app);
+const io = require("socket.io")(http);
+
+app.get("/", (req, res) => res.sendFile(__dirname + "/index2.html"));
+
+io.on("connection", function(socket) {
+    console.log('socket connected');
+   });
+
+   io.on("connection", function(socket) {
+    io.emit('user connected');
+    socket.on('message', function(msg) {
+      io.emit('message', msg);
+    });
+});
+
+   http.listen(3000, () => console.log('listening on http://localhost:3000'))