Why WebSocket for real-time communication in HLD? - Purpose & Use Cases

The Big Idea

What if your app could talk instantly without waiting or refreshing?

The Scenario

Imagine you want to chat with a friend online, but every time you send a message, you have to refresh the page to see if they replied. This back-and-forth refreshing feels slow and frustrating.

The Problem

Manually refreshing or repeatedly asking the server for updates wastes time and resources. It causes delays, uses more internet data, and makes conversations feel unnatural and laggy.

The Solution

WebSocket creates a direct, open line between your device and the server. This lets messages flow instantly both ways without waiting or refreshing, making real-time chat smooth and fast.

Before vs After

✗ Before

setInterval(() => fetch('/messages').then(showMessages), 5000);

✓ After

const socket = new WebSocket('wss://server'); socket.onmessage = e => showMessage(e.data);

What It Enables

It enables instant, two-way communication that feels as natural as talking face-to-face.

Real Life Example

Online games use WebSocket to instantly share player moves so everyone sees the action live without delays.

Key Takeaways

Manual polling is slow and wastes resources.

WebSocket keeps a live connection for instant updates.

This makes real-time apps like chat and games smooth and responsive.

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