Real-time features in HLD - System Design Guide

Problem Statement

When users expect instant updates, delays in data delivery cause frustration and reduce engagement. Systems that rely on periodic polling waste resources and cannot guarantee timely information, leading to stale or inconsistent views.

Solution

Real-time features push updates immediately from the server to clients using persistent connections like WebSockets or server-sent events. This mechanism allows the server to notify clients instantly when new data or events occur, ensuring users see fresh information without manual refresh or delay.

Architecture

Client 1

(Browser)

↓

Client 2

(Mobile)

→(WebSocket)

This diagram shows clients maintaining persistent connections to a real-time server, which pushes updates immediately from the data source to clients.

Trade-offs

✓ Pros

→

Delivers updates instantly, improving user experience and engagement.

→

Reduces unnecessary client polling, saving bandwidth and server resources.

→

Supports interactive features like live chat, notifications, and collaborative editing.

✗ Cons

→

Requires maintaining persistent connections, increasing server resource usage.

→

More complex infrastructure and error handling compared to simple request-response.

→

Scaling real-time connections can be challenging and may require specialized infrastructure.

Use when user experience depends on immediate data updates, such as chat apps, live dashboards, or collaborative tools, especially when user count exceeds thousands with frequent updates.

Avoid for simple applications with infrequent updates or low user concurrency under 1000 users, where polling or periodic refresh is sufficient and simpler.

Real World Examples

Slack

Uses WebSocket connections to deliver instant messages and presence updates to users, enabling real-time collaboration.

Uber

Pushes live location updates of drivers to riders in real-time using persistent connections to provide accurate ETAs.

Twitter

Streams live tweets and notifications to users instantly using real-time push technologies.

Alternatives

Polling

Clients repeatedly request updates at fixed intervals instead of receiving push notifications.

Use when: Choose when updates are infrequent and real-time latency is not critical, or infrastructure cannot support persistent connections.

Long Polling

Clients send a request that the server holds open until new data is available, then responds and the client immediately re-requests.

Use when: Choose when WebSocket support is limited but near real-time updates are needed.

Server-Sent Events (SSE)

Server pushes updates over a single unidirectional HTTP connection to clients.

Use when: Choose when updates flow only from server to client and simpler implementation than WebSockets is preferred.

Summary

Real-time features deliver data instantly to users by pushing updates over persistent connections.

They improve user experience for interactive applications like chat, live dashboards, and notifications.

Choosing the right real-time technology depends on update frequency, client support, and system scale.

Practice

1. Which protocol is commonly used to enable real-time communication in web applications?

easy

A. SMTP

B. HTTP/1.1

C. WebSocket

D. FTP

Solution

1. Step 1: Understand real-time communication needs

   Real-time apps require a protocol that supports two-way, instant data exchange.

2. Step 2: Identify protocol features

   WebSocket allows full-duplex communication over a single connection, unlike HTTP/1.1 which is request-response only.

3. Final Answer:

   WebSocket -> Option C

4. Quick Check:

   Real-time = WebSocket [OK]

Hint: Real-time needs two-way instant data flow: WebSocket fits best [OK]

Common Mistakes:

• Confusing HTTP with WebSocket for real-time
• Choosing FTP or SMTP which are not real-time protocols
• Thinking HTTP/2 is the same as WebSocket

2. Which component in a real-time system is responsible for distributing messages from producers to consumers?

easy

A. Broker

B. Producer

C. Consumer

D. Database

Solution

1. Step 1: Define roles in real-time messaging

   Producers send data, consumers receive data, and brokers route messages between them.

2. Step 2: Identify the distributor

   The broker acts as the middleman ensuring messages reach the right consumers.

3. Final Answer:

   Broker -> Option A

4. Quick Check:

   Message routing = Broker [OK]

Hint: Broker connects producers and consumers by routing messages [OK]

Common Mistakes:

• Confusing producer as distributor
• Thinking consumer sends messages
• Assuming database handles message routing

3. Consider a chat app using WebSocket. If the server receives a message from User A and broadcasts it to 100 connected users, what is the main bottleneck to scale this real-time feature?

medium

A. User A's device speed

B. Client browser rendering speed

C. Database read latency

D. Server CPU and network bandwidth

Solution

1. Step 1: Analyze message flow in real-time chat

   The server receives and then sends the message to all connected users, requiring CPU and network resources.

2. Step 2: Identify bottleneck

   Server CPU handles message processing; network bandwidth handles sending to many users simultaneously.

3. Final Answer:

   Server CPU and network bandwidth -> Option D

4. Quick Check:

   Scaling real-time = Server resources [OK]

Hint: Server resources limit broadcast scale, not client or DB speed [OK]

Common Mistakes:

• Blaming client device speed for server load
• Focusing on database latency which is less critical here
• Ignoring network bandwidth limits

4. A real-time notification system uses MQTT but users report delayed messages. Which is the most likely cause?

medium

A. Clients are using WebSocket instead of MQTT

B. Broker is overloaded and dropping messages

C. Messages are too small to send quickly

D. Users have disabled notifications on their devices

Solution

1. Step 1: Understand MQTT broker role

   The broker routes messages; if overloaded, it queues or drops messages causing delays.

2. Step 2: Evaluate other options

   Clients using WebSocket instead of MQTT would cause connection issues, not delays; small messages send faster; disabled notifications affect display, not delivery.

3. Final Answer:

   Broker is overloaded and dropping messages -> Option B

4. Quick Check:

   Delays usually mean broker overload [OK]

Hint: Delays often mean broker overload, not client protocol mismatch [OK]

Common Mistakes:

• Blaming client protocol mismatch for delays
• Assuming small messages cause delays
• Ignoring broker capacity limits

5. You are designing a real-time stock price update system for millions of users. Which approach best ensures scalability and low latency?

hard

A. Use a distributed message broker cluster with topic partitions and WebSocket connections

B. Store all prices in a single database and poll clients every second

C. Send updates via email to all users when prices change

D. Use HTTP long polling from clients to server for updates

Solution

1. Step 1: Understand scalability needs

   Millions of users require distributed systems to handle load and maintain low latency.

2. Step 2: Evaluate options

   Distributed brokers with topic partitions allow parallel processing; WebSocket supports instant push updates. Polling and email cause delays and high load.

3. Final Answer:

   Use a distributed message broker cluster with topic partitions and WebSocket connections -> Option A

4. Quick Check:

   Scalable real-time = Distributed broker + WebSocket [OK]

Hint: Distributed brokers + WebSocket scale best for millions [OK]

Common Mistakes:

• Choosing polling which wastes resources and adds latency
• Using email which is not real-time
• Relying on a single database causing bottlenecks