Real-Time Communication Strategies

[!TIP] Interview Tip: Don’t blindly choose WebSockets. They are stateful and harder to scale (Load Balancers need sticky sessions or Redis Pub/Sub). For a simple “News Feed”, Polling or SSE might be better.

The web was originally built for “Request-Response” (Pull). But modern apps (Uber, WhatsApp, Robinhood) need “Push”. How does the server tell the client that something changed?

1. Short Polling (The “Are we there yet?” approach)

The client repeats the request at a fixed interval (e.g., every 5 seconds).

  • Flow:
    1. Client: “Any new messages?”
    2. Server: “No.”
    3. (Wait 5s)
    4. Client: “Any new messages?”
    5. Server: “Yes, here is one.”
  • Pros: Simple. Stateless. Works everywhere.
  • Cons: High Latency (up to interval time). Wasted Resources (empty responses). Battery Drain (radio wakes up constantly).

2. Long Polling (Hanging GET)

The client sends a request, and the server holds it open until data is available or a timeout occurs. This technique is often called Long Polling.

Long Polling Flow

Unlike Short Polling, the connection stays open.

Client
Request →
← Response
Server
... Holding Connection (Waiting for Event) ...
  • Pros: Lower latency than short polling.
  • Cons: Connection Overhead (Header parsing for every event). Still not true bi-directional.

Interactive Visualizer: Bandwidth Overhead

Compare the data transmitted for 100 messages.

  • Polling: Sends HTTP Headers (Cookie, User-Agent) ~800 bytes every single time.
  • WebSocket: Sends Headers once (Handshake), then tiny frames (2 bytes overhead).
Polling
0 KB
WebSocket
0 KB

3. WebSockets (Full Duplex)

A persistent, bi-directional communication channel over a single TCP connection. Starts as HTTP, then “Upgrades” to WebSocket protocol (ws:// or wss://).

  • Pros: Lowest Latency. Full Duplex (Client and Server can talk anytime). Low overhead (no headers after handshake).
  • Cons: Stateful (Server must remember connection). Harder to scale (requires Redis Pub/Sub to broadcast across servers). Firewalls sometimes block non-80 ports.

Interactive Visualizer: Protocol Racer (Chat App Simulation)

See the difference in user experience and device efficiency. Scenario: You are receiving chat messages.

  • Polling: Observe the “Lag” and the constant packet requests (battery drain).
  • WebSockets: Instant delivery with minimal traffic.
C
Client
S
Server
Device Battery Health
100%
Chat Room Disconnected
Select a protocol to connect...

4. Server-Sent Events (SSE)

Standard HTTP connection where the server pushes updates to the client.

  • Pros: Simple (Standard HTTP). Built-in reconnection logic. Good for “One-way” feeds (Stock Ticker, News).
  • Cons: Unidirectional (Server → Client only). Limit on open connections per browser (HTTP/1.1 limit is 6, HTTP/2 fixes this). This is SSE.

5. Modern Protocols: HTTP/3 & WebTransport

The future of real-time is moving beyond TCP.

5.1 The Problem with TCP: Head-of-Line Blocking

TCP treats data as a single ordered stream. If packet #50 is lost, packets #51-100 must wait until #50 is retransmitted, even if they are already arrived. This causes Jitter in real-time apps.

TCP Stream: [Packet 49] [LOST #50] [Packet 51 (BLOCKED)] [Packet 52 (BLOCKED)]
UDP/QUIC: [Packet 49] [LOST #50] [Packet 51 (Processed)] [Packet 52 (Processed)]

5.2 HTTP/3 (QUIC)

Built on top of UDP instead of TCP.

  • Solves Head-of-Line Blocking: In HTTP/3, streams are independent. If Stream A loses a packet, Stream B keeps flowing.

5.3 WebTransport

A new API (successor to WebSockets) built on HTTP/3.

  • Features: Supports both reliable (streams) and unreliable (datagrams) transmission.
  • Use Case: Great for Gaming (where you care about latest state, not all states) and Live Streaming.

Code Example: WebTransport in Action

// Connect
const transport = new WebTransport('https://game.example.com');
await transport.ready;

// Send Unreliable Datagram (Fast, low latency)
const writer = transport.datagrams.writable.getWriter();
const data = new Uint8Array([10, 20, 30]); // Player coordinates
writer.write(data);

// Receive Reliable Stream (Chat messages)
const reader = transport.incomingUnidirectionalStreams.getReader();
const stream = await reader.read();
// ... process stream ...

6. Deep Dive: Connection Draining

What happens when you deploy new code to your WebSocket server?

  • Stateless (REST): Easy. Wait for the current request to finish (50ms), then kill the server.
  • Stateful (WebSocket): Hard. Users might be connected for hours.

The Strategy: Connection Draining

  1. Mark as Draining: Tell the Load Balancer “Don’t send new users here”.
  2. Wait: Allow existing connections to close naturally (or set a timeout, e.g., 1 hour).
  3. Force Close: If they are still there after the timeout, send a GOAWAY frame (or equivalent) telling the client to reconnect elsewhere.
  4. Terminate: Now it’s safe to restart the server.

[!WARNING] If you don’t drain properly, you will cause a Thundering Herd. 10,000 users disconnect at once and immediately try to reconnect to the remaining servers, DDOSing your own infrastructure.

7. Case Study: Hybrid Approach at WhatsApp

WhatsApp needs to handle billions of messages with extremely low latency. Do they use WebSockets for everything? No.

They use a Hybrid Approach:

  1. Signaling (Push): When you receive a message, WhatsApp server sends a tiny notification via a persistent connection (custom protocol based on XMPP or similar).
    • Payload: “New Message ID: 123” (Very small).
  2. Fetching (Pull): The app wakes up and initiates a secure HTTP/2 or HTTP/3 request to fetch the actual message content (Text, Image, Video).

Why?

  • Connection Stability: Maintaining a full data pipe for billions of idle users is expensive.
  • Media Handling: Downloading a 5MB video over a WebSocket is less efficient than a standard HTTP GET with Range requests (Resumable downloads).

8. Summary

  • Short Polling: Good for prototypes. Avoid in production.
  • Long Polling: Good fallback when WebSockets are blocked.
  • SSE: Best for Feeds (Twitter timeline, Sports scores).
  • WebSockets: Best for Chat and Gaming.
  • WebTransport: The future for low-latency, unreliable streams (Live Video).

Next, we look at the component that sits in front of all these services: the API Gateway Pattern.