Merge pull request #79 from Naitik2929/issue78

socket.io added
developer-student-clubs · Oct 2, 2023 · f5fce62 · f5fce62
2 parents 4b63a7b + 9827aaa
commit f5fce62
Show file tree

Hide file tree

Showing 5 changed files with 497 additions and 6 deletions.
diff --git a/npm_Modules/socket/index.html b/npm_Modules/socket/index.html
@@ -0,0 +1,99 @@
+<!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="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
+  <script>
+    // Initialize a Socket.io client and establish a WebSocket connection to the server
+    var socket = io();
+
+    var messages = document.getElementById('messages');
+    var form = document.getElementById('form');
+    var input = document.getElementById('input');
+
+
+    form.addEventListener('submit', function (e) {
+      e.preventDefault();
+      if (input.value) {
+        // If the input field is not empty, emit a 'chat message' event to the server with the message
+        socket.emit('chat message', input.value);
+        input.value = '';
+      }
+    });
+
+    // Listen for incoming messages from the server with the event name 'chat message'
+    socket.on('chat message', function (msg) {
+      // Create a new list item, display the message content, and scroll to the bottom of the chat
+      var item = document.createElement('li');
+      item.textContent = msg;
+      messages.appendChild(item);
+      window.scrollTo(0, document.body.scrollHeight);
+    });
+  </script>
+</body>
+
+</html>
diff --git a/npm_Modules/socket/readme.md b/npm_Modules/socket/readme.md
@@ -0,0 +1,23 @@
+# socket.io
+
+## What is socket.io ?
+
+Socket.io is a JavaScript library for real-time web communication. It enables bidirectional, event-based communication between web clients and servers, making it perfect for chat applications, live updates, and more.
+
+## Installation and Usage
+
+    npm install socket.io
+
+Use it with the server
+
+    const io = new Server(server);
+
+## Features Of socket.io
+
+- Real-time bidirectional communication.
+- Cross-browser compatibility.
+- Event-based communication.
+- Room support for grouping clients.
+- Automatic reconnection handling.
+- Middleware support for customization.
+- Socket.io is a versatile library for building real-time web applications.
diff --git a/npm_Modules/socket/socket.io.js b/npm_Modules/socket/socket.io.js
@@ -1,7 +1,29 @@
-const server = require('http').createServer();
-const io = require('socket.io')(server);
-io.on('connection', client => {
-  client.on('event', data => { /* … */ });
-  client.on('disconnect', () => { /* … */ });
+import express from "express";
+import { Server } from "socket.io";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+// Get the directory name of the current module
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const app = express();
+const port = 3000;
+
+const server = app.listen(port, () => {
+  console.log(`Server started on port ${port}`);
+});
+
+// Create a Socket.io server and attach it to the server
+const io = new Server(server);
+
+app.get("/", (req, res) => {
+  res.sendFile(__dirname + "/index.html");
+});
+
+// Handle WebSocket connections using Socket.io
+io.on("connection", (socket) => {
+  // Listen for 'chat message' events from clients and broadcast messages to all connected clients
+  socket.on("chat message", (msg) => {
+    io.emit("chat message", msg);
+  });
 });
-server.listen(3000);