Open6

codemirrorのリアルタイムコラボレーションについて調べる

bisquebisque

Example

https://codemirror.net/examples/collab/

前提として、リアルタイムコラボレーションの実装は @codemirror/collab パッケージにライブラリ化されている。実装者がyjsやy-codemirrorなどを直接操作することはないと思われる。

どうやらP2Pではなく、各ピアが中央サーバーとやり取りする方式のようだ。この中央サーバーはAuthorityと呼ばれる。

bisquebisque

Authority

https://codemirror.net/examples/collab/#the-authority

Authorityは、更新の配列(CRDTの共有データ型)と、現在のドキュメントのみを持つ。

ピアは接続を開始する際に、Authorityから開始ドキュメントとバージョンを権限者に問い合わせる

Authorityはそれに答えるインターフェイスを実装する

  • pullUpdates: ピアが特定のバージョン以降の変更を取得
  • pushUpdates: ピアが変更を送信
  • getDocument: 新しいピアが接続を開始する
bisquebisque

Peer

https://codemirror.net/examples/collab/#the-peer

PeerはAuthorityとの通信管理をViewPluginで行う。この例では、常に非同期ループで新しい更新を取り込もうとし、取り込んだらそれをエディタに適用する。

エディタの内容が変更されると、ViewPluginはその変更をAuthorityにプッシュしようとする。(実際にはもっと複雑)

bisquebisque

その他

  • 履歴の圧縮: 変更履歴を無限に取っておく事もできるが、使わなければ古いものから削除するのが良い。その場合、オフラインであとから同期しようとしたときできない場合があるのは注意。
  • その他のデータの共有: @codemirror/collab で提供されている sharedEffect を使うと、変更以外のデータも共有できるとのこと。