WebSockets & Real-Time

The Problem with HTTP for Real-Time

HTTP is request-response: the client asks, the server answers. But what if the server needs to push data to the client — a new chat message, a stock price update, a collaborative edit?

Polling (asking repeatedly) wastes bandwidth. Long polling (holding requests open) is hacky. WebSockets solve this with a persistent, bidirectional connection.

How WebSockets Work

A WebSocket starts as an HTTP request, then upgrades to a persistent TCP connection:

// 1. Client sends HTTP upgrade request
// GET /chat HTTP/1.1
// Host: server.example.com
// Upgrade: websocket
// Connection: Upgrade
// Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
// Sec-WebSocket-Version: 13

// 2. Server responds with 101 Switching Protocols
// HTTP/1.1 101 Switching Protocols
// Upgrade: websocket
// Connection: Upgrade
// Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

// 3. Now both sides can send messages freely — no more HTTP

WebSocket Server (Node.js)

import { WebSocketServer } from "ws";

const wss = new WebSocketServer({ port: 8080 });
const clients = new Set<WebSocket>();

wss.on("connection", (ws) => {
  clients.add(ws);
  console.log(`Client connected (${clients.size} total)`);

  ws.on("message", (data) => {
    const message = JSON.parse(data.toString());

    // Broadcast to all other clients
    for (const client of clients) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(JSON.stringify(message));
      }
    }
  });

  ws.on("close", () => {
    clients.delete(ws);
  });
});

WebSocket Client (Browser)

const ws = new WebSocket("wss://server.example.com/chat");

ws.onopen = () => {
  ws.send(JSON.stringify({ type: "join", room: "general" }));
};

ws.onmessage = (event) => {
  const message = JSON.parse(event.data);
  renderMessage(message);
};

ws.onclose = (event) => {
  console.log(`Disconnected: ${event.code} ${event.reason}`);
  // Reconnect with exponential backoff
  setTimeout(connect, Math.min(1000 * 2 ** retries, 30000));
};

Server-Sent Events (SSE)

If you only need server → client push (no bidirectional), SSE is simpler:

// Server (Node.js / Express)
app.get("/events", (req, res) => {
  res.setHeader("Content-Type", "text/event-stream");
  res.setHeader("Cache-Control", "no-cache");
  res.setHeader("Connection", "keep-alive");

  const send = (data: unknown) => {
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  };

  // Send updates
  const interval = setInterval(() => {
    send({ price: Math.random() * 100, timestamp: Date.now() });
  }, 1000);

  req.on("close", () => clearInterval(interval));
});

// Client (Browser) — built-in API, auto-reconnects!
const events = new EventSource("/events");
events.onmessage = (e) => {
  const data = JSON.parse(e.data);
  updatePrice(data.price);
};

Comparison

	Polling	Long Polling	SSE	WebSocket
Direction	Client→Server	Client→Server	Server→Client	Bidirectional
Latency	High (interval)	Medium	Low	Low
Overhead	High	Medium	Low	Low
Complexity	Simple	Medium	Simple	Complex
Auto-reconnect	Manual	Manual	Built-in	Manual
HTTP/2 compatible	Yes	Yes	Yes	No (uses TCP)

Key Takeaways

1. WebSockets provide bidirectional, persistent connections — ideal for chat, gaming, collaboration
2. SSE is simpler for server-to-client push — auto-reconnects and works with HTTP/2
3. Always implement reconnection with backoff — connections will drop
4. Don’t default to WebSockets — most “real-time” features only need server→client (SSE)