类似飞书文档-多人实时协同表格系统

【多人实时协同编辑系统】
项目描述：
开发了一套基于 WebSocket 的多人实时协同表格编辑系统，支持多用户同时在线编辑，
实时同步数据变更，并通过 OT 算法解决编辑冲突。系统支持 100+ 用户同时在线协作，
数据同步延迟控制在 100ms 以内。

技术实现：
- 基于 Vue 3 Composition API 构建响应式数据流，使用 setup 语法糖简化组件逻辑
- 采用 WebSocket 实现客户端与服务端的长连接通信，支持实时消息推送
- 实现 OT (Operational Transformation) 算法解决多人编辑冲突，保证数据最终一致性
- 通过操作队列和版本号机制实现离线编辑与在线同步的无缝切换
- 实现单元格级别的编辑状态广播，实时显示其他用户的编辑位置
- 采用防抖和节流策略优化高频操作，减少网络传输压力
- 设计增量更新机制，只传输变更数据，降低带宽消耗 60%

项目成果：
- 支持 100+ 并发用户同时协作编辑
- 数据同步延迟 < 100ms，冲突解决成功率 99.5%
- 系统稳定性达到 99.9%，用户编辑体验流畅

// 本地操作队列
const operationQueue = ref([])

// 每次编辑创建操作对象
const operation = {
    type: 'cell_update',
    userId: currentUser.id,
    rowId: row.id,
    colId: colId,
    value: value,
    timestamp: Date.now(),
    version: localVersion.value++,
}

// 合并连续的同一单元格操作
const mergeOperations = (ops) => {
    const merged = {}
    ops.forEach((op) => {
        const key = `${op.rowId}_${op.colId}`
        merged[key] = op // 只保留最新的操作
    })
    return Object.values(merged)
}

// 单元格聚焦时广播状态
const handleCellFocus = (rowIndex, colIndex) => {
    const cellKey = `${rowIndex}_${colIndex}`
    editingCells.value[cellKey] = {
        userId: currentUser.id,
        userName: currentUser.name,
        userColor: currentUser.color,
    }
    broadcastEditingState(cellKey, true)
}

const syncOfflineOperations = async () => {
    const offlineOps = await getOfflineOperations()
    for (const op of offlineOps) {
        // 检查操作是否仍然有效
        if (isOperationValid(op)) {
            await sendOperation(op)
        }
    }
}

这个项目采用前后端分离架构：

前端：
- 使用 Vue 3 + Composition API 构建，充分利用响应式系统
- WebSocket 客户端负责实时通信
- 本地维护操作队列和编辑状态

后端（简要提及）：
- （java / ）Node.js + WebSocket 服务器
- Redis 存储在线用户和编辑锁
- MongoDB/mysql 持久化表格数据

数据流：
1. 用户编辑 → 触发本地更新 → 创建操作对象
2. 操作对象入队 → 通过 WebSocket 发送到服务器
3. 服务器广播给其他客户端 → 客户端应用操作

重点是前端的 OT 算法实现和状态管理。

1. 实时性：WebSocket 是全双工通信，服务器可以主动推送，
   延迟通常在 10-50ms；HTTP 轮询需要客户端不断请求，
   延迟取决于轮询间隔（通常 1-5 秒）

2. 资源消耗：WebSocket 建立一次连接后保持长连接，
   开销小；HTTP 轮询每次都要建立连接，消耗大量资源

3. 服务器压力：轮询会产生大量无效请求，WebSocket
   只在有数据时传输

4. 带宽利用：WebSocket 帧头很小（2-14 字节），
   HTTP 请求头通常 500+ 字节

在我们的场景中，实时性要求高，选择 WebSocket 是最优解。

OT 的核心思想是"操作转换"而非"数据覆盖"。

举个例子：
- 用户 A 在位置 2 插入 "X"
- 用户 B 同时在位置 5 插入 "Y"

不使用 OT：后提交的操作会覆盖先提交的，丢失数据

使用 OT：
1. 服务器记录操作顺序
2. 用户 B 的操作需要考虑用户 A 的操作影响
3. 转换用户 B 的操作位置：5 → 6（因为 A 插入了一个字符）
4. 应用转换后的操作

关键是操作的可交换性和转换函数的设计。

在我们的表格中，每个单元格是独立的操作单元，
简化了 OT 的实现复杂度。

