多人協(xié)同技術(shù)方案探討

多人協(xié)同技術(shù)方案常見的應(yīng)用場景主要有：

• 原型工具（axure，某刀，mastergo等）
• 文檔辦公類 （飛書文檔，釘釘文檔，石墨文檔等）
• 設(shè)計(jì)工具（即時(shí)設(shè)計(jì)，figma等）

主要目的是實(shí)現(xiàn)多個(gè)人同時(shí)編輯一份共享資源, 來提高工作效率。

圖片

拋開已有技術(shù)本身，我們拿最簡單的富文本編輯器為例子， 如果我們想讓它實(shí)現(xiàn)多人同時(shí)編輯，有哪些可以想到的方案呢？

• 覆蓋模式

即每個(gè)人保存時(shí)都強(qiáng)制以自己的版本為主，即保存最后一次修改，這樣會導(dǎo)致的問題是無法實(shí)現(xiàn)真正意義上的共享協(xié)作。

• 鎖模式

也就是對文件”上鎖“。當(dāng)某個(gè)用戶正在編輯文檔時(shí)，對此文檔進(jìn)行加鎖處理，避免多人同時(shí)編輯，從而避免文檔的內(nèi)容沖突。 缺點(diǎn)就是用戶體驗(yàn)不友好，并且需要等待時(shí)間。

• diff 模式

我們可以采用類似 git 的版本管理模式，多人編輯時(shí)利用 webrtc / socket 與服務(wù)端通信，保存時(shí)通過服務(wù)端進(jìn)行差異對比、合并，自動進(jìn)行沖突處理，再通過服務(wù)推送如SSE(服務(wù)端實(shí)時(shí)主動向?yàn)g覽器推送消息的技術(shù))的方式推送給其他人。

弊端是會出現(xiàn)類似 git 修改同一行，純靠服務(wù)端無法處理，需要手動處理沖突。

這里給大家推薦一個(gè)有意思的庫 NodeGit。

github地址： https://github.com/nodegit/nodegit

以下是 NodeGit 的一些主要特點(diǎn)：

• 全功能：幾乎支持 Git 的所有命令，如克隆、提交、拉取、合并等。
• 高性能：直接調(diào)用 C 庫，提供接近原生速度的性能。
• 易于集成：作為一個(gè) Node.js 模塊，可輕松融入任何 Node.js 項(xiàng)目，無需額外的構(gòu)建步驟或依賴。
• 跨平臺：支持 Windows、macOS 和 Linux，讓開發(fā)者可以在各種操作系統(tǒng)上工作。
• 文檔齊全：提供詳細(xì)的 API 文檔和示例代碼，便于理解和使用。
• 社區(qū)活躍：開源社區(qū)活躍，問題和 PR 能得到及時(shí)響應(yīng)，不斷更新改進(jìn)。

NodeGit 可以用于多個(gè)領(lǐng)域，例如自動化部署、協(xié)作工具、代碼分析、教育工具和 CI/CD 系統(tǒng)等。通過使用 NodeGit，我們能以編程方式訪問和操作 Git 存儲庫，實(shí)現(xiàn)更靈活和自動化的版本控制流程。

當(dāng)然以上這幾種方式很難應(yīng)對復(fù)雜場景的多人協(xié)作。

OT和CRDT算法

OT 算法是一種用于實(shí)時(shí)協(xié)同編輯的算法，它通過操作 & 轉(zhuǎn)換來實(shí)現(xiàn)數(shù)據(jù)的一致性。在 OT 算法中，每個(gè)用戶對數(shù)據(jù)的操作（如修改、刪除等）都被記錄下來，并在其他用戶的客戶端進(jìn)行相應(yīng)的轉(zhuǎn)換，從而實(shí)現(xiàn)多個(gè)用戶對同一份數(shù)據(jù)的協(xié)同編輯。

