WebSocket for real-time communication in HLD - System Design Guide

Problem Statement

Traditional HTTP connections require clients to repeatedly ask the server for updates, causing delays and unnecessary network overhead. This polling approach leads to slow response times and inefficient use of resources when real-time data delivery is needed.

Solution

WebSocket creates a persistent, full-duplex connection between client and server, allowing both to send messages instantly without repeated handshakes. This continuous channel enables real-time data flow with minimal latency and reduced network overhead.

Architecture

┌─────────────┐          ┌─────────────┐
│   Client    │──────────▶│   Server    │
│ (Browser)   │◀──────────│             │
└─────────────┘          └─────────────┘
       ▲                        ▲
       │                        │
       │      Persistent        │
       │      WebSocket         │
       │      Connection        │
       └────────────────────────┘

This diagram shows a client and server maintaining a persistent WebSocket connection that allows bidirectional real-time communication.

Trade-offs

✓ Pros

→

Enables low-latency, real-time data exchange between client and server.

→

Reduces network overhead by avoiding repeated HTTP requests.

→

Supports bidirectional communication, allowing server-initiated messages.

→

Improves user experience in applications like chat, live updates, and gaming.

✗ Cons

→

Requires maintaining open connections, which can increase server resource usage.

→

More complex to implement and scale compared to stateless HTTP.

→

May face compatibility issues with some proxies or firewalls blocking WebSocket traffic.

Use when your application demands real-time updates with low latency, such as chat apps, live sports scores, or collaborative tools, especially when user count is moderate to high and instant communication is critical.

Avoid if your application only needs occasional updates or can tolerate delays, or if your infrastructure cannot support many persistent connections due to resource constraints.

Real World Examples

Slack

Uses WebSocket to deliver instant message updates and presence information to users without delay.

Uber

Employs WebSocket to provide real-time driver location updates and trip status to riders.

Discord

Uses WebSocket for real-time voice, video, and text communication among users.

Alternatives

HTTP Long Polling

Client sends a request and the server holds it open until new data is available, then responds; client immediately sends a new request.

Use when: Choose when WebSocket support is limited or infrastructure cannot handle many persistent connections.

Server-Sent Events (SSE)

Server can push updates to client over a single HTTP connection, but communication is unidirectional (server to client).

Use when: Choose when only server-to-client updates are needed and simplicity is preferred.

Summary

WebSocket prevents delays and inefficiencies caused by repeated HTTP polling by establishing a persistent connection.

It enables real-time, bidirectional communication between client and server with low latency.

WebSocket is best suited for applications requiring instant updates but requires careful resource management and infrastructure support.