实时协作-CRDT基本理解

// 定义一个 CRDT 文本编辑器类
class CRDTTextEditor {
  // 类的构造函数，初始化一个空字符串
  constructor() {
    this.text = ""; // 存储文本的变量
  }

  // 插入字符的方法，参数包括插入的字符信息，来源站点 ID，操作计数器以及插入的位置
  insert(char, siteId, counter, position) {
    // 在指定的位置插入字符，并更新存储的文本
    this.text = this.text.slice(0, position) + char + this.text.slice(position);
  }

  // 合并两个 CRDT 文本编辑器的方法，参数是另一个 CRDT 文本编辑器
  merge(otherEditor) {
    // 合并两个文本编辑器的文本
    const mergedText = this.mergeText(this.text, otherEditor.text);
    // 更新两个文本编辑器的文本为合并后的文本
    this.text = mergedText;
    otherEditor.text = mergedText;
  }

  // 获取存储的文本内容的方法
  getText() {
    return this.text;
  }

  // 合并两个文本的方法，参数是两个要合并的文本
  mergeText(text1, text2) {
    // 初始化一个空字符串，用于存储合并后的文本
    let mergedText = "";

    // 初始化两个指针，分别用于遍历两个文本
    let i = 0;
    let j = 0;

    // 当两个文本都还没有遍历完时，执行循环
    while (i < text1.length || j < text2.length) {
      // 获取当前遍历到的两个字符
      const char1 = text1[i];
      const char2 = text2[j];

      // 如果文本1还有字符而文本2没有，将文本1的字符加入到合并后的文本中，然后将文本1的指针后移
      if (char1 && !char2) {
        mergedText += char1;
        i++;
      } else if (!char1 && char2) {
    // 如果文本2还有字符而文本1没有，将文本2的字符加入到合并后的文本中，然后将文本2的指针后移
        mergedText += char2;
        j++;
      } else {
        // 如果两个文本都还有字符，比较两个字符的来源站点 ID 和操作计数器
        const siteId1 = char1.siteId;
        const siteId2 = char2.siteId;
        const counter1 = char1.counter;
        const counter2 = char2.counter;

        // 如果字符1的来源站点 ID 小于字符2的，或者来源站点 ID 相同但操作计数器小于字符2的，将字符1加入到合并后的文本中，然后将文本1的指针后移
        if (siteId1 < siteId2 || (siteId1 === siteId2 && counter1 < counter2)) {
          mergedText += char1;
          i++;
        } 
        // 否则，将字符2加入到合并后的文本中，然后将文本2的指针后移
        else {
          mergedText += char2;
          j++;
        }
      }
    }

    // 返回合并后的文本
    return mergedText;
  }
}

// 创建两个 CRDT 文本编辑器的实例
const editorA = new CRDTTextEditor();
const editorB = new CRDTTextEditor();

// 端 A 在光标位置插入字符 'X'
editorA.insert({ char: 'X', siteId: 'A', counter: 1 }, 'A', 1, 0);

// 端 B 在同样的光标位置插入字符 'Y'
editorB.insert({ char: 'Y', siteId: 'B', counter: 1 }, 'B', 1, 0);

// 合并两个文本编辑器
editorA.merge(editorB);
editorB.merge(editorA);

// 获取端 A 的文本内容并打印
const textA = editorA.getText();
console.log(textA); // 输出: "XY"

// 获取端 B 的文本内容并打印
const textB = editorB.getText();
console.log(textB); // 输出: "XY"