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