System Design: Client-side Realtime Updates Deep Dive

Introduction

Recently, I have been learning from the folks over at HelloInterview.com. In one of their articles, they do an awesome deep dive into different strategies for handling realtime updates in systems. It got me really interested in the subject, and I wanted to try out these realtime update strategies myself for learning.

In their article, they discuss two sides of updates: (1) client-side, (2) server-side. To limit the length of this article, I'll explore only client-side updates.

According to HelloInterview.com's article, there are several typical client-side update strategies: 1/ polling, 2/ long polling, 3/ server-sent events (SSE), 4/ WebSocket.

Client-side Update Strategy #1: Polling

Polling is the simple strategy of calling the API every X seconds. For example, if our API's endpoint was https://jsonplaceholder.typicode.com/todos/1, we would call this API every X seconds.

// client.js

const pollAPI = () => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
        .then(response => response.json())
        .then(json => console.log(json))
}
        
setInterval(pollAPI, 5000)

In fact, we can run the above code in our browser's console right now.

Naturally, this approach has an update delay of up to X seconds. Additionally, the expected requests per second on the server is N clients / X.

Client-side Update Strategy #2: Long Polling

Long polling is a clever technique to reduce the update delay while still using a similar methodology as Polling. The client makes a long-running HTTP request to the server, and the server responds only once it has a new update. When the client receives the response, it handles it and sends a new HTTP request.

For long polling, the server handles most of the work. Below is a simple example (using Express on Node.js) of how the code would look like on the server side.

// server.js

const express = require('express')
const bodyParser = require('body-parser')

const app = express()
app.use(bodyParser.json())

// Client list
let waitingClients = []

/** Long polling endpoint */
app.get('/poll', (req, res) => {
  // Add the response to the list of waiting clients
  waitingClients.push(res)

  // If no response is received in `timeToWaitMilliseconds` ms, terminate the request.
  const timeToWaitMilliseconds = 30000
  setTimeout(() => {
    if (!res.headersSent) {
      res.json({ timeout: true })
      waitingClients = waitingClients.filter((client) => client !== res)
    }
  }, timeToWaitMilliseconds)
})

/** Update endpoint */
app.post('/update', (req, res) => {
  const updateData = req.body

  // Send update to all clients, reset the client list.
  waitingClients.forEach((client) => client.json(updateData))
  waitingClients = []

  res.json({ status: 'Update sent to all waiting clients.' })
})

app.listen(80, () => {
  console.log('Server listening at http://localhost:80')
})

On the client-side, the code will look like this.

// client.js

const longPollAPI = async () => {
    // Without error handling.
    while (true) {
        const response = await fetch('http://localhost:80/poll');
        await handleResponse(response)
    }
}

longPollAPI()

Long polling minimizes update delay to HTTP overhead and the time taken to make a new HTTP request. Still, there is a bit of delay, and communication is unidirectional (server to client).

Client-side Update Strategy #3: Server-Sent Events (SSE)

<Work in progress>

Client-side Update Strategy #4: WebSocket

<Work in progress>