Chapter 52: WebSockets in HTML5

WebSockets vs WebRTC DataChannels vs SSE

**Part 11: HTML5 APIs Part 2** — Chapter 52: WebSockets in HTML

LEARNING OBJECTIVES ⌵
  • Evaluate the architectural trade-offs between WebSockets, WebRTC DataChannels, and Server-Sent Events.
  • Select the optimal real-time communication protocol based on latency, network topology, and server architecture.
  • Understand transport overhead, TCP head-of-line blocking, and UDP peer-to-peer capabilities.
  • Master enterprise decision trees for production systems.
🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation
🌐
1. Input
Directives & Tags
⚙️
2. Parse
Tokenizer & AST
🌳
3. Layout
Box Model & Flow
🎨
4. Render
GPU Paint & Composite
PHASE 1: INPUT & DIRECTIVES
Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 Protocol Comparison Matrix

Feature Server-Sent Events (SSE) WebSockets (WS) WebRTC DataChannels
Directionality Unidirectional (Server $\rightarrow$ Client) Full-Duplex (Bidirectional) Full-Duplex (Bidirectional)
Transport Layer HTTP/1.1 or HTTP/2,3 (TCP / QUIC) Custom protocol over TCP UDP (SCTP over DTLS)
Topology Client $\leftrightarrow$ Server Client $\leftrightarrow$ Server Peer $\leftrightarrow$ Peer (with STUN/TURN)
Multiplexing Native with HTTP/2 Requires custom application framing Multiple channels per connection
Reconnection Automatic native reconnect Requires custom client backoff JS Requires signaling renegotiation
Binary Data Requires Base64 encoding Native (ArrayBuffer, Blob) Native (Fastest, zero TCP HOL blocking)
Firewall / Proxy Works on standard HTTP/S ports (443) Can be blocked by legacy proxies Requires STUN/TURN traversal
Best Use Case Live feeds, stock tickers, notifications Chat apps, multiplayer gaming, trading Real-time audio/video, cloud gaming

Architectural Decision Tree

Do you need Client-to-Server streaming messages?
   |
   +---> NO  ===> Use SERVER-SENT EVENTS (SSE) (Simpler, HTTP/2 native, auto-reconnect)
   |
   +---> YES ===> Is sub-millisecond UDP latency required (Gaming / Video)?
                   |
                   +---> YES ===> Use WebRTC DataChannels (Peer-to-peer, UDP)
                   |
                   +---> NO  ===> Use WebSockets (WSS) (Robust client-server bidirectional)

📌 Key Takeaways

  • Use SSE for read-only server streams (finance tickers, AI LLM token streaming, dashboard metrics).
  • Use WebSockets for interactive client-server applications (collaborative whiteboards, multiplayer games, chat).
  • Use WebRTC for peer-to-peer mesh networks, sub-millisecond latency, and live video/voice streaming.
  • --

❓ Knowledge Check

1. Which of the following is correct?

2. Which of the following is correct?

🏋️ Study Exercise

Task: Review the text example above. Identify the key directives and their purpose, then try writing your own version from memory.

Do you need Client-to-Server streaming messages? | +---> NO ===> Use SERVER-SENT EVENTS (SSE) (Simpler, HTTP/2 native, auto-reconnect) | +---> YES ===> Is sub-millisecond UDP latency required (Gaming / Video)? | +---> YES ===> Use WebRTC DataChannels (Peer-to-peer, UDP) | +---> NO ===> Use WebSockets (WSS) (Robust client-server bidirectional)