OT 算法的優(yōu)點(diǎn)在于它可以實(shí)時(shí)地反映用戶的操作，并且可以很好地處理并發(fā)沖突。但是 OT 算法需要在中心化的服務(wù)器上進(jìn)行協(xié)同調(diào)度，因此對于大規(guī)模的分布式系統(tǒng)來說不太適用。

操作 Operational

基于 OT 的協(xié)同編輯核心是：將文檔的每一次修改看作是一個(gè)操作，即操作原子化處理，如在第 N 個(gè)位置插入一個(gè)字符時(shí)，客戶端會將操作發(fā)送到服務(wù)端去處理。

以quill富文本編輯器舉例， 它通過 retain、insert、delete 三個(gè)操作完成整篇文檔的描述與操作，如下:

[
    // Unbold and italicize "Gandalf"
    { retain: 7, attributes: { bold: null, italic: true } },

    // Keep " the " as is
    { retain: 5 },

    // Insert "White" formatted with color #fff
    { insert: 'White', attributes: { color: '#fff' } },

    // Delete "Grey"
    { delete: 4 }
  ]

相關(guān)地址：https://quilljs.com/docs/delta

Transformation 轉(zhuǎn)換

圖片

用戶將原子化的操作發(fā)送到服務(wù)端時(shí)（必須有中央服務(wù)器進(jìn)行調(diào)度）， 服務(wù)端對多個(gè)客戶端的操作進(jìn)行轉(zhuǎn)換，對客戶端操作中的并發(fā)沖突進(jìn)行修正，確保當(dāng)前操作同步到其他設(shè)備時(shí)得到一致的結(jié)果，因?yàn)閷_突的處理都是在服務(wù)端完成，所以客戶端得到的結(jié)果一定是一致的，也就是說 OT 算法的結(jié)果保證強(qiáng)一致性。

轉(zhuǎn)換完成后，通過網(wǎng)絡(luò)發(fā)送到對應(yīng)用戶，用戶合并操作，從而得到一致結(jié)果。

這意味著 OT 算法對網(wǎng)絡(luò)要求更高，如果某個(gè)用戶出現(xiàn)網(wǎng)絡(luò)異常，導(dǎo)致一些操作缺失或延遲，那么服務(wù)端的轉(zhuǎn)換就會出現(xiàn)問題。

OT算法可視化模型：https://operational-transformation.github.io/index.html

CRDT

CRDT 算法全稱 Conflict-free Replicated Data Type，即無沖突復(fù)制數(shù)據(jù)類型，是一種基于數(shù)據(jù)結(jié)構(gòu)的無沖突復(fù)制數(shù)據(jù)類型算法，它通過數(shù)據(jù)結(jié)構(gòu)的合并來實(shí)現(xiàn)數(shù)據(jù)的一致性。

在 CRDT 算法中，每個(gè)用戶對數(shù)據(jù)的修改都會被記錄下來，并在其他用戶的客戶端進(jìn)行合并，以實(shí)現(xiàn)數(shù)據(jù)的一致性。CRDT 算法的優(yōu)點(diǎn)在于它可以適用于大規(guī)模的分布式系統(tǒng)，并且不需要中心化的服務(wù)器進(jìn)行協(xié)同調(diào)度。

但是，CRDT 算法在處理復(fù)雜操作時(shí)可能會存在合并沖突的問題，需要設(shè)計(jì)復(fù)雜的合并函數(shù)來解決。

Yjs 是專門為在 web 上構(gòu)建協(xié)同應(yīng)用程序而設(shè)計(jì)的CRDT.

CRDT 包含以下兩種：

• CmRDT：基于操作的 CRDT，OP-based-CRDT
• CvRDT：基于狀態(tài)的 CRDT，State-based CRDT

基于狀態(tài)的 CRDT 更容易設(shè)計(jì)和實(shí)現(xiàn)，每個(gè) CRDT 的整個(gè)狀態(tài)最終都必須傳輸給其他每個(gè)副本，每個(gè)副本之間通過同步全量狀態(tài)達(dá)到最終一致狀態(tài)，這可能開銷很大；

