WebSockets in the UI

• Before the 101: cookies, headers, CSP, proxies, logs, rate limits — the whole HTTP toolkit.
• After the 101: your schema, your correlation ids, your heartbeat, your version field. Nothing in the path understands any of it.
• The Origin header on the handshake is the only thing standing between your socket and a page you have never heard of (Cross-Site Request Forgery).

1async function connect(): Promise<WebSocket> {
2  // Ordinary HTTP: cookies, CSRF token, rate limits, logging all apply here.
3  const res = await fetch('/api/realtime/ticket', { method: 'POST' })
4  if (res.status === 401) { goToLogin(); throw new Error('unauthenticated') }
5  const { ticket } = await res.json()   // single use, short lifetime
6 
7  // No header argument exists. The ticket travels in the URL, so it must be
8  // worthless once used and worthless soon regardless.
9  const ws = new WebSocket(`${WS_ORIGIN}/stream?ticket=${encodeURIComponent(ticket)}`)
10 
11  ws.addEventListener('open', () => {
12    // Reconnect is not resume: the server has no memory of what we watched.
13    ws.send(JSON.stringify({ v: 2, type: 'subscribe', topics: currentTopics(), since: lastEventId }))
14  })
15 
16  ws.addEventListener('close', (e) => {
17    // 1008 / 4401-style application codes mean "do not retry, re-authenticate".
18    if (e.code === 1008 || e.code === 4401) { goToLogin(); return }
19    scheduleReconnect()   // everything else is a network problem: back off, with jitter
20  })
21 
22  return ws
23}

Three things carry the lesson: the ticket is fetched per attempt rather than reused, subscribe is re-sent on every open because the server remembers nothing, and the close code decides between "retry" and "send the user to sign in" — conflating those two produces either an infinite retry loop against a 401 or a login redirect every time a train enters a tunnel.