Design Discord's online presence

Advanced50 minBuilds Online Presence ServiceRead first: 12.2 Pushing to many connections, 12.4 Huge audiences and hot channels, 17.1 Timeouts and retries

STEP 1 OF 11

The brief

You are designing presence for a chat platform: the green dot next to a friend's name. Users stay connected over WebSockets from phones, desktops and browsers, often several at once. When someone comes online or goes away, their friends should see it within a few seconds.

How big it is

Users connected at peak: about 100 million
Heartbeat batches from gateways: 20,000 / second
Presence reads (friend lists, member lists): 30,000 / second
Online friends per user, on average: about 50
p99 goal: under 150 ms

What makes it tricky

Disconnects are unreliable. A phone in a tunnel or a crashed gateway never says goodbye.
Writes never stop. Every connected client proves it is alive every few seconds, so presence is a write-heavy system even when nobody changes status.
One change, many receivers. Each status change has to reach every online friend, and the push side can dwarf the ingest side.

All changes saved

0 components · 0 connections

A blank canvas. A better system.

Add components from the palette, then drag between them to connect the request and event flow.

React Flow

Design Discord's online presence

Advanced50 minBuilds Online Presence ServiceRead first: 12.2 Pushing to many connections, 12.4 Huge audiences and hot channels, 17.1 Timeouts and retries

STEP 1 OF 11

The brief

How big it is

Users connected at peak: about 100 million
Heartbeat batches from gateways: 20,000 / second
Presence reads (friend lists, member lists): 30,000 / second
Online friends per user, on average: about 50
p99 goal: under 150 ms

What makes it tricky

Disconnects are unreliable. A phone in a tunnel or a crashed gateway never says goodbye.
Writes never stop. Every connected client proves it is alive every few seconds, so presence is a write-heavy system even when nobody changes status.
One change, many receivers. Each status change has to reach every online friend, and the push side can dwarf the ingest side.

All changes saved

0 components · 0 connections

A blank canvas. A better system.

Add components from the palette, then drag between them to connect the request and event flow.

React Flow