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

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

支持的功能

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

技術(shù)棧

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

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

源碼

源碼放 Github 上了。因?yàn)榛艘惶鞂懙暮喴?Demo，沒有太分模塊，代碼很稀爛，僅供參考。

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

運(yùn)行方式

先安裝依賴：

pnpm install

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

pnpm run server

pnpm run dev

演示

簡單看看效果。

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

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

然后就是一段操作。

一些知識(shí)點(diǎn)

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

this.ydoc = new Y.Doc();

然后我們需要一個(gè) Provider 去將這個(gè)對象的內(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());
});

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

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

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,
    },
  ]);
}

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

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

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

結(jié)尾

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