而基于操作的 CRDT 只傳輸更新操作，各副本之間通過同步操作來達(dá)到最終一致狀態(tài)，通常很小。

穿插一個(gè)小概念：

向量時(shí)鐘（Vector Clock），它是一種在分布式系統(tǒng)中用于記錄事件順序的時(shí)間戳機(jī)制。它的主要目的是在分布式環(huán)境中實(shí)現(xiàn)事件的并發(fā)控制和一致性。

向量時(shí)鐘的基本思想是為系統(tǒng)中的每個(gè)節(jié)點(diǎn)維護(hù)一個(gè)向量，其中每個(gè)分量對應(yīng)一個(gè)節(jié)點(diǎn)，用于記錄該節(jié)點(diǎn)的事件發(fā)生次數(shù)。當(dāng)一個(gè)節(jié)點(diǎn)發(fā)生事件時(shí)，它會增加自己分量的值。向量時(shí)鐘的關(guān)鍵是在不同節(jié)點(diǎn)之間傳遞這些向量，并在合并時(shí)確保一致性。

目前協(xié)同算法底層都會采用向量時(shí)鐘的模式來設(shè)計(jì)操作算法。

插曲（互斥鎖（Mutex）原理和代碼實(shí)現(xiàn)）

先上代碼：

const createMutex = () => {
    let token = true
    return (f, g) => {
        if (token) {
            token = false
            try {
                f()
            } finally {
                token = true
            }
        } else if (g !== undefined) {
            g()
        }
    }
}

它用于創(chuàng)建一個(gè)互斥鎖（Mutex）?；コ怄i是一種用于控制資源訪問的機(jī)制，確保在任何給定的時(shí)間只有一個(gè)線程（在這里可以理解為一個(gè)函數(shù)調(diào)用）可以訪問被保護(hù)的資源或代碼塊。

下面是對代碼中每個(gè)部分的解釋：

• let token = true：創(chuàng)建一個(gè)名為token的變量，并將其初始化為true。token用于表示互斥鎖的狀態(tài)。
• return (f, g) => { ... }：返回一個(gè)箭頭函數(shù)，該函數(shù)接受兩個(gè)參數(shù)f和g。
• if (token) { ... }：如果token為true，表示互斥鎖可用。
• token = false：將token設(shè)置為false，表示當(dāng)前函數(shù)獲取了互斥鎖。
• try { f() } finally { token = true }：在try塊中執(zhí)行傳入的函數(shù)f。如果在執(zhí)行f的過程中發(fā)生異常，會跳轉(zhuǎn)到finally塊中。在finally塊中，將token重新設(shè)置為true，表示釋放互斥鎖。
• else if (g !== undefined) { g() }：如果token為false，表示互斥鎖已被其他函數(shù)獲取。如果同時(shí)還傳遞了第二個(gè)參數(shù)g，則執(zhí)行g(shù)函數(shù)。

通過這種方式，createMutex 函數(shù)創(chuàng)建了一個(gè)簡單的互斥鎖機(jī)制。只有在互斥鎖可用時(shí)，才能執(zhí)行f函數(shù)。如果互斥鎖已被其他函數(shù)獲取，將跳過f函數(shù)的執(zhí)行，并在可能的情況下執(zhí)行g(shù)函數(shù)。

這種互斥鎖的實(shí)現(xiàn)通常用于在多線程或異步環(huán)境中確保對共享資源的安全訪問。

多人協(xié)同編輯器地址：https://flowmix.turntip.cn/px-editor

大家可以體驗(yàn)一下協(xié)同編輯的快樂。

yjs協(xié)同框架使用

Yjs 本身是一個(gè)數(shù)據(jù)結(jié)構(gòu)，原理是：當(dāng)多人協(xié)作時(shí)，對于文檔內(nèi)容修改，通過中間層將文檔數(shù)據(jù)轉(zhuǎn)換成 CRDT 數(shù)據(jù)；通過 CRDT 進(jìn)行數(shù)據(jù)數(shù)據(jù)更新這種增量的同步，通過中間層將 CRDT 的數(shù)據(jù)轉(zhuǎn)換成文檔數(shù)據(jù)，另一個(gè)協(xié)作方就能看到對方內(nèi)容的更新。

