help me integrating WebSocket functionality into a web application using Node.js on the server-side and JavaScript on the client-side.

223

Server-Side (Node.js with the ws library):

// Install the 'ws' library using npm: npm install ws
const WebSocket = require('ws');
const http = require('http');
const express = require('express');
const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

// WebSocket server logic
wss.on('connection', (ws) => {
console.log('Client connected');

// Handle incoming messages from clients
ws.on('message', (message) => {
// Broadcast the message to all connected clients
wss.clients.forEach((client) => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});

// Handle client disconnect
ws.on('close', () => {
console.log('Client disconnected');
});
});

// Start the HTTP server
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
console.log(Server is listening on port ${PORT});

Client-Side (JavaScript in HTML):

<html lang="en"> <head> <meta charset="UTF-8"> <title>WebSocket Chat</title> </head> <body> <h1>WebSocket Chat</h1> <input type="text" id="message" placeholder="Enter your message"> <button onclick="sendMessage()">Send</button> <ul id="chat"></ul> <script> const socket = new WebSocket('ws://your-server-domain-or-ip:3000'); // Update with your server details socket.onopen = (event) => { console.log('WebSocket connection opened:', event); }; socket.onmessage = (event) => { const message = event.data; const chat = document.getElementById('chat'); const listItem = document.createElement('li'); listItem.textContent = message; chat.appendChild(listItem); }; socket.onclose = (event) => { console.log('WebSocket connection closed:', event); }; function sendMessage() { const messageInput = document.getElementById('message'); const message = messageInput.value; socket.send(message); messageInput.value = ''; } </script> </body> </html> });