2.1. Server Setup
- Initialize a Node.js Project
mkdir socketio-demo cd socketio-demo npm init -y
- Install Dependencies
npm install express socket.io
- Create the Server FileCreate a file named
server.js with the following content:
javascriptCopy codeconst express = require('express'); const http = require('http'); const socketIo = require('socket.io'); const app = express(); const server = http.createServer(app); const io = socketIo(server); app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); }); io.on('connection', (socket) => { console.log('A user connected'); socket.on('disconnect', () => { console.log('User disconnected'); }); socket.on('chat message', (msg) => { io.emit('chat message', msg); }); }); server.listen(3000, () => { console.log('Server is listening on port 3000'); });
2.2. Client Setup
- Create the HTML FileCreate a file named
index.html in the same directory as server.js:
<!DOCTYPE html> <html> <head> <title>Socket.io Demo</title> <script src="/socket.io/socket.io.js"></script> <script> document.addEventListener('DOMContentLoaded', () => { const socket = io(); const form = document.querySelector('form'); const input = document.querySelector('input'); const messages = document.querySelector('#messages'); form.addEventListener('submit', (e) => { e.preventDefault(); socket.emit('chat message', input.value); input.value = ''; return false; }); socket.on('chat message', (msg) => { const item = document.createElement('li'); item.textContent = msg; messages.appendChild(item); window.scrollTo(0, document.body.scrollHeight); }); }); </script> </head> <body> <ul id="messages"></ul> <form action=""> <input autocomplete="off" /><button>Send</button> </form> </body> </html>
Leave a Reply