How to Use WebSockets for Real-Time Communication
Build real-time features with WebSocket connections. Chat, notifications, live updates, and collaborative editing.
- Build real-time features with WebSocket connections.
- How WebSockets Differ from HTTP.
- Setting Up a Connection.
- Common Real-Time Patterns.
- Error Handling and Reconnection.
How WebSockets Differ from HTTP
HTTP is request-response: client asks, server answers, connection closes. WebSocket is persistent and bidirectional: after an HTTP handshake, the connection stays open and either side can send messages anytime. Ideal for chat, notifications, collaborative editing, stock tickers, multiplayer games. The alternative — polling with setInterval — wastes bandwidth, increases server load, and introduces latency equal to the polling interval. Test API patterns with the API Request Builder.
Setting Up a Connection
Opening a connection: const ws = new WebSocket('wss://example.com/socket'). Always use wss:// (encrypted) in production. Events: ws.onopen (connected), ws.onmessage (incoming data in event.data), ws.onclose (disconnected), ws.onerror (error). Send with ws.send(JSON.stringify({ type: 'chat', text: 'Hello' })). Server side uses ws (Node.js), Django Channels (Python), or Gorilla (Go). Most communication uses JSON with a type field.
Common Real-Time Patterns
Common patterns: Chat — clients send messages to server, which broadcasts to room. Presence — heartbeat pings track who’s online. Live updates — server pushes data changes to subscribers. Collaborative editing — operational transforms or CRDTs synchronize state. Notifications — targeted messages to specific users. Define clear message schemas: { type: 'event', data: {...}, timestamp: '...' }.
Error Handling and Reconnection
Build reconnection from the start. Exponential backoff: reconnect after 1s, then 2, 4, 8, max 30s. Use close event code/reason to decide whether to reconnect. Send periodic ping/pong to detect dead connections before TCP timeout. Queue messages during disconnection and replay after reconnection. For production, consider Socket.IO for automatic reconnection, room management, and long-polling fallback — but understand raw WebSocket API first.