Reconnect and Backoff

• Server down / restarting — Every connected client sees close within the same instant. The correlation is created here, not by the retry policy.
• Fixed delay: all four retry — Wave one. Rejected together, because the server is still starting.
• Fixed delay: all four retry again — Wave two, identical shape. A fixed delay preserves the convoy instead of dissolving it.
• Fixed delay: all four retry again — The server comes up into a wall. Every recovery attempt is also the next outage.
• Jittered: client A retries — Same ceiling, random point below it.
• Jittered: client C retries — Succeeds — the server had capacity because A and B did not arrive at this instant.
• Jittered: client D retries — Recovery is spread across the window instead of stacked in one column.

Both halves use exactly the same backoff ceiling. The only difference is whether each client picks a random point below it, and that difference is the difference between a recovery and a second outage.

const delay = Math.min(CEILING, BASE * 2 ** attempt)

const delay = Math.random() * Math.min(CEILING, BASE * 2 ** attempt)

The first bounds the rate of one client and leaves the population perfectly correlated, so ten thousand clients arrive as one enormous client at every doubling. The second bounds the rate identically and spreads arrivals uniformly under the ceiling, which is the property that lets a restarting service actually finish restarting.

1const BASE = 500          // shortest delay, in ms — a protocol knob, not a performance claim
2const CEILING = 30_000    // longest delay; an abandoned tab must not wait an hour
3let attempt = 0
4let timer: number | undefined
5let openedAt = 0
6 
7function scheduleReconnect() {
8  if (timer !== undefined) return              // one loop, never two
9  const ceiling = Math.min(CEILING, BASE * 2 ** attempt)
10  const delay = Math.random() * ceiling        // FULL jitter: anywhere in [0, ceiling)
11  attempt++
12  timer = window.setTimeout(() => { timer = undefined; connect() }, delay)
13}
14 
15function onOpen() {
16  openedAt = Date.now()
17  setStatus('live')
18  // NOTE: attempt is deliberately NOT reset here.
19}
20 
21function onClose(code: number) {
22  setStatus('reconnecting')
23  if (code === 1008 || code === 4401) { setStatus('signed-out'); return }   // never retryable
24  // Reset only if the connection was stably up. Otherwise a flapping socket
25  // resets the counter on every cycle and backoff degenerates into a tight loop.
26  if (Date.now() - openedAt > 10_000) attempt = 0
27  scheduleReconnect()
28}
29 
30// Short-circuit the wait when the world changes underneath the timer.
31window.addEventListener('online', () => { clearTimeout(timer); timer = undefined; connect() })
32document.addEventListener('visibilitychange', () => {
33  if (document.visibilityState === 'visible' && !isOpen()) { clearTimeout(timer); timer = undefined; connect() }
34})

The delays here are protocol parameters chosen by you, not measurements of anything — pick them from your own reconnect data. The load-bearing lines are the Math.random() multiplication, the stability check before resetting attempt, and the early return for close codes that will never succeed on retry.