リアルタイム共同編集を実現できるライブラリLoroを試してみる

const doc = new LoroDoc();
const text: LoroText = doc.getText("text");
text.insert(0, "Hello world!");
console.log(doc.toJSON()); // { "text": "Hello world!" }

import { LoroDoc } from "loro-crdt";
 
const docA = new LoroDoc();
const docB = new LoroDoc();
docA.setPeerId(0) // 同時に編集が起きた場合は、peerId の大きい方が優先される. 
docB.setPeerId(1) // peerIdを反対にすると結果も反対になる.
docA.getMap("map").set("key1", "valueA");
docA.getMap("map").set("key2", "valueA"); 
docB.getMap("map").set("key1", "valueB"); 
 
const bytesA = docA.export({mode: "update"})
const bytesB = docB.export({mode: "update"})
 
console.log(docA.toJSON()) // { map: { key1: 'valueA', key2: 'valueA' } }
console.log(docB.toJSON()) // { map: { key1: 'valueB' } }
 
docB.import(bytesA)
docA.import(bytesB)
 
console.log(docA.toJSON()) // { map: { key1: 'valueB', key2: 'valueA' } }
console.log(docB.toJSON()) // { map: { key1: 'valueB', key2: 'valueA' } }

import { Hono } from "hono";
import { createNodeWebSocket } from "@hono/node-ws";
import { serve } from "@hono/node-server";
import { WebSocket } from "ws";
 
const app = new Hono();
 
const { injectWebSocket, upgradeWebSocket } = createNodeWebSocket({
  app,
});
 
const port = 1234;
const server = serve({ fetch: app.fetch, port });
injectWebSocket(server);
 
console.log(`Server is running on port ${port}`);
 
// 接続してるクライアントを管理する配列
const conns: WebSocket[] = [];
app.get(
  "/",
  upgradeWebSocket(() => {
    return {
      onOpen: async (evt, ws) => {
        if (!ws.raw) return;
        if (!(ws.raw instanceof WebSocket)) return;
        // すでに接続済みの場合はスキップ
        if (!conns.includes(ws.raw)) conns.push(ws.raw);
      },
      onMessage: (message, ws) => {
        if (!ws.raw) return;
        if (!(ws.raw instanceof WebSocket)) return;
        const update = message.data as ArrayBuffer;
        ws.raw.binaryType = "arraybuffer";
        for (const conn of conns) {
          // 送信元以外に垂れ流し
          if (conn === ws.raw) continue;
          conn.send(update);
        }
      }
    };
  }),
);

  const editor = useEditor(); // tldrawが提供するhook
  const doc = new LoroDoc();
  // 中略
  useEffect(() => {
    // ホワイトボードの変更を検知
    const listen = editor.store.listen((e) => {
      const { changes, source } = e;
      if (source !== "user") return; // ローカルでの変更のみを処理
      const { added, removed, updated } = changes;
      
      for (const shape of added) {
          // LoroDocの更新
          doc.getMap("map").set(shape.id, shape)
      }
    });
    
    return listen;
  }, []);

  const doc = new LoroDoc();
  const versionRef = useRef(); // 前回との差分のみを送信するために保持するref
  // 中略
  const handleMapUpdate = useCallback(
    (e: LoroEventBatch) => {
      if (e.by === "local") {
        // ローカルでの更新
        // websocketに差分を送信
        const updated = doc.export({
          mode: "update",
          from: versionRef.current,
        });
        websocket.send(update)
      }
    },
    [doc, editor.store, wsProvider],
  );
 
  useEffect(() => {
    doc.getMap("map").subscribe(handleMapUpdate);
  }, [doc, handleMapUpdate]);

  const doc = new LoroDoc();
  const ws = new Websocket();
  const versionRef = useRef();
  // 中略
  const handleWsMessage = useCallback(
    async (ev: MessageEvent) => {
      const data = ev.data;
      const arrayMessage = new Uint8Array(data);
      doc.import(arrayMessage); // LoroDocに適用
      versionRef.current = doc.version(); // バージョンをrefに保持
    },
    [doc],
  );
 
  useEffect(() => {
    ws.addEventListener("message", handleWsMessage);
    return () => {
      ws.removeEventListener("message", handleWsMessage);
    };
  }, [handleWsMessage, wsProvider]);

  const doc = new LoroDoc();
 
  const handleMapUpdate = useCallback(
    (e: LoroEventBatch) => {
      if (e.by === "local") {
        // doc.getMap("map").set()による変更
      }
      if (e.by === "import") {
        // doc.importによる変更
        const updateShapes: TLRecord[] = [];
        const events = e.events;
        for (const event of events) {
          if (event.diff.type === "map") {
            const map = event.diff.updated;
            for (const key in map) {
              const shape = map[key] as unknown as TLShape;
                updateShapes.push(shape);
            }
          }
        }
        // tldrawにLoroDocの変更を反映
        editor.store.mergeRemoteChanges(() => {
          editor.store.put([...updateShapes]);
        });
      }
    },
    [doc, editor.store],
  );