ot.jsサンプル

ot.jsを使用したサンプルです。

ot.jsは複数人での文書の同時編集を実現する技術である、Operational Translformation*1*2を実装したライブラリです。 サーバとクライアントの両方が提供されていて、簡単なコードで文書の同時編集が実現できます。

※2022/4/16現在、ネットワーク切断時に文書が複製される("こんにちは"が"こんにちはこんにちは"になる)バグが確認されています。ot.jsのバグのようですが、今のところ解決の目処はありません。

動作イメージ

ビルド・起動方法

nodejs v15.14.0で動作を確認しています。

ライブラリのインストール

npm install

サーバの起動

node server.js

動作シーケンス

サーバ起動後 http://localhost:3000/sample_ot にアクセスすると、テキストエディタが表示されます。テキストエディタへの編集は即時に反映され、その内容がサーバにも送られます。サーバでは今までの編集履歴を考慮して編集操作を変換し、ブラウザに送ります。ブラウザでも必要に応じて変換操作が行われ、反映されます。この操作の変換により、複数人で同時に編集しても、結果が同じになります。

sequenceDiagram
    Browser->>+Server: GET /sample_ot
    Server->>+Browser: index.html
    Browser->>+Server: GET /sample_ot/socket.io/socket.io.js
    Server->>+Browser: socket.io.js
    Browser->>+Server: GET /sample_ot/socket.io/?... (websocket connection)
    Server->>+Browser: HTTP 101 OK (start websocket)
    Browser-->>Server: send(編集情報)
    Server-->>Browser: recv(変換された編集情報)

Loading

Operational Transformation(操作変換)

graph TD;
  subgraph Server
    S1(["こんにちは<br>(サーバ上)"])
    S2([どうもこんにちは])
    S3([どうもこんちは])
  end
  subgraph UserA
    A1[こんにちは]
    A2[どうもこんにちは]
    A3["どうもこんちは"]
  end
  subgraph UserB
    B1["こんにちは"]
    B2["こんちは"]
    B3["どうもこんちは"]
  end
  S1-.->|ユーザAが参加|A1
  S1-.->|ユーザBが参加|B1
  A1-->|"ユーザAが編集(ins(0,'どうも'))"|A2
  A1-.->|"送信(ins(0,'どうも'))"|S2
  S1-->S2
  S2-->S3
  B1-->|"ユーザBが編集(del(2))"|B2
  B1-.->|"送信(del(2)),操作変換(del(5))"|S3
  A2-->|マージ|A3
  S3-.->|"送信(del(5))"|A3
  S3-.->|"送信(ins(0,'どうも'))"|B3
  B2-->|マージ|B3

Loading