Real-time communication has become essential in modern web applications. WebSocket technology enables bi-directional, full-duplex communication between clients and servers, making it possible to build interactive features like chat systems, live notifications, and collaborative tools.
The WebSocket protocol establishes a persistent connection through an initial HTTP handshake, then upgrades to a WebSocket connection. This eliminates the overhead of creating new connections for each interaction, making it more efficient than traditional HTTP polling.
Let’s start with a basic WebSocket server implementation using Node.js:
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', (ws) => {
console.log('New client connected');
ws.on('message', (message) => {
console.log('Received:', message);
ws.send(`Server received: ${message}`);
});
ws.on('close', () => {
console.log('Client disconnected');
});
});
For Python developers, here’s an equivalent implementation using FastAPI:
from fastapi import FastAPI, WebSocket
from fastapi.websockets import WebSocketDisconnect
app = FastAPI()
@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
await websocket.accept()
try:
while True:
data = await websocket.receive_text()
await websocket.send_text(f"Server received: {data}")
except WebSocketDisconnect:
print("Client disconnected")
On the client side, browser-based JavaScript provides a native WebSocket API. Here’s a robust client implementation with reconnection handling:
class WebSocketClient {
constructor(url, options = {}) {
this.url = url;
this.options = {
reconnectInterval: 1000,
maxReconnectAttempts: 5,
...options
};
this.reconnectAttempts = 0;
this.connect();
}
connect() {
this.ws = new WebSocket(this.url);
this.ws.onopen = () => {
console.log('Connected');
this.reconnectAttempts = 0;
};
this.ws.onclose = () => {
this.handleDisconnection();
};
this.ws.onerror = (error) => {
console.error('WebSocket error:', error);
};
}
handleDisconnection() {
if (this.reconnectAttempts < this.options.maxReconnectAttempts) {
this.reconnectAttempts++;
setTimeout(() => this.connect(), this.options.reconnectInterval);
}
}
send(data) {
if (this.ws.readyState === WebSocket.OPEN) {
this.ws.send(data);
}
}
}
For broadcasting messages to multiple clients, we need to maintain a list of connected clients:
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
const clients = new Set();
server.on('connection', (ws) => {
clients.add(ws);
ws.on('message', (message) => {
broadcast(message);
});
ws.on('close', () => {
clients.delete(ws);
});
});
function broadcast(message) {
for (let client of clients) {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
}
}
When scaling WebSocket applications, load balancing becomes crucial. Sticky sessions ensure that clients maintain their connection to the same server:
const sticky = require('sticky-session');
const WebSocket = require('ws');
const http = require('http');
const server = http.createServer();
const wss = new WebSocket.Server({ server });
sticky.listen(server, 8080);
wss.on('connection', (ws) => {
// Handle connection
});
Security is paramount in WebSocket applications. Here’s an implementation with authentication:
const WebSocket = require('ws');
const jwt = require('jsonwebtoken');
const server = new WebSocket.Server({
port: 8080,
verifyClient: (info, callback) => {
const token = info.req.headers['authorization'];
if (!token) {
callback(false, 401, 'Unauthorized');
return;
}
jwt.verify(token, 'secret-key', (err, decoded) => {
if (err) {
callback(false, 401, 'Unauthorized');
return;
}
info.req.user = decoded;
callback(true);
});
}
});
For performance monitoring, we can implement heartbeat checks:
function heartbeat() {
this.isAlive = true;
}
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', (ws) => {
ws.isAlive = true;
ws.on('pong', heartbeat);
});
setInterval(() => {
server.clients.forEach((ws) => {
if (ws.isAlive === false) {
return ws.terminate();
}
ws.isAlive = false;
ws.ping();
});
}, 30000);
When implementing WebSocket applications at scale, consider using Redis for pub/sub functionality across multiple server instances:
const Redis = require('ioredis');
const WebSocket = require('ws');
const pub = new Redis();
const sub = new Redis();
const server = new WebSocket.Server({ port: 8080 });
sub.subscribe('broadcast');
sub.on('message', (channel, message) => {
server.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
server.on('connection', (ws) => {
ws.on('message', (message) => {
pub.publish('broadcast', message);
});
});
For real-world applications, implementing room-based communication is common:
class RoomManager {
constructor() {
this.rooms = new Map();
}
joinRoom(roomId, client) {
if (!this.rooms.has(roomId)) {
this.rooms.set(roomId, new Set());
}
this.rooms.get(roomId).add(client);
}
leaveRoom(roomId, client) {
if (this.rooms.has(roomId)) {
this.rooms.get(roomId).delete(client);
if (this.rooms.get(roomId).size === 0) {
this.rooms.delete(roomId);
}
}
}
broadcastToRoom(roomId, message, sender) {
if (this.rooms.has(roomId)) {
this.rooms.get(roomId).forEach((client) => {
if (client !== sender && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
}
}
}
Error handling is crucial for maintaining stable WebSocket connections. Here’s a comprehensive error handling implementation:
class WebSocketHandler {
constructor(server) {
this.server = server;
this.setupErrorHandling();
}
setupErrorHandling() {
this.server.on('connection', (ws) => {
ws.on('error', this.handleError);
ws.on('close', this.handleClose);
process.on('uncaughtException', (error) => {
console.error('Uncaught Exception:', error);
this.gracefulShutdown();
});
process.on('SIGTERM', () => {
this.gracefulShutdown();
});
});
}
handleError(error) {
console.error('WebSocket error:', error);
if (error.code === 'ECONNRESET') {
this.terminate();
}
}
handleClose() {
// Cleanup resources
}
gracefulShutdown() {
this.server.clients.forEach((client) => {
client.send('Server is shutting down');
client.close();
});
setTimeout(() => {
process.exit(0);
}, 1000);
}
}
These implementations provide a foundation for building scalable real-time applications. The key is to maintain clean code structure, implement proper error handling, and consider scaling requirements from the start. Regular testing under various network conditions and load scenarios helps ensure reliability.
Remember to implement proper logging and monitoring solutions to track connection states, message delivery, and system performance. This helps in identifying and resolving issues quickly in production environments.
