EK Eric Khanh
Hire Me
· Last updated on

Method of Real-Time Communication

softwarereal-time

TL;DR

Problem

You’re understand the HTTP request and wanna building a realtime feature like chat, notification, live,… but the HTTP request restrict you to do that. The real-time communication can help to solve these problem.

But there’re a lots of method to implement

Should I use Websocket, SSE or Polling to my business?

Choosing a wrong mechanism lead to:

Intuition

Thinking communication are:

Solution Overview

There’re 3 common approaches:

MethodDirectionRealtimeComplexityUse Cases
PollingClient -> Server❌SimpleSimple dashboard, delayed notification,..
SSEServer -> Client✅MediumNotification, live update,…
WebsocketBoth directions✅HardStreaming, chats, game, collaboration, …

Deep Dive

Polling

The client repeatedly sends requests by wrap them into the setInterval function:

// this function run every 3s from Frontend
setInterval(async () => {
  const res = await fetch('/api/messages')
  const data = await res.json()
  updateUI(data)
}, 3000)

SSE - Server-Sent Events (SSE)

The server send event to the client whenever they have an updated:

const eventSource = new EventSource('/events')

eventSource.onmessage = (event) => {
  console.log(event.data)
}

Websocket

Websocket is the two ways connection from server and client. It has a persistent connection from server and client, whenever they have updates, the update will be sent to others.

Server connection

Understand this like the SSE. Sometime you need to send the update for the concurrent user like hunt for discount, have a new feeds, real-time dashboard (delivery tracking, revenue,…),…

Thinking that you need to update to their client about newest information instead of waiting for the new refresh.

const WebSocket = require('ws')

const wss = new WebSocket.Server({ port: 3000 })

wss.on('connection', (ws) => {
  console.log('Client connected')

  // send to client
  ws.send('Hello from server')

  // receive from client
  ws.on('message', (message) => {
    console.log('Received:', message.toString())
  })

  // ... adding more listening message

  // close connection trigger
  ws.on('close', () => {
    console.log('Client disconnected')
  })
})

Client connection

Proactive checking a new data. user request when they have something to update or exchange with server or partner in the system.

User A send a message to user B and that’s important message. It would be instantly send to user B without waiting to refresh (user B don’t know when user A message to him). At this case, server proactively send message to user A.

const ws = new WebSocket('ws://localhost:3000')

ws.onopen = () => {
  console.log('Connected to server')
}

// listen from Server
ws.onmessage = (event) => {
  console.log('Server says:', event.data)
}

// ... adding more listening message here

// close connection trigger
ws.onclose = () => {
  console.log('Disconnected')
}

// send to server
function sendMessage() {
  const input = document.getElementById('msg')
  ws.send(input.value)
  input.value = ''
}

Trade-offs

Polling

Pros

Cons

SSE

Pros:

Cons:

Websocket

Pros

Cons

When to use

Anti-pattern

Conclusion