Real-time connections

Nothing below is a runnable example — every option here needs a real server on the other end, so a live demo in this sandbox would either hang or fail for reasons that have nothing to do with the code being right or wrong. The one genuinely testable piece — reconnect backoff — gets its own runnable example further down.

WebSocket

A single, long-lived, two-way connection — either side can send a message at any time, with no request/response pairing required. It starts as a normal HTTP request that asks to upgrade the connection; once the server agrees, the same TCP connection stops speaking HTTP and starts speaking the WebSocket frame format instead.

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

socket.onopen = () => socket.send(JSON.stringify({ type: "join", room: "general" }));
socket.onmessage = (event) => {
  const msg = JSON.parse(event.data);
  console.log("received:", msg);
};
socket.onerror = (event) => console.error("socket error", event);
socket.onclose = (event) => console.log("closed:", event.code, event.reason);

socket.send(JSON.stringify({ type: "message", text: "hi" }));

Dry run: readyState through the socket's lifecycle

readyState only ever moves forward through these four numbers, never backward — once a socket reaches CLOSED there is no "reopen," only constructing a brand-new WebSocket.

Server-Sent Events (EventSource)

The one-directional version — server to client only, over a plain HTTP response the server keeps open and keeps writing to. The browser's built-in EventSource handles the entire protocol, including something WebSocket makes you build yourself: automatic reconnection.

const events = new EventSource("/api/notifications");

events.onmessage = (event) => console.log("update:", event.data);
events.addEventListener("user-joined", (event) => {   // named events, sent as "event: user-joined" in the stream
  console.log("joined:", JSON.parse(event.data));
});
events.onerror = () => console.log("connection lost — EventSource is already retrying on its own");

If the connection drops, EventSource automatically retries on its own — no manual reconnect logic needed at all, which is the entire trade EventSource makes for giving up the "client can send things too" half of WebSocket.

Long polling

async function poll(attempt = 0) {
  try {
    const response = await fetch("/api/updates?wait=30");   // server HOLDS this request open until there's something to say
    if (!response.ok) throw new Error("HTTP " + response.status);
    handleUpdate(await response.json());
    poll();   // success: ask again immediately — the "long" part is the server delaying its response, not the client waiting
  } catch {
    setTimeout(() => poll(attempt + 1), backoffDelay(attempt));   // failure: back off instead of hammering a server that's down
  }
}
poll();

backoffDelay is built at the end of this chapter — the same wait-longer-after-each-failure rule applies to every reconnect strategy here, long polling included.

Ordinary polling means asking every N seconds regardless of whether anything changed. Long polling flips who waits: the client asks, and the server simply doesn't answer until it has something to say (or a timeout passes) — one request, held open, instead of hundreds of empty ones. It predates both options above and is strictly worse than either when they're available — but it's plain HTTP, so it still works through the rare restrictive proxy or old environment that blocks a WebSocket upgrade or doesn't handle a held-open SSE stream well.

Deciding between the three

Reconnecting without hammering the server

Reconnecting instantly, every time, in a loop is exactly how a client turns a brief server hiccup into a self-inflicted denial of service against that same server the moment it comes back. The fix is the same shape as the retry pattern from a few chapters back: wait longer after each consecutive failure.

function backoffDelay(attempt, base = 500, max = 30000) {
  const exp = Math.min(base * 2 ** attempt, max);   // doubles each attempt, capped
  return Math.round(exp / 2 + Math.random() * (exp / 2));   // jitter: random within the top half of the range
}

for (let attempt = 0; attempt < 6; attempt++) {
  console.log("attempt", attempt, "->", backoffDelay(attempt), "ms");
}

Run it — the delay roughly doubles each attempt, then flattens out at the cap. The randomness (jitter) matters as much as the growth: without it, every client that dropped at the same moment (a server restart takes the whole fleet down at once) reconnects at exactly the same moment too, arriving as a synchronized thundering herd instead of a spread-out trickle.

let attempt = 0;
function connect() {
  const socket = new WebSocket(url);
  socket.onopen = () => { attempt = 0; };   // reset the counter once a connection actually succeeds
  socket.onclose = () => {
    setTimeout(connect, backoffDelay(attempt));
    attempt++;
  };
}
connect();