Open6
codemirrorのリアルタイムコラボレーションについて調べる
Example
前提として、リアルタイムコラボレーションの実装は @codemirror/collab パッケージにライブラリ化されている。実装者がyjsやy-codemirrorなどを直接操作することはないと思われる。
どうやらP2Pではなく、各ピアが中央サーバーとやり取りする方式のようだ。この中央サーバーはAuthorityと呼ばれる。
Authority
Authorityは、更新の配列(CRDTの共有データ型)と、現在のドキュメントのみを持つ。
ピアは接続を開始する際に、Authorityから開始ドキュメントとバージョンを権限者に問い合わせる
Authorityはそれに答えるインターフェイスを実装する
- pullUpdates: ピアが特定のバージョン以降の変更を取得
- pushUpdates: ピアが変更を送信
- getDocument: 新しいピアが接続を開始する
Peer
PeerはAuthorityとの通信管理をViewPluginで行う。この例では、常に非同期ループで新しい更新を取り込もうとし、取り込んだらそれをエディタに適用する。
エディタの内容が変更されると、ViewPluginはその変更をAuthorityにプッシュしようとする。(実際にはもっと複雑)
その他
- 履歴の圧縮: 変更履歴を無限に取っておく事もできるが、使わなければ古いものから削除するのが良い。その場合、オフラインであとから同期しようとしたときできない場合があるのは注意。
- その他のデータの共有: @codemirror/collab で提供されている sharedEffect を使うと、変更以外のデータも共有できるとのこと。
共同編集機能の大変さがうかがえるブログポスト
詳しく読んでないけど、なんやかんやあって分散型システムにするのを諦めた様子。
WebSocketを使った実装サンプル(ありがたい)
Shared Effects と カーソルの共有も実装されている。
これを読んでみる。