realtime-collaborative

# 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 Users should feel zero latency. - Provide immediate UI feedback by locally applying mutations the instant the user interacts. - Store the original state before the mutation. - Fire the asynchronous request to the server/socket. - **Rollback:** If the socket responds with an error, silently revert the UI component state back to the original payload via your state manager. ## 4. Presence and Awareness - Abstract User Cursors and "User is Typing" features into an `awareness` protocol distinct from your data layer. This traffic runs frequently (often every few ms) and should not clutter persistence databases.