When you update a widget on your phone, the change appears on your TV dashboard instantly. Here’s how we built our real-time sync engine.
Architecture Overview
Widgets PRO uses a pub/sub architecture built on WebSocket connections with GraphQL subscriptions. Every device maintains a persistent connection to our sync layer.
Client A (Web) ──┐
Client B (iOS) ──┤── WebSocket ──► Sync Layer ──► PostgreSQL
Client C (TV) ──┘How It Works
- Connection — each client establishes a WebSocket connection on app launch
- Subscription — clients subscribe to dashboards they’re viewing
- Mutation — when data changes, the sync layer broadcasts to all subscribers
- Reconciliation — clients merge updates with local state using last-write-wins
Handling Offline
Mobile devices often lose connectivity. Our sync engine handles this gracefully:
- Optimistic updates — changes apply locally before server confirmation
- Queue — offline mutations are queued and replayed on reconnect
- Conflict resolution — timestamp-based LWW with optional manual merge
Performance
We keep sync latency under 100ms for 95th percentile:
| Metric | Target | Actual |
|---|---|---|
| Sync latency (p50) | < 50ms | 32ms |
| Sync latency (p95) | < 100ms | 78ms |
| Reconnection time | < 2s | 1.2s |
| Max concurrent connections | 10,000 | 12,400 |
What’s Next
We’re working on CRDT-based conflict resolution for collaborative editing of dashboard layouts. This will allow multiple team members to edit the same dashboard simultaneously without conflicts.