实现多人协同编辑的核心技术与踩坑经验分享

先看效果，再看代码

前两天刚上线了一个协同编辑功能，亲测有效，用户反馈也不错。简单来说，就是多个用户可以同时在线编辑同一个文档，彼此的改动会实时同步，就像Google Docs那样。

我们用的是Socket.IO + Operational Transformation (OT)算法。先上一段核心代码：

const socket = io('https://jztheme.com/socket');
let localContent = '';

socket.on('connect', () => {
  console.log('Connected to server');
});

function applyRemoteChange(delta) {
  const editor = document.getElementById('editor');
  const start = delta.start;
  const end = delta.end;
  const text = delta.text;

  // 应用远程变更
  editor.value = editor.value.substring(0, start) + text + editor.value.substring(end);
}

socket.on('update', (delta) => {
  applyRemoteChange(delta);
});

function sendLocalChange(start, end, text) {
  socket.emit('change', { start, end, text });
}

document.getElementById('editor').addEventListener('input', (e) => {
  const currentContent = e.target.value;
  const start = e.target.selectionStart;
  const end = e.target.selectionEnd;

  if (currentContent !== localContent) {
    const delta = { start, end, text: currentContent };
    sendLocalChange(start, end, currentContent);
    localContent = currentContent;
  }
});

这个场景最好用

上面这段代码最适合用在小型团队协作工具里。我是在一个内部知识管理系统里用的，10个人同时在线编辑毫无压力。

实现思路其实不复杂：每个用户的编辑操作都会触发input事件，然后把变化量（delta）通过WebSocket发送给服务器，服务器再广播给其他客户端。

这里要注意下，我踩过坑的地方是光标位置的处理。如果直接替换文本内容，光标很容易跳到开头或者末尾，用户体验很差。后来加了selectionStart和selectionEnd的判断才解决这个问题。

踩坑提醒：这三点一定注意

第一个坑：冲突处理。当两个用户同时修改同一段文字时，如果没有正确的合并策略，就会出现数据错乱。我的解决方案是使用时间戳来决定哪个变更优先，但这样偶尔会出现用户看到的内容突然被覆盖的情况。

第二个坑：性能问题。最初我是每次按键都发送变更，结果发现网络延迟高的时候体验特别差。后来改成防抖处理，300ms内只发送最后一次变更，效果好多了。

let debounceTimer;
function sendLocalChange(start, end, text) {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    socket.emit('change', { start, end, text });
  }, 300);
}

第三个坑：断线重连。这个真的折腾了半天才发现最佳实践：需要在客户端维护一个版本号，重连后对比服务器的最新版本，自动merge差异。

进阶技巧：状态同步优化

对于更复杂的场景，比如富文本编辑器，建议直接用这种方式——维护一个完整的操作历史栈。我把变更记录存成这样的格式：

const operationStack = [
  { type: 'insert', position: 5, text: 'hello' },
  { type: 'delete', position: 10, length: 3 },
  // ...
];

每个操作都带有类型、位置和具体内容，这样即使出现冲突也能更精确地合并。不过这套方案对后端的压力会大一些，建议搭配Redis使用。

最后唠叨几句

以上是我个人对这个协同编辑功能的完整讲解，实际项目中还有很多细节可以优化。比如：如何处理超大文档的性能问题、怎样实现更精细的权限控制等。

这个技术的拓展用法还有很多，后续会继续分享这类博客。有更优的实现方式欢迎评论区交流，毕竟我也不是什么大神，就是个普通开发者，写点实战经验给大家参考。