Web Fundamentals

Real-time Communication: WebSockets, SSE & Polling

Web Fundamentals Map

Rendering & Browser Architecture

Critical Rendering PathScript Loading Patterns (async/defer)Event Loop Deep DiveJavaScript Module Systems (CJS, ESM, UMD)Dynamic Module Loading (import())Import on InteractionImport on VisibilityBrowser Rendering Pipeline & Layout ThrashingRendering Strategies (CSR, SSR, SSG, ISR)Streaming SSR & Progressive HTMLIslands ArchitectureReact Server ComponentsFramework Reactivity (React, Vue, Svelte, Solid)HTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC)DNS Resolution & TTL Caching

Performance

Core Web Vitals: LCP, INP, CLSPerformance Optimization Trade-offsCritical Resource PrioritizationCode Splitting & Dynamic ImportsTree Shaking & Dead Code EliminationLazy LoadingResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip & BrotliImage & Video OptimizationAdaptive LoadingList VirtualizationWeb Workers vs Main ThreadMemory Leaks: Detection & PreventionManaging Third-Party ScriptsHow CDNs WorkHTTP Caching Deep DiveService Workers & Offline StrategyPWA Fundamentals

Security

Cross-Site Scripting (XSS)Cross-Site Request Forgery (CSRF)CORS ExplainedCORS Preflight, Credentials & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? (TLS/SSL)Authorization Best PracticesCookie Security & Session Hardening

State & Data Architecture

State Management Guide (Context vs Zustand vs Redux)React Query & Server State CachingData Fetching PatternsCaching StrategiesPagination: Offset vs Cursor-BasedReal-time Communication (WebSocket, SSE, Polling)
mediumWeb Fundamentals

Real-time Communication: WebSockets, SSE & Polling

Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.

Topic content

TL;DRWebSockets for bidirectional low-latency. SSE for simple server-to-client push. Polling as fallback. Always plan for reconnection, ordering, and scaling.
High Signal
Google
Meta
Netflix
Agoda
30-Second Answerstart every interview with this

Real-time features require choosing the right transport based on directionality, latency needs, scaling complexity, and operational cost. WebSockets offer full bidirectional communication but are stateful and harder to scale. Server-Sent Events provide simple unidirectional push with built-in reconnection. Polling is easiest but least efficient.

WebSockets = a phone call (both can talk anytime). SSE = a radio broadcast (server talks, you listen). Polling = repeatedly calling to ask 'anything new?' The best choice depends on how often each side needs to speak and how reliably the connection must stay open.

Choose Transport
Bidirectional? → WebSockets
Server Push Only? → SSE
Simple & Reliable? → Polling (fallback)

1WebSockets

Persistent, bidirectional, full-duplex connection. Excellent for chat, collaborative editing, and multiplayer games. Requires careful connection management, reconnection logic, and horizontal scaling (often with Redis Pub/Sub).

useWebSocket.tsts
useEffect(() => {
  const ws = new WebSocket(WS_URL);
  ws.onmessage = (e) => handleMessage(JSON.parse(e.data));
  return () => ws.close();
}, []);

2Server-Sent Events (SSE)

Unidirectional server-to-client streaming over HTTP. Simpler than WebSockets with built-in reconnection and event IDs. Ideal for notifications, live feeds, and progress updates.

3Polling Strategies

Short polling (fixed interval) is simple but wasteful. Long polling holds the connection open until data arrives. Use only when real-time requirements are relaxed.

4Scaling, Reconnection & Consistency

Plan for reconnection with exponential backoff + jitter. Use message ordering, idempotency, and client-side reconciliation to handle missed or out-of-order events.

Key Takeaways
  • ✓WebSockets for bidirectional real-time
  • ✓SSE for simple, reliable server push
  • ✓Polling as fallback or for low-frequency updates
  • ✓Always implement reconnection with backoff + jitter
  • ✓Ensure event ordering and idempotency on client
  • ✓Plan for horizontal scaling from day one
  • ✓Choose transport based on direction, latency, and complexity
PreviousNext

Topic Guide

On this page