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.

Practice

1. What is the primary advantage of using WebSocket over traditional HTTP for real-time communication?

easy

A. It requires no server-side support to function.

B. It uses less bandwidth by compressing all messages automatically.

C. It keeps a persistent connection open for instant two-way data exchange.

D. It guarantees message delivery order without any additional setup.

Solution

1. Step 1: Understand WebSocket connection behavior

   WebSocket establishes a persistent connection between client and server, unlike HTTP which opens and closes connections per request.

2. Step 2: Identify the key benefit for real-time apps

   This persistent connection allows instant two-way communication, ideal for real-time updates.

3. Final Answer:

   It keeps a persistent connection open for instant two-way data exchange. -> Option C

4. Quick Check:

   Persistent connection = Instant two-way communication [OK]

Hint: WebSocket keeps connection open for fast two-way data [OK]

Common Mistakes:

• Confusing WebSocket with HTTP polling
• Assuming WebSocket compresses all messages automatically
• Thinking WebSocket works without server support

2. Which of the following is the correct syntax to open a WebSocket connection in JavaScript?

easy

A. const ws = new WebSocket('http://example.com/socket');

B. const ws = new WebSocket('ws://example.com/socket');

C. const ws = WebSocket.connect('ws://example.com/socket');

D. const ws = WebSocket.open('http://example.com/socket');

Solution

1. Step 1: Recall WebSocket URL scheme

   WebSocket URLs start with ws:// or wss:// for secure connections, not http://.

2. Step 2: Identify correct constructor usage

   The WebSocket object is created with new WebSocket(url), no .connect() or .open() methods exist.

3. Final Answer:

   const ws = new WebSocket('ws://example.com/socket'); -> Option B

4. Quick Check:

   WebSocket uses ws:// + new WebSocket() [OK]

Hint: WebSocket URLs start with ws:// or wss:// [OK]

Common Mistakes:

• Using http:// instead of ws://
• Calling non-existent connect() or open() methods
• Omitting the new keyword

3. Consider this simplified server-side pseudocode handling WebSocket messages:

onMessage(client, message) {
  broadcastToAllClients(message);
}

What will happen if 1000 clients send messages simultaneously?

medium

A. Server may become overwhelmed, causing message delays or dropped connections.

B. All messages will be broadcasted instantly to all clients without delay.

C. Only the first client's message will be broadcasted; others ignored.

D. Clients will automatically queue messages on their side until server is free.

Solution

1. Step 1: Analyze server load with simultaneous messages

   When many clients send messages at once, the server must process and broadcast each, increasing CPU and network load.

2. Step 2: Understand server resource limits

   Without scaling or message queuing, the server can get overwhelmed, causing delays or dropped connections.

3. Final Answer:

   Server may become overwhelmed, causing message delays or dropped connections. -> Option A

4. Quick Check:

   High load without scaling = delays/drops [OK]

Hint: High simultaneous messages can overload server without scaling [OK]

Common Mistakes:

• Assuming instant broadcast without delay
• Thinking clients queue messages automatically
• Believing only first message is processed

4. A developer wrote this WebSocket server snippet:

ws.on('message', (msg) => {
  ws.send(msg);
});

Why might this cause problems in a multi-client chat application?

medium

A. It closes the connection after sending the message.

B. It broadcasts the message to all clients, causing duplicates.

C. It causes syntax errors due to incorrect event name.

D. It only sends the message back to the sender, not to other clients.

Solution

1. Step 1: Understand the code behavior

   The code listens for a message from a client and sends the same message back only to that client (ws.send(msg)).

2. Step 2: Identify issue in multi-client context

   Other connected clients do not receive the message, so chat messages are not broadcasted properly.

3. Final Answer:

   It only sends the message back to the sender, not to other clients. -> Option D

4. Quick Check:

   ws.send(msg) sends only to sender [OK]

Hint: ws.send(msg) sends only to sender, not all clients [OK]

Common Mistakes:

• Assuming ws.send broadcasts to all clients
• Thinking event name 'message' is incorrect
• Believing connection closes after send

5. You are designing a scalable chat app using WebSocket. Which architectural component helps efficiently distribute messages to thousands of clients without overloading the main server?

hard

A. A message broker (e.g., Redis Pub/Sub) between WebSocket servers and clients.

B. A single powerful WebSocket server handling all connections directly.

C. Using HTTP long polling instead of WebSocket for all clients.

D. Storing all messages in a database before sending to clients.

Solution

1. Step 1: Understand scaling challenges with many clients

   A single server can become a bottleneck when handling thousands of WebSocket connections and broadcasting messages.

2. Step 2: Identify role of message broker

   A message broker like Redis Pub/Sub can distribute messages efficiently across multiple WebSocket servers, balancing load and improving scalability.

3. Final Answer:

   A message broker (e.g., Redis Pub/Sub) between WebSocket servers and clients. -> Option A

4. Quick Check:

   Message broker enables scalable message distribution [OK]

Hint: Use message broker to scale WebSocket message distribution [OK]

Common Mistakes:

• Relying on a single server for all connections
• Switching to HTTP long polling loses real-time benefits
• Storing messages in DB adds latency, not scaling