中間內(nèi)容的更新是基于 Yjs 數(shù)據(jù)結(jié)構(gòu)進(jìn)行的，沖突處理等核心都是 Yjs 承擔(dān)的，通信基于 websocket 或 webrtc，所以我們只需要簡單的使用就可以實(shí)現(xiàn)多人協(xié)同的應(yīng)用。

下面是我總結(jié)的一個(gè)結(jié)構(gòu)：

圖片

Yjs 基于數(shù)據(jù)結(jié)構(gòu)層面處理沖突，比 OT 更加穩(wěn)健，對復(fù)雜網(wǎng)絡(luò)的適應(yīng)性更強(qiáng)。網(wǎng)絡(luò)延時(shí)或離線編輯對數(shù)據(jù)結(jié)構(gòu)來說，處理沒有任何差異。

我總結(jié)了一下它的幾個(gè)核心特點(diǎn)：

• 協(xié)同列表及光標(biāo)位置

Yjs 提供的 Awareness（意識）模塊，名如其意，讓協(xié)作者能夠意識到其他人的位置在哪，有效避免沖突可能性。

• 離線編輯

基于 CRDT 的內(nèi)容合并，天然支持離線編輯，瀏覽器端做本地化存儲。

• 版本歷史支持

Yjs 自身提供了快照機(jī)制，保存歷史版本不用保存全量數(shù)據(jù)，只是基于 Yjs 打一個(gè)快照，后續(xù)基于快照恢復(fù)歷史版本。

• 系統(tǒng)編輯人數(shù)上限

上限人數(shù)很高，可支持很多人同時(shí)編輯。

目前主流的 figma 也是采用的 CRDT 開發(fā)協(xié)同編輯功能。

yjs使用

圖片

以上我根據(jù)自己的理解整理了一下yjs的核心模塊。接下來我以數(shù)組結(jié)構(gòu)為例子給大家介紹一下它的用法：

import * as Y from 'yjs'

const ydoc = new Y.Doc()

// 1: 定義一個(gè)類型為數(shù)組的共享數(shù)據(jù)結(jié)構(gòu)
const yarray = ydoc.getArray('my doc') 


// 2. 向數(shù)組中插入數(shù)據(jù)，在第一個(gè)位置插入3條數(shù)據(jù)
yarray.insert(0, [1, 2, 3]) 
// 3. 在第二個(gè)位置刪除一條數(shù)據(jù)
yarray.delete(1, 1)
// 4. 獲取可用的結(jié)果
yarray.toArray() // => [1, 3]

// 5. 監(jiān)聽數(shù)據(jù)變化，執(zhí)行操作
yarray.observeDeep((event) => {
  console.log(event)
})

// 將連續(xù)的操作合并到transact 中
ydoc.transact(() => {
  yarray.insert(1, ['a', 'b'])
  yarray.delete(2, 2) // deletes 'b' and 2
}) // => [{ retain: 1 }, { insert: ['a'] }, { delete: 1 }]

transact方法用于執(zhí)行事務(wù)操作。事務(wù)是共享文檔上的一系列更改，這些更改會在一個(gè)事務(wù)中進(jìn)行處理，以保證數(shù)據(jù)的一致性和正確性。每個(gè)事務(wù)都會觸發(fā)Observer調(diào)用和update事件，我們可以在這些事件中進(jìn)行相應(yīng)的處理。

通過將更改捆綁到單個(gè)事務(wù)中，可以減少事件調(diào)用的次數(shù)，并確保數(shù)據(jù)的一致性。在事務(wù)中，我們可以進(jìn)行多種操作，如插入、刪除、修改等。

yjs多人協(xié)同案例

圖片

https://flowmix.turntip.cn/px-editor