Architecture Note: Trello Real‑Time Board Synchronization via WebSocket
Explains the requirements, minimal design, trust boundaries, operational checks, and failure modes of Trello’s WebSocket‑based real‑time board sync, plus practical verification steps.
02 Sept 2025, 01:59 UTC

Requirements
\nTrello must propagate card moves, comments, checklist updates, and label changes to all connected clients within sub‑second latency while preserving the existing per‑board permission model. The system should tolerate temporary network interruptions and eventually converge to a consistent state without requiring a full page reload.
\n\nSmallest Suitable Design
\nAfter a user authenticates via Trello’s REST API and receives a short‑lived JWT‑like token, the client opens a single secure WebSocket (wss://) to Trello’s real‑time service. The server streams JSON diff packets that describe add, update, or delete operations on board entities. The client applies these diffs to a local Redux‑style store, updating the UI instantly. To recover from missed diffs, the server periodically emits a full board snapshot that the client can merge into its local state.
Trust and Data Boundaries
\nThe WebSocket endpoint validates the token issued by Trello’s authentication service. Before emitting any diff, the server checks the board‑level access control list (ACL) associated with the token. Consequently, a client never receives data for a board or card it is not authorized to see, enforcing the same trust boundary as the REST API.
\n\nOperational Checks
\n- \n
- Heartbeat/ping‑pong: The client sends a ping message (often labelled
\"hb\"or\"ping\") every ~30 seconds and expects a pong response; absence of a pong triggers reconnection logic. \n - Exponential back‑off reconnect: On disconnect, the client waits
2^n * baseDelayseconds (with jitter) before retrying, capping at a maximum delay to avoid thundering herd. \n - Latency and loss monitoring: The client measures round‑trip time of heartbeats and counts missed diffs; high latency or loss can be logged for alerting. \n
- Snapshot recovery: Upon (re)connection, if the client detects a gap in diff sequence numbers, it discards buffered diffs and waits for the next full board snapshot to reconstruct state. \n
Failure Modes and Design Triggers
\n- \n
- Network partition: Diffs stop flowing; clients display stale UI until reconnection. After the partition heals, the heartbeat detects the loss, triggers reconnect, and a snapshot restores consistency. \n
- Server overload: If the real‑time service begins dropping connections, clients fall back to REST polling (e.g.,
GET /1/boards/{id}every 15 seconds) as a degraded‑mode fallback. \n - Shift to CRDT or GraphQL subscriptions: Should Trello need stronger eventual‑consistency guarantees or want to reduce per‑client bandwidth, the current diff‑over‑WebSocket pipeline could be replaced by a conflict‑free replicated data type (CRDT) layer or GraphQL‑based live queries. \n
Practical Verification Steps
\n- \n
- Open Trello in a desktop browser (Chrome, Firefox, Edge). \n
- Open Developer Tools → Network tab, enable the
WSfilter. \n - Locate the WebSocket request; its URL will resemble
wss://trello.com/1/...(the exact path is internal and may change). \n - Select the WebSocket and view the
Framestab. You should see JSON messages such as:\n{\n \"type\":\"card\",\n \"action\":\"update\",\n \"data\":{\n \"id\":\"5f3a1b2c4d5e6f7g8h9i0j\",\n \"name\":\"Updated Card Title\",\n \"pos\":12345\n }\n}\n This represents a card‑title update diff. \n - Perform an action in the UI (e.g., move a card to another list). Observe a new diff frame reflecting the change. \n
- Simulate a network interruption: In DevTools → Network → Online, choose
Offline. Verify that no further diff frames appear and the UI stops updating. \n - Restore the connection (set back to
Online). The client should first receive a full board snapshot (a large JSON object containing all cards, lists, etc.) followed by resumption of diff frames. \n - Watch the console for heartbeat messages (often labelled
\"hb\"or\"ping\"). Close the tab or disable the network; you should see reconnection attempts with increasing delays in the Network → WS log. \n
Limitations
\nThe exact WebSocket endpoint, message format, and heartbeat protocol are internal to Trello and may change without notice. Custom integrations that rely on undocumented details can break when Trello updates its real‑time engine. Additionally, the design assumes a reasonably stable internet connection; in high‑latency or frequently offline environments the client may show stale data for longer periods until a snapshot arrives.
\n\nWhen to Reconsider the Design
\nIf Trello observes a significant increase in connected clients causing frequent connection drops, or if product requirements demand stronger conflict‑resolution semantics (e.g., collaborative editing of card descriptions), migrating to a CRDT‑based sync layer or adopting GraphQL subscriptions would be justified. Such a change would shift trust validation to the subscription layer but would preserve the same board‑level ACL checks.
0 replies
A thoughtful contribution can make all the difference. Be the first to share one.