大家好，我是前端西瓜哥。
為了測試 Yjs 的協同能力，我實現了支持協同簡單的 TODO 應用。
支持的功能
- 創建房間；
- 新增、刪除、完成、清空所有待辦；
- 撤銷重做；
- 顯示其他用戶的光標位置；
技術棧
列一下用到的技術：
- Vite + React + TypeScript + React Router；
- Yjs、y-websocket：實現協同編輯；
源碼
源碼放 Github 上了。因為花了一天寫的簡易 Demo，沒有太分模塊，代碼很稀爛，僅供參考。
https://github.com/F-star/yjs-react-todo-App。
運行方式
先安裝依賴：
pnpm install然后兩個終端分別啟動服務端和客戶端：
pnpm run server
pnpm run dev
演示
簡單看看效果。
創建一個房間。
復制這個房間鏈接，在另一個瀏覽器里打開。
然后就是一段操作。
一些知識點
所有的需要同步的對象都保存在一個 Y.Doc 對象下，在其下會創建 Yjs 的數據類型，比如 YArray、YMap。
this.ydoc = new Y.Doc();
然后我們需要一個 Provider 去將這個對象的內容同步出去，以及同步回來。
this.provider = new WebsocketProvider(wsUrl, this.roomId, this.ydoc);
模塊之間的解耦，果然還得是發布訂閱模式。通過 observer 監聽數據的變化，然后同步到組件上。
// 創建頂層的 YArray 對象
this.yTodoItems = this.ydoc.getArray('todoItems');
this.yTodoItems.observe(callback);
// 拿到 YArray 對應的普通數組對象，更新組件的內部狀態
yjsClient.onTodoItemsChange((event) => {
setTodoItems(event.target.toArray());
});
對于要修改一個 YArray 下一個普通對象的情況，不能修改這個普通對象的屬性，它不會觸發 observe 事件。我們有兩種解法。
第一種方案是從 YArray 對象下刪除對應索引位置的對象，然后在這個地方再插入一個修改了屬性的拷貝對象。
toggleTodoItemDone(index: number) {
// 下面的寫法無法觸發 observe
// const item = this.yTodoItems.get(index);
// item.done = !item.done;
// 下面的寫法可以觸發 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 的類型，不能傳一個特定結構的 interface，要自己用 as 手動強轉類型。
另外，一些包的類型也無法使用，雖然我看到這個包下是有類型文件的。不知道是不是 vite 的問題。
結尾
Yjs 確實很強大，只要接上 Yjs 的數據結構類型，就能快速實現一個分布式的協同編輯應用。
