Designing WhatsApp/Messenger — Online/Offline Delivery, Traced
The defining problem: deliver in real time, but the recipient may be offline
Chat (WhatsApp, Messenger) is a real-time delivery problem on top of an unreliable, intermittently-connected fleet of phones. The design splits cleanly on one question: is the recipient online right now?
The architecture
- Persistent connections: each online client holds a long-lived connection (WebSocket / MQTT) to
a gateway server. The system keeps a
user → which-server/connectionmap. - Online delivery: sender → gateway → look up recipient's connection → push immediately. Sub-second.
- Offline delivery: no live connection → store the message in a per-user inbox queue + fire a push notification; deliver when they reconnect, then drop (many chat systems don't store delivered messages server-side, especially with E2E encryption).
- Receipts & presence: sent/delivered/read receipts are just small messages flowing back; online/last-seen presence rides on connection heartbeats.
- Groups: fan-out to each member's delivery path (the same online/offline split per member).
Traced: send "hi" to a friend
- Your phone sends over its live connection to a gateway.
- Message service looks up the friend: online → push down their connection; offline → enqueue in their inbox + push notification.
- Their device acks receipt → a delivered receipt flows back to you; when they open it, a read receipt.
The hard parts
- Connection state at scale: billions of long-lived connections → many gateway servers + a fast routing layer to find a user's current server.
- Ordering & exactly-once feel: messages need per-conversation ordering and dedup on retry (idempotency) so a resend doesn't double-post.
- Real-time choice: WebSockets vs long-poll vs SSE (see the trade-off page) — chat needs bidirectional, so WebSockets/MQTT.
Takeaways
- Split on online vs offline: push over a live connection, or store-and-deliver-on-reconnect.
- Persistent connections + a user→connection map are the core; receipts/presence ride the connection.
- Needs per-conversation ordering + idempotent delivery; WebSockets for bidirectional real-time.
Re-authored for this guide; delivery diagram hand-authored as SVG. Complements the "Designing Facebook Messenger" problem page with a traced flow. See also: Long-polling/WebSockets/SSE trade-off, Messaging System, Heartbeat (presence), Idempotency.
🔨 Practice this hands-on — Design WhatsApp / Chat →
Attempt it from an empty file, break it to feel the failure, then defend it under pushback.
🤖 Don't fully get this? Learn it with Claude
Stuck on Designing WhatsApp/Messenger — Online/Offline Delivery, Traced? Open Claude, copy a block below, and it'll teach you this exact concept — visually and interactively.
🎨 Explain it visually
Build the mental picture, not memorization.
I just read a lesson on **Designing WhatsApp/Messenger — Online/Offline Delivery, Traced** (System Design) and want to truly understand it. Explain Designing WhatsApp/Messenger — Online/Offline Delivery, Traced from first principles using ONE vivid real-world analogy and a visual mental model — draw it as ASCII art or a clear step-by-step diagram — with a concrete example using real numbers. Then ask me one question to check I got the mental picture, and wait for my reply. If you're unsure or a claim isn't standard, say so and reason from first principles instead of guessing.
🤔 Walk me through it (interactive)
Socratic — adapts to where you're stuck.
Teach me **Designing WhatsApp/Messenger — Online/Offline Delivery, Traced** interactively. Ask me ONE guiding question at a time, wait for my answer, and adapt to my confusion — build the idea with me step by step instead of explaining it all at once. If you're unsure or a claim isn't standard, say so and reason from first principles instead of guessing.
🧪 Quiz me & fix my gaps
Active recall exposes what you missed.
Quiz me on **Designing WhatsApp/Messenger — Online/Offline Delivery, Traced** with 5 questions, easy to tricky, ONE at a time. Tell me if each answer is right; at the end, explain clearly what I got wrong and why. If you're unsure or a claim isn't standard, say so and reason from first principles instead of guessing.
🧠 Make it stick
Intuition + hook + flashcards for long-term memory.
Help me remember **Designing WhatsApp/Messenger — Online/Offline Delivery, Traced** for the long term: give the one-sentence intuition, a memorable hook/mnemonic, a tiny worked example, and 3 active-recall flashcards (Q -> A). If you're unsure or a claim isn't standard, say so and reason from first principles instead of guessing.