同時編集のマウスカーソル位置同期を試作中
https://www.youtube.com/watch?v=jKEWcc5iJao
https://scrapbox.io/files/6502b864c4177e001b17e707.png
技術選定のための記録
画面描画の方式
絶対的な位置を指定可能
例えば、無限キャンバスの特定の位置を表示するという状況
オブジェクトの位置情報を全て操作して、現在の画面位置と範囲を元に、オブジェクトの描画位置を計算する必要がある
拡大や移動の実装が簡単？
svgと同様？
カーソル位置の通信
送付するデータ
code:data.schema
{
"position": {
"x": 0
"y": 0
}
}
30バイト程度になる
https://scrapbox.io/files/6502bc17cb3662001cc949bf.png
サーバで通信を仲介する場合
サーバー
$ N+1 人のユーザーがいるとき、
$ N+1人と接続
1度に$ N+1回の受信、送信を行う
クライアント
$ N+1人のユーザーがいるとき、1人と接続
P2Pで通信できる場合
$ N+1人のユーザーがいるとき、
各ユーザーは、$ N人と接続し、
1度に$ N回のパケット送信を行い、$ N回のパケット受信を行う。
同期周期が1秒に4回で、16人いる場合
1秒に60回の送信および受信となる
60 × 2 × 30 = 3.6KB/s
クライアント側が負担する帯域は、サーバーが中間にいても結果は変わらない
P2Pである必要はこの場合、ないと考えられる
Socket.IO
サーバーの実装
$ pnpm add socket.io
クライアントの実装
$ pnpm add socket.io-client
同時編集の通信用ライブラリ
500msごと（1秒に2回）の場合
どこにいるのかは分かるが、何をしているのかはまったく分からない。
200msごと（1秒に5回）の場合
https://www.youtube.com/watch?v=_h5lR8T7oZA
それなりに、操作内容が想像できる
マウスカーソル位置の同期ではないから同じには扱えないかもしれない
100msごと（1秒に10回）の場合
https://www.youtube.com/watch?v=jKEWcc5iJao
かなり情報量が多くなるので、操作内容を自然に反映させたいときは、10fpsくらいは欲しい 線形補間専門ではなく、線形補間「まで行ってくれる」ライブラリ マウスカーソル位置の同期は必須ではないかもしれない
細かい作業しているときに、人のカーソルがうろちょろする
邪魔に感じることがありそう
ここだよ！と指をさしたい
この要求は必ずしも起こらない
指さしといったツールを別途実装するとちょうどよいかもしれない