Real-Time ChatApp using library Socket.io

Khansa-Zahid · Khansa-Zahid · commit b87ee16396f4 · 2023-10-28T10:54:17.000+05:00
Implement features like group chats, private messaging, and message encryption.
diff --git a/Real-Time Chat/README.md b/Real-Time Chat/README.md
@@ -0,0 +1,31 @@
+# Real-Time Chat Application
+
+This is a simple real-time chat application built using Node.js, Express, and Socket.io. It allows users to join the chat with a username, send messages in real-time, and see messages from other users.
+
+## Features
+
+- **Join Chat**: Users can enter their username to join the chat.
+- **Real-Time Messaging**: Users can send and receive messages in real-time.
+- **User Disconnect Handling**: The application handles user disconnections and notifies when a user leaves the chat.
+
+## Getting Started
+
+Follow these steps to run the application on your local machine:
+
+1. Clone this repository to your local machine.
+2. Install the required dependencies using `npm install`.
+3. Run the server with `node server.js`.
+4. Open your web browser and access the application at `http://localhost:3000`.
+
+## Code Structure
+
+The code structure is organized into the following components:
+
+- `server.js`: This file contains the server-side code using Express and Socket.io for real-time communication.
+- `public/index.html`: This HTML file serves as the front-end for the chat application.
+
+Feel free to modify and enhance this application according to your needs.
+
+---
+
+This project is a part of your real-time chat application. If you have any questions or need further assistance, please feel free to contact us.
diff --git a/Real-Time Chat/Real-Time Chat b/Real-Time Chat/Real-Time Chat
@@ -0,0 +1,79 @@
+real-time-chat-app/
+├── public/
+│   └── index.html
+├── server.js
+├── package.json
+npm init -y
+npm install express socket.io
+// server.js
+const express = require('express');
+const http = require('http');
+const socketIo = require('socket.io');
+
+const app = express();
+const server = http.createServer(app);
+const io = socketIo(server);
+
+// Serve the static HTML file
+app.use(express.static(__dirname + '/public'));
+
+io.on('connection', (socket) => {
+  console.log('A user connected');
+
+  // Listen for 'join' event
+  socket.on('join', (username) => {
+    socket.username = username;
+  });
+
+  // Listen for 'chat message' event
+  socket.on('chat message', (msg) => {
+    io.emit('chat message', { username: socket.username, message: msg });
+  });
+
+  // Handle user disconnection
+  socket.on('disconnect', () => {
+    console.log('A user disconnected');
+  });
+});
+
+// Start the server
+server.listen(3000, () => {
+  console.log('Server is running on http://localhost:3000');
+});
+<!-- public/index.html -->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Real-Time Chat</title>
+</head>
+<body>
+  <h1>Real-Time Chat</h1>
+  <input id="username" type="text" placeholder="Enter your username">
+  <button id="join">Join Chat</button>
+  <ul id="messages"></ul>
+  <input id="message" type="text" placeholder="Type your message">
+  <button id="send">Send</button>
+
+  <script src="/socket.io/socket.io.js"></script>
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <script>
+    const socket = io();
+
+    $('#join').click(() => {
+      const username = $('#username').val();
+      socket.emit('join', username);
+    });
+
+    $('#send').click(() => {
+      const message = $('#message').val();
+      socket.emit('chat message', message);
+      $('#message').val('');
+    });
+
+    socket.on('chat message', (data) => {
+      $('#messages').append($('<li>').text(data.username + ': ' + data.message));
+    });
+  </script>
+</body>
+</html>
+node server.js
