【体验篇】看得见的协同：利用 Presence 插件构建“零距离”的团队协作感

作者：袖梨 2026-08-19

在系列文章的前两篇中，我们探讨了 SpreadJS 协同框架的基石------底层通信枢纽与确保数据一致性的 OT 算法。如果说 OT 算法是协作系统中深藏地下的"精密仪表盘"，负责确保每一条指令准确无误，那么 Presence（在线状态）插件 就是面向用户的"指挥中心"与"全景视窗"。

在专业的 Excel 协作场景中，仅仅保证数据正确是不够的。设想在一个拥有数十万行数据的财务汇总表中，如果你不知道同事正在修改哪一列，极易发生业务逻辑上的抢占或重复劳动。

本文将深入介绍 SpreadJS 协同插件中的 Presence 模块，揭秘它如何通过实时光标同步、选区高亮和用户状态感知，为企业用户构建出一种"如临现场"的零距离协作体验。

一、协作中的"社交临场感"：为什么视觉反馈至关重要？

在单机办公时代，文件是孤立的。而在实时协同时代，文档变成了团队的"公共空间"。

Presence（在线状态） 技术的核心价值在于建立"社交临场感（Social Presence）"。在 SpreadJS 中，这具体表现为：

防止编辑冲突：看到同事的选区在 A1:D10，你会下意识避开该区域，减少业务逻辑冲突。
提升沟通效率：无需在聊天软件中询问"你在改哪一行？"，屏幕上的彩色光标就是最好的答案。
强化归属感：看到同事的光标在屏幕上跳动，用户能真切感受到团队正在共同推进任务。

SpreadJS 提供的 js-collaboration-presence 库，正是为了在 Web 环境下完美复刻甚至超越 Excel 原生的协作体验。

二、拆解 Presence 的视觉语言

当你在 SpreadJS 中启用 Presence 功能后，工作簿会多出一层动态的视觉表达：

1. 多彩实时光标（Multi-color Cursors）

系统会为进入房间的每个用户分配一个唯一的颜色。当用户点击某个单元格时，该格子的边框会以对应的颜色显示，并附带一个小标签，显示用户的姓名或首字母缩写。

2. 区域选区高亮（Selection Ranges）

当同事选中一个连续的区域（如 A1:F20）进行格式调整或数据分析时，该区域会覆盖上一层半透明的背景色。这种视觉提醒能够清晰地划出"当前工作区"，让协作变得井然有序。

3. 用户活动状态监测

通过用户加入、离开或更新状态的操作，系统可以在侧边栏或其他 UI 元素中展示"当前在线用户列表"，实时感知团队成员的动态。

三、技术深度：js-collaboration-presence 的运作机制

Presence 功能的实现分为客户端同步与服务端广播两个层面，逻辑上与业务数据（OT 操作）完全解耦。

1. 客户端（Presence 类）：捕获与提交

在客户端，Presence 类负责管理本地状态。它的主要职责有两个：

提交本地状态 ：通过 submitLocalState 方法，将当前用户的位置信息（选区、工作表 ID）以及身份信息（用户名、颜色）发送给服务器。

presence.submitLocalState({ userId: 'id1', selection: 'range1' }); presence.submitLocalStateField('selection', 'range2')

远程状态 ：通过 presence.on('update') 其他人的动作，并实时更新到本地 SpreadJS 视图中。

presence.on('add', () => {    uiComponent.showPresences(presence.otherStates);});presence.on('update', () => {    uiComponent.showPresences(presence.otherStates);});presence.on('remove', () => {    uiComponent.showPresences(presence.otherStates);});

2. 服务端（presenceFeature）：调度与一致性

服务器端的 presenceFeature 就像是一个"广播塔"。它不涉及复杂的冲突转换（OT），因为状态信息具有"即时性"------我们只需要知道同事"现在"在哪，而不需要回溯他一分钟前在哪。

状态广播：接收一个客户端的最新位置，立即广播给房间内所有其他客户端。

内存化管理 ：为了性能最大化，Presence 数据默认仅保留在服务器内存中，确保极低的延迟。*

import { createServer } from 'http';import { Server } from 'js-collaboration';import * as OT from 'js-collaboration-ot';import { presenceFeature } from 'js-collaboration-presence';OT.types.register(type);const httpServer = createServer();const server = new Server({ httpServer });server.useFeature(OT.documentFeature());server.useFeature(presenceFeature());httpServer.listen(8080);

四、开发者视角：如何快速集成 Presence 功能？

SpreadJS 为开发者准备了两种路径，既可以"一键开启"，也可以"深度定制"。

路径 A：利用 `bindPresence` API（最快实践）

这是 SpreadJS 专门为表格场景封装的高级接口。通过它，你只需要简单的几行代码，就能让工作簿具备完整的协作视觉效果：

import { bindPresence } from 'spread-sheets-collaboration-client';// 1. 初始化 Presence 实例const presence = new Presence(connection);// 2. 定义当前用户信息const user = {    id: 'user_001',    name: '张三',    color: '#0000ff'};// 3. 一键绑定：将 SpreadJS 工作簿与 Presence 逻辑连接await bindPresence(workbook, presence, user);

bindPresence 会自动 SpreadJS 的 SelectionChanged 事件，并将变更同步给他人；同时也会自动接收他人的状态，并在工作簿上绘制彩色矩形。

路径 B：细粒度控制 `submitLocalStateField`

如果你希望在状态中加入自定义信息（例如：当前用户正在使用的特定工具或业务标签），可以使用字段级提交：

// 仅更新选区，而不改变用户的颜色或身份信息presence.submitLocalStateField('selection', currentRange);

五、典型业务场景下的 Presence 价值

1. 财务审计与复核

在审计过程中，审计员和被审计方可以同时在线。审计员可以实时"跟随"被审计方的数据填报路径，实时发现异常并高亮讨论，大大缩短了反复沟通的链路。

2. 供应链多部门协作

采购部修改订单数量，物流部同步查看排产计划。Presence 功能让物流人员能立刻看到采购人员正在处理哪些订单行，从而实现业务上的"无缝交接"。

3. 互动式培训与教学

教师在 SpreadJS 课件中操作时，所有学生都能清晰地看到教师的光标指向哪一个公式或数据模型，实现了真正的远程同步教学。

六、性能与扩展：应对大规模并发

在企业级应用中，高频的光标同步是否会拖慢系统？SpreadJS 协同服务器对此进行了深度优化：

轻量化协议：Presence 消息采用精简的 JSON 结构，仅包含必要的坐标和 ID。
节流处理：在用户连续拖动选区时，系统会进行智能节流（Throttling），避免 WebSocket 通信过载。
配色方案定制 ：开发者可以通过 IBindPresenceOptions 定制一套符合公司视觉规范的 colorScheme（配色方案），确保界面专业且易读。