The Code Behind Every Real-Time Collaboration Tool
summary
Shows working, line-by-line demo of a mouse pointer component that actually broadcasts X/Y positions via a pub/sub channel, explains how rooms group participants by document ID, and uses websockets to make those publishes reach every device. Code is demonstrator-grade not production; position updates throttle with requestAnimationFrame to ~30 FPS to avoid rate limits. Covers subscribe/publish internals, channel event arrays, and how a persistent socket replaces repeated HTTP requests.
AI-written summary · about
chapters (10)
- 0:00intro
- 0:14introduction and speaker background
- 1:55understanding collaborative components
- 2:08examples of collaborative components
- 4:00deep dive into mouse pointers
- 5:03building mouse pointers: code breakdown
- 14:30implementing pubsub design pattern
- 18:48websockets: the secret to real-time communication
- 21:43real-world applications of collaborative components
- 27:41resources and conclusion
related talks
37mGetting Close with the Web
20myouve-played-with-realtime-lets-do-it-properly.html License: For reuse of this video under a more permissive license please get in touch with us
30mWebSockets: The Real-Time Avengers
49mThe Real Time Web with XMPP
30mUnderstanding the realtime web with websockets
40mSocket to me
23mMoQ: Not Another Tech Demo
05mSocket.IO in a Chess Realtime Multiplayer Web Application