大家好，我是前端西瓜哥。

為了測試 Yjs 的協(xié)同能力，我實現(xiàn)了支持協(xié)同簡單的 TODO 應(yīng)用。

支持的功能

1. 創(chuàng)建房間；
2. 新增、刪除、完成、清空所有待辦；
3. 撤銷重做；
4. 顯示其他用戶的光標位置；

技術(shù)棧

列一下用到的技術(shù)：

1. Vite + React + TypeScript + React Router；
2. Yjs、y-websocket：實現(xiàn)協(xié)同編輯；

源碼

源碼放 Github 上了。因為花了一天寫的簡易 Demo，沒有太分模塊，代碼很稀爛，僅供參考。

https://github.com/F-star/yjs-react-todo-app。

運行方式

先安裝依賴：

pnpm install

然后兩個終端分別啟動服務(wù)端和客戶端：

pnpm run server

pnpm run dev

演示

簡單看看效果。

創(chuàng)建一個房間。

復(fù)制這個房間鏈接，在另一個瀏覽器里打開。

然后就是一段操作。

一些知識點

所有的需要同步的對象都保存在一個 Y.Doc 對象下，在其下會創(chuàng)建 Yjs 的數(shù)據(jù)類型，比如 YArray、YMap。

this.ydoc = new Y.Doc();

然后我們需要一個 Provider 去將這個對象的內(nèi)容同步出去，以及同步回來。

this.provider = new WebsocketProvider(wsUrl, this.roomId, this.ydoc);

模塊之間的解耦，果然還得是發(fā)布訂閱模式。通過 observer 監(jiān)聽數(shù)據(jù)的變化，然后同步到組件上。

// 創(chuàng)建頂層的 YArray 對象
this.yTodoItems = this.ydoc.getArray('todoItems');
this.yTodoItems.observe(callback);

// 拿到 YArray 對應(yīng)的普通數(shù)組對象，更新組件的內(nèi)部狀態(tài)
yjsClient.onTodoItemsChange((event) => {
  setTodoItems(event.target.toArray());
});

對于要修改一個 YArray 下一個普通對象的情況，不能修改這個普通對象的屬性，它不會觸發(fā) observe 事件。我們有兩種解法。

第一種方案是從 YArray 對象下刪除對應(yīng)索引位置的對象，然后在這個地方再插入一個修改了屬性的拷貝對象。

toggleTodoItemDone(index: number) {
  // 下面的寫法無法觸發(fā) observe
  // const item = this.yTodoItems.get(index);
  // item.done = !item.done;

  // 下面的寫法可以觸發(fā) observe
  const item = this.yTodoItems.get(index);
  this.yTodoItems.delete(index, 1);
  this.yTodoItems.insert(index, [
    {
      id: item.id,
      text: item.text,
      done: !item.done,
    },
  ]);
}

第二種方案是可以將這個普通對象換成 Y.Map 對象嵌入 YArray 下，通過它的 API 修改屬性，然后用 YArray 的 observeDeep，不能再用 observe 了。

Yjs 的 TypeScript 類型支持不太完善。有些類型太寬泛，比如 YMap 只能定一個類似 Map 的類型，不能傳一個特定結(jié)構(gòu)的 interface，要自己用 as 手動強轉(zhuǎn)類型。

另外，一些包的類型也無法使用，雖然我看到這個包下是有類型文件的。不知道是不是 vite 的問題。

結(jié)尾

Yjs 確實很強大，只要接上 Yjs 的數(shù)據(jù)結(jié)構(gòu)類型，就能快速實現(xiàn)一個分布式的協(xié)同編輯應(yīng)用。