Real-Time Communication Concepts
Traditional web communication follows a simple pattern: the client asks, the server answers. But what about chat messages, live notifications, or collaborative editing? These need the server to push updates to clients without waiting for requests. Several approaches solve this problem, each with different trade-offs.
Polling: The Simple Approach
With polling, the client repeatedly asks "anything new?" at regular intervals:
setInterval(async () => {
const updates = await fetch('/api/updates');
// Process any new data
}, 5000); // Every 5 seconds
Polling is simple to implement and works everywhere. However, it wastes resources — most requests return nothing new. It also introduces latency — updates arrive only when the next poll happens. Use polling for low-frequency updates where simplicity matters more than immediacy.
Long Polling: A Better Compromise
Long polling improves on regular polling. The client makes a request, but the server holds it open until there's something to send:
Client: "Any updates?"
Server: [waits...]
Server: [waits...]
Server: "Yes! Here's an update" (after 30 seconds)
Client: [immediately asks again] "Any updates?"
This reduces wasted requests and delivers updates faster. The downside is connection overhead — each response requires establishing a new connection. Long polling works well for moderate update frequencies.
Server-Sent Events: One-Way Push
SSE provides a standardized way for servers to push data to clients over a single, long-lived HTTP connection:
const events = new EventSource('/api/stream');
events.onmessage = (event) => {
console.log('Received:', event.data);
};
SSE handles reconnection automatically and works through most proxies and firewalls. The limitation is that it's one-directional — the server pushes to the client, but the client can't send data back over the same connection. SSE excels for notifications, live feeds, and dashboards.
WebSockets: Full Duplex
WebSockets establish a persistent, bidirectional connection. Both client and server can send messages at any time:
const ws = new WebSocket('wss://example.com/socket');
ws.onmessage = (event) => console.log(event.data);
ws.send('Hello server!');
WebSockets provide the lowest latency and most flexibility. They're also the most complex — you handle connection management, reconnection logic, and message framing yourself. Use WebSockets for chat, multiplayer games, and collaborative applications.
Choosing the Right Approach
Match the approach to your needs. Polling suits simple, infrequent updates. Long polling works for moderate real-time needs without WebSocket complexity. SSE fits server-to-client streaming. WebSockets handle bidirectional, low-latency communication.