WebSocket Real-Time Communication Patterns

Quick Guide: The native WebSocket API gives you a full-duplex channel and nothing else — reconnection, liveness detection, delivery during a drop and message typing are all yours to build, and this skill is the shape each of them takes. The facts that change the answer: the API accepts no custom headers, so authentication is a first message rather than a header; onerror is always followed by onclose, so recovery belongs in one place; an open connection blocks the browser's back/forward cache; and readyState changes are not synchronous with the calls that cause them.

Detailed Resources:

• examples/core.md — lifecycle, backoff with jitter, heartbeat, queuing, typed messages, binary protocol, auth, rooms, useWebSocket, shared connection, bfcache
• examples/state-machine.md — connection state as a reducer, where booleans stop being enough
• examples/binary.md — chunked file upload with progress
• examples/presence.md — presence and away detection
• reference.md — close-code table with reconnect guidance, readyState values, anti-patterns with code, deployment checklist

Which path applies

• One component owns the connection — a hook creates the socket, holds the backoff and heartbeat timers, and closes it on unmount. Start at examples/core.md.
• Several components share one connection — a provider owns the socket and routes by message type through a subscribe(type, handler) API that returns its own unsubscribe. Opening a socket per component multiplies handshakes and heartbeats against the same server. Also examples/core.md.