猫でもわかるWebプログラミングと副業

本業Webエンジニア。副業でもWebエンジニア。Web開発のヒントや、副業、日常生活のことを書きます。

y-protocols/sync 内のメソッドが何をしているのか

f:id:yoshiki_utakata:20220204225210j:plain

y-protocols のドキュメントが少ない

Yjs の WebSocket のサーバーサイドを自前実装しようとすると、y-protocols について理解しなければなりません。

github.com



Yjs 公式には y-websocket というリポジトリがあり、この中にはサーバーサイドの実装も入っているのですが、非常にシンプルなものでしかありません。

ユーザー認証を挟んだりなど、実際に使うには基本的には自分で実装しないときついです。

https://github.com/yjs/y-websocket/tree/master/bin



サーバーサイド実装で現れるのが、 y-protocols モジュールに実装されているメソッドたちなのですが、これらについてはドキュメントがなく、実装を見るしかありません。

この記事では、それぞれ何をやってるのかざっくり確認します。

y-protocols

y-protocols のうち、ドキュメントの同期に関するメソッドたちがこちらです。

https://github.com/yjs/y-protocols/blob/master/sync.js

この中で、実際に我々が使うメソッドは以下の3つです

  • writeSyncStep1
  • writeUpdate
  • readSyncMessage

Yjs の WebSocket 通信は、圧縮されたバイナリデータを送受信することで効率的に行われます。これらのメソッドは、バイナリデータとYjsのJSONデータの変換を行うメソッドたちです。

こレラメソッドは、サーバーサイドとクライアントサイド、両方から利用されるメソッドですが、今回はサーバーサイドの目線で説明します。



writeSyncStep1 は、最初に WebSocket に接続した人に対して、他の人が編集していた内容を丸ごと送りつけるためのバイナリを生成します。ドキュメントを渡すと、そのドキュメント全体をバイナリ化して返してくれます。

新しく接続した Yjs クライアントは、ドキュメントの内容を全て受け取ることができ、編集に参加することができます。



writeUpdate は、ドキュメントが更新されたの差分をバイナリに変換するためのメソッドです。このバイナリをクライアントに送りつけることで、他の人が更新したドキュメントの内容を各クライアントに教えてあげます。



readSyncMessage は、実装を見るだけでは分かりづらいですが、

  • readUpdate = readSyncStep2
  • readSyncStep1 = writeSyncStep2

となっているので、 readSyncStep2 または writeSyncStep2 を呼ぶメソッドとなっています。

このメソッドは、サーバーサイドが、クライアントからドキュメントの変更を受け取った時に呼ぶメソッドです。

readSyncStep2 は、サーバーサイドで保持している状態(Docオブジェクト)を更新します。クライアントから受け取ったバイナリと、サーバーサイドで保持している Doc オブジェクトをこのメソッドに渡すと、 Doc オブジェクトを更新してくれます。つまり、このメソッドには副作用があるので注意してください。

writeSyncStep2 ですが、サーバーサイドでは使わないような気がします。