Node.js9 min read
WebSockets with Socket.io
Build real-time applications with Socket.io. Learn bidirectional communication for chat, notifications, and live updates.
Sarah Chen
December 19, 2025
0.0k0
WebSockets with Socket.io
HTTP is request-response. WebSockets enable real-time, bidirectional communication.
Setup
npm install socket.io
Basic Server
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = new Server(server);
io.on('connection', (socket) => {
console.log('User connected:', socket.id);
socket.on('disconnect', () => {
console.log('User disconnected:', socket.id);
});
});
server.listen(3000, () => {
console.log('Server running on port 3000');
});
Client Connection
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
socket.on('connect', () => {
console.log('Connected!');
});
</script>
Sending & Receiving Events
// Server
io.on('connection', (socket) => {
// Receive from client
socket.on('chat message', (msg) => {
console.log('Message:', msg);
// Send to all clients
io.emit('chat message', msg);
});
});
// Client
socket.emit('chat message', 'Hello!');
socket.on('chat message', (msg) => {
console.log('Received:', msg);
});
Emit Patterns
// To sender only
socket.emit('private', data);
// To all except sender
socket.broadcast.emit('news', data);
// To all connected clients
io.emit('announcement', data);
// To specific socket
io.to(socketId).emit('private', data);
// To room
io.to('room1').emit('room message', data);
Rooms
io.on('connection', (socket) => {
// Join room
socket.on('join room', (room) => {
socket.join(room);
socket.to(room).emit('user joined', socket.id);
});
// Leave room
socket.on('leave room', (room) => {
socket.leave(room);
socket.to(room).emit('user left', socket.id);
});
// Message to room
socket.on('room message', ({ room, message }) => {
io.to(room).emit('message', message);
});
});
Complete Chat Example
// Server
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = new Server(server);
app.use(express.static('public'));
const users = new Map();
io.on('connection', (socket) => {
socket.on('set username', (username) => {
users.set(socket.id, username);
io.emit('user list', Array.from(users.values()));
io.emit('system', `${username} joined`);
});
socket.on('chat message', (msg) => {
const username = users.get(socket.id);
io.emit('chat message', {
user: username,
text: msg,
time: new Date().toLocaleTimeString()
});
});
socket.on('typing', () => {
const username = users.get(socket.id);
socket.broadcast.emit('typing', username);
});
socket.on('disconnect', () => {
const username = users.get(socket.id);
users.delete(socket.id);
io.emit('user list', Array.from(users.values()));
io.emit('system', `${username} left`);
});
});
server.listen(3000);
<!-- public/index.html -->
<!DOCTYPE html>
<html>
<body>
<div id="messages"></div>
<input id="input" /><button onclick="send()">Send</button>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
const input = document.getElementById('input');
const messages = document.getElementById('messages');
socket.emit('set username', prompt('Username?'));
function send() {
socket.emit('chat message', input.value);
input.value = '';
}
socket.on('chat message', (msg) => {
messages.innerHTML += `<p><b>${msg.user}:</b> ${msg.text}</p>`;
});
</script>
</body>
</html>
With CORS
const io = new Server(server, {
cors: {
origin: 'http://localhost:3000',
methods: ['GET', 'POST']
}
});
Key Takeaway
Socket.io enables real-time communication. emit() sends events, on() receives them. Use rooms for group messaging. It handles reconnection, fallbacks, and cross-browser issues automatically.
#Node.js#WebSockets#Socket.io#Real-time#Intermediate