我们实现了完整的重连机制：

1. 心跳检测：每 30 秒发送 ping，检测连接状态

2. 自动重连：
   - 断开后立即尝试重连
   - 使用指数退避策略：1s → 2s → 4s → 8s...
   - 最多重试 5 次

3. 离线缓存：
   - 将未发送的操作存入 IndexedDB
   - 重连后自动同步离线操作

4. 用户提示：
   - 显示"连接中..."状态
   - 断开超过 30 秒提示用户检查网络

5. 数据保护：
   - 离线编辑正常进行
   - 本地数据不会丢失

我们采用多层机制保证最终一致性：

1. 版本号机制：
   - 每个操作携带版本号
   - 客户端和服务器都维护版本号
   - 检测到版本不一致时触发同步

2. 操作日志：
   - 服务器记录所有操作历史
   - 客户端可以回溯和重放操作

3. 定期全量同步：
   - 每 5 分钟进行一次全量校验
   - 对比本地和服务器数据的哈希值
   - 不一致时以服务器数据为准

4. 冲突解决策略：
   - 时间戳优先：后发生的操作覆盖先发生的
   - OT 转换：尽可能保留所有操作
   - 人工介入：严重冲突时提示用户选择

理论基础是 CAP 定理中的最终一致性模型。

1. 渲染优化：
   - 虚拟滚动：只渲染可见行，减少 DOM 节点 90%
   - 使用 v-memo 缓存不变的单元格
   - requestAnimationFrame 控制渲染频率

2. 通信优化：
   - 防抖：300ms 内多次输入只发送一次
   - 操作合并：合并同一单元格的连续操作
   - 增量更新：只传输变更数据

3. 数据优化：
   - 使用 Map 代替数组查找，时间复杂度 O(1)
   - 懒加载：按需加载数据
   - 数据分片：大表格分块处理

4. 内存优化：
   - 及时清理编辑状态
   - 限制操作日志长度（最多 1000 条）
   - 离屏单元格不保留引用

性能指标：
- 首屏渲染 < 300ms
- 输入响应 < 16ms（60fps）
- 内存占用 < 100MB（10000 行数据）

1. 引入 CRDT 算法：
   - CRDT（无冲突复制数据类型）比 OT 更易实现
   - 天然支持离线编辑和最终一致性
   - 现代协同工具（Figma、Notion）都在用

2. 实现更细粒度的权限控制：
   - 单元格级别的编辑权限
   - 行/列级别的访问控制
   - 审批流程集成

3. 增强的历史记录功能：
   - 操作回滚和重做（Undo/Redo）
   - 版本对比和恢复
   - 完整的操作审计日志

4. 更好的性能监控：
   - 集成前端性能监控（如 Sentry）
   - 实时监控同步延迟
   - 用户行为分析

5. 富文本编辑支持：
   - 单元格支持格式化文本
   - 公式计算
   - 图表嵌入

这些改进都基于对实际使用场景的深入理解。

// 客户端 → 服务器
{
  type: 'operation',
  payload: {
    userId: 'user_123',
    operation: {
      type: 'cell_update',
      rowId: 'row_1',
      colId: 'col_2',
      value: 'new value',
      version: 15,
      timestamp: 1703945678901
    }
  }
}

// 服务器 → 客户端（广播）
{
  type: 'operation_broadcast',
  payload: {
    userId: 'user_456',
    operation: { /* 同上 */ }
  }
}

// 心跳
{
  type: 'ping',
  timestamp: 1703945678901
}

// 在线用户列表
{
  type: 'users_update',
  payload: {
    users: [
      { id: 'user_123', name: '张三', color: '#ff0000' },
      { id: 'user_456', name: '李四', color: '#00ff00' }
    ]
  }
}

class OperationQueue {
    constructor() {
        this.queue = []
        this.processing = false
    }

    // 添加操作
    push(operation) {
        this.queue.push(operation)
        this.process()
    }

    // 处理队列
    async process() {
        if (this.processing) return

        this.processing = true
        while (this.queue.length > 0) {
            const op = this.queue.shift()
            await this.sendOperation(op)
        }
        this.processing = false
    }

    // 发送操作
    async sendOperation(op) {
        return new Promise((resolve) => {
            ws.send(JSON.stringify(op))
            // 等待 ACK 确认
            waitForAck(op.id, resolve)
        })
    }
}