Realtime Collaborative Patterns

This skill applies to applications that require instant state synchronization across multiple clients, such as collaborative document editors, live dashboards, or chat applications.

1. Conflict-Free Replicated Data Types (CRDTs)

When building collaborative editors (text, canvas, standard fields), use CRDTs to prevent race conditions instead of standard Operational Transformation (OT).

• Recommended Libraries: Yjs, Automerge, or Liveblocks.
• Implementation Rules: Ensure the source of truth is the CRDT instance, with UI components binding to the CRDT observer methods, not standard local state.

2. Scaling WebSockets

For applications requiring massive real-time concurrency:

• Stateless Services: Keep WebSocket gateways completely stateless. Push connection state to standard Redis (PubSub) or equivalent managed event busses.
• Broadcasting: Target broadcasts to specific channels or namespaces (e.g., room-id:1234) to minimize unnecessary client traffic.
• Heartbeats: Always implement a rigorous ping/pong heartbeat interval (e.g., 30s) to prune broken, un-closed TCP connections.

3. Optimistic UI Updates