implementing-realtime-sync_skill

Overview

This skill teaches real-time communication patterns for live updates, collaboration, and presence across web and mobile apps. It covers protocol selection (SSE, WebSocket, WebRTC), CRDT-based collaboration (Yjs/Automerge), presence and offline sync, and practical scaling and security strategies. Examples and code patterns are provided for Python, Rust, Go, and TypeScript.

How this skill works

It maps common real-time use cases to the right transport: SSE for one-way streams and LLM token streaming, WebSocket for bidirectional messaging and low-latency updates, WebRTC for peer-to-peer media, and CRDTs for conflict-free multi-user editing. The skill provides implementation patterns, reconnection and offline-sync strategies, presence APIs, and scaling patterns (Redis pub/sub) with language-specific library recommendations. Practical frontend integrations (React hooks, EventSource, WebSocket, Yjs) show end-to-end flows.

When to use it

• Stream LLM tokens or server-driven live feeds to browsers (SSE).
• Build bidirectional chat, game state, or collaboration channels (WebSocket).
• Implement peer-to-peer audio/video or screen sharing (WebRTC with signaling).
• Create multi-user editable documents/spreadsheets requiring conflict resolution (CRDTs like Yjs or Automerge).
• Support mobile/PWA offline-first apps with local queueing and sync-on-reconnect.

Best practices

• Choose protocol by communication pattern—one-way (SSE), bidirectional (WebSocket), peer media (WebRTC).
• Use CRDTs when concurrent edits must merge seamlessly; combine with WebSocket transport for real-time sync.
• Implement exponential backoff with jitter for WebSocket reconnection; rely on EventSource for SSE backoff and event-id resumption.
• Protect channels with authentication (cookies or token headers), apply per-user rate limits and heartbeats to detect stale connections.
• Scale horizontally using a central pub/sub (Redis) to broadcast messages across backend instances.

Example use cases

• LLM chat UI that streams tokens to the browser using SSE and resumes with event IDs.
• Real-time chat or multiplayer lobby using WebSocket server, heartbeat, and reconnect logic.
• Collaborative editor using Yjs + WebsocketProvider with awareness API for cursors and typing indicators.
• Mobile PWA that persists edits in IndexedDB and syncs via CRDTs when connectivity returns.
• Video call feature using WebRTC for media with WebSocket signaling and TURN for NAT traversal.