WebSocket Foundations
What WebSockets are, the upgrade handshake, frames, and how they differ from HTTP. Start →
WebSocket Design — From Zero to Hero
A standalone, beginner→advanced course on designing real-time systems with WebSockets, taught with TypeScript. From the handshake to message design, heartbeats & reconnection, server design, scaling, and security — with the real WebSocket API running in the browser.
What you’ll learn
Section titled “What you’ll learn”The Client API
new WebSocket, events & readyState, sending/receiving, binary data. Connect →
Message Design
Framing, JSON vs binary, request/response with correlation ids, versioning. Design →
Connection Lifecycle
Heartbeats, detecting dead connections, reconnection with backoff, close codes. Keep alive →
Server Design
The ws library, connection state, rooms & broadcast, backpressure. Serve →
Scaling & Pub/Sub
Why one process won’t scale, a pub/sub backplane, presence, sticky vs stateless. Scale →
Security
Origin & handshake auth, authorization, rate limiting, TLS & DoS. Secure →
Patterns & Alternatives
Pub/sub & rooms, RPC over WS, WS vs SSE vs WebTransport, a working app. Apply →
How this course works
Section titled “How this course works”WebSockets run in your browser
Client demos use a faithful in-page echo socket with the real WebSocket API — open, send, receive, close — and full Node ws servers open in StackBlitz.
Diagrams that explain
The upgrade handshake, the connection state machine, reconnection, and pub/sub fan-out as theme-aware Mermaid diagrams.
Design, not just syntax
Every topic covers the why and the trade-offs — heartbeats, message protocols, scaling a stateful connection, and securing a long-lived socket.
Bilingual + read mode
English and ไทย, quizzes with saved progress, and a distraction-free read mode.