如何在React Native+Firebase应用中实现代码片段实时协同编辑？

方案选择：OT vs CRDT #

操作转换（OT） #

适配Firebase这类中心化实时数据库场景，通过跟踪用户操作并在客户端/服务器进行转换，确保所有客户端最终得到一致文档。优点是性能优异、适配代码这类结构化文本；缺点是需要实现操作转换逻辑，复杂度中等。

冲突-free复制数据类型（CRDT） #

无需中心协调，每个客户端独立处理操作，最终自动收敛。优点是容错性强，支持离线后同步；缺点是长文本场景可能存在性能开销，快速落地推荐使用成熟库而非自行实现。

OT集成示例（自定义实现） #

1. Firebase数据结构设计 #

放弃直接存储完整代码文本，改为存储操作日志、当前内容和版本号：

// Realtime Database 节点结构
codeSnippets/{snippetId}: {
  content: "function add(a,b) { return a+b; }", // 当前代码内容
  operations: [
    {
      userId: "user_xyz",
      type: "insert", // 可选值：insert/delete
      position: 20,
      text: "console.log('hello')",
      timestamp: 1700000000000
    }
  ],
  version: 1 // 文档版本，用于校验操作顺序
}

2. 客户端捕获操作并提交 #

在代码编辑器组件中捕获输入变化，生成标准化操作后通过Firebase事务提交（确保版本一致性）：

import { firebase } from '@react-native-firebase/database';

// 本地状态：当前代码、本地版本、未提交操作
const [editorContent, setEditorContent] = useState('');
const [localVersion, setLocalVersion] = useState(0);
const [pendingOps, setPendingOps] = useState([]);

// 编辑器内容变化处理
const handleEditorChange = (newContent) => {
  const prevContent = editorContent;
  if (newContent === prevContent) return;

  // 生成操作（实际项目推荐用diff-match-patch库生成精确diff）
  const op = generateEditOp(prevContent, newContent);
  if (!op) return;

  op.userId = currentUser.uid;
  op.timestamp = Date.now();

  // 提交操作到Firebase
  const snippetRef = firebase.database().ref(`codeSnippets/${snippetId}`);
  snippetRef.transaction(currentData => {
    if (!currentData) return currentData;

    // 版本匹配才允许提交，避免过时操作覆盖
    if (currentData.version !== localVersion) return;

    // 应用操作到当前内容
    currentData.content = applyOp(currentData.content, op);
    currentData.operations.push(op);
    currentData.version += 1;

    // 更新本地状态
    setLocalVersion(currentData.version);
    setEditorContent(currentData.content);
    return currentData;
  }, (error, committed) => {
    if (!committed) {
      // 版本冲突，将操作加入待处理队列，等待同步后重试
      setPendingOps(prev => [...prev, op]);
    }
  });
};

// 生成编辑操作的简化函数
const generateEditOp = (prev, curr) => {
  if (curr.length > prev.length) {
    const added = curr.slice(prev.length);
    return { type: 'insert', position: prev.length, text: added };
  } else if (curr.length < prev.length) {
    const deletedLen = prev.length - curr.length;
    return { type: 'delete', position: curr.length, length: deletedLen };
  }
  return null;
};

// 应用操作到文本的函数
const applyOp = (content, op) => {
  switch(op.type) {
    case 'insert':
      return content.slice(0, op.position) + op.text + content.slice(op.position);
    case 'delete':
      return content.slice(0, op.position) + content.slice(op.position + op.length);
    default:
      return content;
  }
};

3. 实时同步与冲突转换 #

监听Firebase中操作日志的新增事件，对本地待处理操作进行OT转换后应用：

// 监听操作日志变化
useEffect(() => {
  const opsRef = firebase.database().ref(`codeSnippets/${snippetId}/operations`);
  const unsubscribe = opsRef.on('child_added', (snapshot) => {
    const remoteOp = snapshot.val();
    if (remoteOp.userId === currentUser.uid) return; // 跳过自己的操作

    // 转换本地待处理操作（核心OT逻辑，示例简化）
    const transformedOps = pendingOps.map(op => transformOp(op, remoteOp));
    setPendingOps(transformedOps);

    // 应用远程操作到本地内容
    const updatedContent = applyOp(editorContent, remoteOp);
    setEditorContent(updatedContent);
    setLocalVersion(prev => prev + 1);
  });

  return () => unsubscribe();
}, [editorContent, pendingOps]);

// 简化的操作转换函数（处理位置偏移）
const transformOp = (localOp, remoteOp) => {
  // 插入 vs 插入：本地插入位置在远程之后，偏移位置
  if (localOp.type === 'insert' && remoteOp.type === 'insert') {
    if (localOp.position > remoteOp.position) {
      return { ...localOp, position: localOp.position + remoteOp.text.length };
    }
  }

  // 插入 vs 删除：本地插入位置在远程删除位置之后，偏移位置
  if (localOp.type === 'insert' && remoteOp.type === 'delete') {
    if (localOp.position > remoteOp.position) {
      return { ...localOp, position: localOp.position - remoteOp.length };
    }
  }

  // 删除 vs 插入：本地删除位置在远程插入位置之后，偏移位置
  if (localOp.type === 'delete' && remoteOp.type === 'insert') {
    if (localOp.position >= remoteOp.position) {
      return { ...localOp, position: localOp.position + remoteOp.text.length };
    }
  }

  return localOp;
};

CRDT集成示例（基于Yjs库） #

如果不想自己实现OT逻辑，推荐用Yjs搭配Firebase绑定库快速落地：

// 安装依赖
// npm install yjs @syncedstore/yjs-firebase

import * as Y from 'yjs';
import { FirebaseBinding } from '@syncedstore/yjs-firebase';
import { firebase } from '@react-native-firebase/database';
import { useEffect, useState } from 'react';

const CodeCollabEditor = ({ snippetId }) => {
  const [editorContent, setEditorContent] = useState('');
  const ydoc = new Y.Doc();
  const ytext = ydoc.getText('code');

  useEffect(() => {
    // 绑定Yjs文档到Firebase
    const ref = firebase.database().ref(`codeSnippets/${snippetId}/yjs`);
    const binding = new FirebaseBinding(ydoc, ref);

    // 监听Ytext变化，同步到编辑器
    const observer = ytext.observe(() => {
      setEditorContent(ytext.toString());
    });

    // 编辑器变化同步到Ytext
    const handleEditorInput = (newContent) => {
      if (newContent !== ytext.toString()) {
        ytext.delete(0, ytext.length);
        ytext.insert(0, newContent);
      }
    };

    // 清理函数
    return () => {
      observer.disconnect();
      binding.destroy();
    };
  }, [snippetId]);

  return <CodeEditor value={editorContent} onChange={handleEditorInput} />;
};

内容的提问来源于stack exchange，提问作者Ilyna