在系列文章的前两篇中，我们探讨了 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（配色方案），确保界面专业且易读。
七、 结语：从“孤岛”到“广场”
通过 Presence 插件，SpreadJS 将枯燥的单元格变成了一个生动的团队协作广场。它让用户不再觉得是在对着冷冰冰的网页操作，而是能真实感受到团队的跳动。
可见，即高效。
在实现了数据的一致性（OT）和协作的视觉透明度（Presence）之后，企业开发者通常会面临下一个挑战：面对海量数据（如 10 万行以上的报表）时，协同通信是否会成为瓶颈？
在下一篇文章中，我们将揭秘 SpreadJS 协同服务器的“王牌性能优化方案”——片段机制 （Fragments）。看它是如何将巨型文档拆分，实现局部极速同步的。敬请期待。
API 速查小贴士：
submitLocalState(p: P)： 发送本地完整状态。otherStates： 这是一个只读对象，存储了房间内所有其他用户的当前位置。on('remove')： 当同事下线时触发，用于清理本地残留的光标。
