在Web应用中实现多人实时协同编辑，核心目标是让多个客户端的文本修改能够无损合并，且用户感知不到冲突。常见的方案包括Operational Transformation（OT）与CRDT，前者通过对操作进行变换保证收敛，后者基于数学结构实现无中心合并。本文以JavaScript为例，梳理从通信层到编辑合并的完整实现路径。
一、通信层：使用WebSocket建立实时通道
实时协作的第一步是让客户端和服务器保持双向低延迟通信。相较于HTTP轮询，WebSocket在建立连接后可由服务端主动推送消息，非常适合光标移动、字符插入等高频小数据量场景。在JavaScript中，我们可以直接使用浏览器内置的WebSocket对象。
下面是一段最简化的客户端连接代码，它负责把本地操作发送到服务器，并监听来自其他人的远程操作。注意在实际项目中应增加重连与心跳机制，避免代理超时断开。
// 建立WebSocket连接
const socket = new WebSocket('ws://127.0.0.1:3000/collab');
// 连接成功后发送加入房间消息
socket.addEventListener('open', () => {
socket.send(JSON.stringify({
type: 'join',
roomId: 'doc-123',
user: 'userA'
}));
});
// 接收服务端转发的他人操作
socket.addEventListener('message', (event) => {
const msg = JSON.parse(event.data);
if (msg.type === 'remote-op') {
applyRemoteOperation(msg.op);
}
});
服务器端可使用Node.js的ws库来广播消息。每当收到某个客户端的操作，就向同房间其他连接转发。这种中心化中继方式实现简单，也便于做权限校验与操作日志存储。
需要强调的是，WebSocket只解决传输问题，并不解决内容冲突。如果两个人同时在第5个字符后插入文字，仅依靠先到先得会造成最终文本不一致，因此必须引入编辑合并算法。
二、操作模型与Operational Transformation基础
协同编辑通常把文档看作线性字符序列，每次修改抽象为操作（Operation），例如插入（insert）或删除（delete），并附带位置与内容。OT的核心思想是：当本地操作和远端操作基于同一旧版本时，通过对其中一方进行变换，使两者按顺序应用后结果一致。
假设用户A在位置2插入“X”，用户B在位置2插入“Y”。若直接先后应用，结果可能是“abXcY”或“abYcX”取决于顺序。OT会把B的操作变换为在位置3插入“Y”，从而两者合并后为“abXYc”，双方最终相同。下面用简化函数展示变换逻辑：
// 简单OT：处理两个插入操作在同一位置的冲突
function transformInsert(pos1, pos2) {
// 若本地插入位置小于等于远端插入位置，远端需后移
if (pos1 <= pos2) {
return pos2 + 1;
}
return pos2;
}
// 示例：本地在2插入，远端原位置2，变换后远端位置变3
const newRemotePos = transformInsert(2, 2);
console.log('远端插入位置调整为', newRemotePos);
真实场景的OT要处理插入与删除、删除与删除的组合，并维护操作上下文版本号。许多开源库如ShareDB、ot.js已封装了这些细节，避免手写出错。
除了OT，CRDT（无冲突复制数据类型）如Yjs采用另一种思路：为每个字符分配唯一ID，通过偏序关系自然合并，无需中心变换服务。它在离线编辑与P2P场景中优势明显，但文档结构相对复杂。
三、前端编辑器集成与光标同步
拿到合并后的操作模型后，需要将其应用到具体的编辑器界面。如果基于textarea或contenteditable自行实现，要在用户输入事件中拦截变更并生成操作，再调用合并函数。现代方案多接入CodeMirror或Quill等支持协同的编辑器。
以Quill为例，它提供text-change事件，可拿到变更范围与内容，配合quill-cursors模块还能显示其他人的光标位置，提升协作体验。以下代码展示如何监听变更并发送：
const quill = new Quill('#editor', { theme: 'snow' });
quill.on('text-change', (delta, oldDelta, source) => {
if (source !== 'user') return; // 忽略程序化更新
// 将delta作为操作发送给服务器
socket.send(JSON.stringify({
type: 'op',
roomId: 'doc-123',
delta: delta
}));
});
// 接收到远端delta时应用到编辑器
function applyRemoteOperation(delta) {
quill.updateContents(delta, 'api');
}
光标同步要注意避免回声：本地应用远端操作时，不应再次触发发送逻辑，否则会死循环。上面代码通过判断source参数规避了该问题。
另外，大文档下频繁发送细微操作会造成带宽浪费，可做节流或批量合并，例如每200毫秒打包一次未发送操作，平衡实时性与性能。
四、断线重连与一致性保障
网络不稳定时，客户端可能离线编辑一段时间。重连后若直接发送离线操作，服务端版本已领先，需要拉取缺失操作并重新变换。常见做法是客户端携带最后已知版本号，服务端返回差异日志，本地OT补偿后再提交。
下面伪代码说明重连流程：
socket.addEventListener('open', () => {
socket.send(JSON.stringify({
type: 'rejoin',
roomId: 'doc-123',
lastVersion: localVersion
}));
});
// 服务端回应离线期间的操作列表
socket.addEventListener('message', (event) => {
const msg = JSON.parse(event.data);
if (msg.type === 'history') {
msg.ops.forEach(op => applyRemoteOperation(op));
// 然后发送本地离线产生的操作
flushOfflineOps();
}
});
为保障最终一致，服务端应作为权威版本源，记录操作日志并定期快照。客户端只信任服务端确认后的版本号，可减少分歧。
综合来看，JavaScript实现实时协同编辑并不依赖某个神秘技术，而是通信、算法与编辑器三层的配合。从WebSocket起步，选好OT或CRDT方案，再结合成熟编辑器组件，即可构建流畅的多人文档系统。
JavaScript实时协作Operational_Transformation修改时间：2026-08-08 08:21:32