【体验篇】看得见的协同：利用 Presence 插件构建“零距离”的团队协作感
在系列文章的前两篇中，我们探讨了 SpreadJS 协同框架的基石——底层通信枢纽与确保数据一致性的 OT 算法。如果说 OT 算法是协作系统中深藏地下的“精密仪表盘”，负责确保每一条指令准确无误，那么 Presence（在线状态）插件 就是面向用户的“指挥中心”与“全景视窗”。 在专业的 Excel 协作场景中，仅仅保证数据正确是不够的。设想在一个拥有数十万行数据的财务汇总表中，如果你不知道同事正在修改哪一列，极易发生业务逻辑上的抢占或重复劳动。 本文将深入介绍 SpreadJS 协同插件中的 Presence 模块，揭秘它如何通过实时光标同步、选区高亮和用户状态感知，为企业用户构建出一种“如临现场”的零距离协作体验。 在单机办公时代，文件是孤立的。而在实时协同时代，文档变成了团队的“公共空间”。 Presence（在线状态） 技术的核心价值在于建立“社交临场感（Social Presence）”。在 SpreadJS 中，这具体表现为： SpreadJS 提供的 当你在 SpreadJS 中启用 Presence 功能后，工作簿会多出一层动态的视觉表达： 系统会为进入房间的每个用户分配一个唯一的颜色。当用户点击某个单元格时，该格子的边框会以对应的颜色显示，并附带一个小标签，显示用户的姓名或首字母缩写。 当同事选中一个连续的区域（如 A1:F20）进行格式调整或数据分析时，该区域会覆盖上一层半透明的背景色。这种视觉提醒能够清晰地划出“当前工作区”，让协作变得井然有序。 通过监听用户加入、离开或更新状态的操作，系统可以在侧边栏或其他 UI 元素中展示“当前在线用户列表”，实时感知团队成员的动态。 Presence 功能的实现分为客户端同步与服务端广播两个层面，逻辑上与业务数据（OT 操作）完全解耦。 在客户端， 服务器端的 内存化管理：为了性能最大化，Presence 数据默认仅保留在服务器内存中，确保极低的延迟。 SpreadJS 为开发者准备了两种路径，既可以“一键开启”，也可以“深度定制”。 这是 SpreadJS 专门为表格场景封装的高级接口。通过它，你只需要简单的几行代码，就能让工作簿具备完整的协作视觉效果： // 1. 初始化 Presence 实例 // 2. 定义当前用户信息 }; // 3. 一键绑定：将 SpreadJS 工作簿与 Presence 逻辑连接 // 仅更新选区，而不改变用户的颜色或身份信息一、 协作中的“社交临场感”：为什么视觉反馈至关重要？
js-collaboration-presence 库，正是为了在 Web 环境下完美复刻甚至超越 Excel 原生的协作体验。二、 拆解 Presence 的视觉语言
1. 多彩实时光标（Multi-color Cursors）
2. 区域选区高亮（Selection Ranges）
3. 用户活动状态监测
三、 技术深度：js-collaboration-presence 的运作机制
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），因为状态信息具有“即时性”——我们只需要知道同事“现在”在哪，而不需要回溯他一分钟前在哪。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 功能？
路径 A：利用
bindPresence API（最快实践）import { bindPresence } from 'spread-sheets-collaboration-client';
const presence = new Presence(connection);
const user = {id: 'user_001',
name: '张三',
color: '#0000ff'
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`（配色方案），确保界面专业且易读。
### 七、 结语：从“孤岛”到“广场”
通过 Presence 插件，SpreadJS 将枯燥的单元格变成了一个生动的团队协作广场。它让用户不再觉得是在对着冷冰冰的网页操作，而是能真实感受到团队的跳动。
**可见，即高效。**
在实现了数据的一致性（OT）和协作的视觉透明度（Presence）之后，企业开发者通常会面临下一个挑战：**面对海量数据（如 10 万行以上的报表）时，协同通信是否会成为瓶颈？**
在下一篇文章中，我们将揭秘 SpreadJS 协同服务器的“王牌性能优化方案”——**片段机制 （Fragments）**。看它是如何将巨型文档拆分，实现局部极速同步的。敬请期待。
**API 速查小贴士：**
- `submitLocalState(p: P)`： 发送本地完整状态。
- `otherStates`： 这是一个只读对象，存储了房间内所有其他用户的当前位置。
