§06-01Collaboration
リアルタイムカーソル
他の参加者のカーソル位置と名前を表示する。
同じ画面で誰がどこを見て操作しているかが分かり、作業の衝突を避けられる。共同編集やホワイトボードで使う。
実装のポイント
座標は相対値(0〜1)で送受信し、受信側で補間して描画する。送信は rAF や 50ms 程度にスロットリングし、離脱したピアのカーソルはタイムアウトで消す。
- 特徴
- リアルタイム
- アニメーション
- モック
- デモで使っているもの
- motion
- lucide-react
- ResizeObserver