2021/5/20 共同編集機能
onk.icon
現時点で僕が知っていること
2017-11-17 (金)
めっちゃヨサソウ!
部屋がいつ立てられたかとかは雑に Object に突っ込んでいるだけ。
CodeMirror + Yjs でサクッと同時編集可能なエディタができるのめっちゃええやん
Google I/O 2013 の動画
https://www.youtube.com/watch?v=hv14PTbkIs0
yjs
cattaz
code:sh
$ rg yjs -l
package.json
server.js
src/AppEnabledWikiEditorCodeMirror.jsx
webpack.config.babel.js
yarn.lock
server.js では
removeInstanceOfY が呼ばれるのは?
app.post('/deletePage'
ってことはページごとに room が作られる?のかな?
yjs
ProseMirror
Quill
CodeMirror
Monaco
Slate
今時のエディタってどれだ
聞いたことあるのは Monaco
The Monaco Editor is the code editor that powers VS Code.
じゃあこれで
デモ見た
ここから何も分からんゾーン
README
README 通り (絶対そのままはやらないが) に進めていくぞ
ディレクトリを掘って git init して開始。
code:sh
npm i yjs y-websocket
package.json できた
code:sh
PORT=1234 node ./node_modules/y-websocket/bin/server.js
なんか立ってる
Example: Observe types
突然なんか出てきた……。
// every time a local or remote client modifies yarray, the observer is called
yarray を誰かが弄るたびに observer が呼び出される
Example: Nest types
情報を上手く共有するための何らかの Type があるんだなってことは分かった
Example: Using and combining providers
y-webrtc と y-websocket が通信できそうみたいな雰囲気?
何も試せないうちに Getting Started 終わっちゃった……。
Yjs CRDT Algorithm
CRDT 最近なんか見た
CRDT の JS 実装で有名なものに yjs があります
ハハーン
ローレイヤー過ぎるので、もうちょっと上を見ていこう
y-monaco
ユーザが書くコードっぽいレベルの Example 出てきた
ついに求めていたものが!!
code:sh
npm i
npm start
これデフォルトだと demos.yjs.dev に繋がるな
localhost:1234 に書き換えると
code:log
Firefox can’t establish a connection to the server at ws://localhost:8080/sockjs-node/438/n5c3mulr/websocket.
なんかダメそう
これ通せたら今日は OK かな
(room id さえあれば) エディタを同時に編集できるだろうってところまで行ける
あ、wss:// か。ws:// に書き換えると?
動いたー!! :tada:
今日のまとめ
共同編集機能のアルゴリズムは 2 種類ある
OT (Operational Transformation)
CRDT (Conflict-free Replicated Data Type)
Google Wave では OT が使われていた
が、後に中の人から CRDT を使うべきだったというブログ記事が出ている
yjs はかなりローレイヤーな実装っぽい
各種 provider (接続プロトコル) に対応している
webrtc
websocket
indexeddb
まぁ websocket で動かせばヨサソウ
yjs のエディタバインディングがある
ProseMirror
Quill
CodeMirror
Monaco
Slate
エディタバインディングを読み込むと、数十行で共同編集ができる