基于Node.js+Socket.IO+Redis Stream实现鼠标点击事件传输回放

整体链路 #

客户端采集Canvas点击数据 → 通过Socket.IO双向通道上报 → 服务端持久化到Redis Stream做时序存储 → 按客户端维度隔离数据 → 倒计时结束后按原始操作时序精准回放给对应客户端，现有前后端基础代码可直接复用，无需重构原有逻辑。

客户端（index.html）实现要求 #

• 保留现有10秒倒计时进度条、HTML Canvas画布、消息列表组件，原有基础逻辑无需修改
• 给Canvas绑定点击监听事件，触发时计算点击位置相对于Canvas画布左上角的相对横、纵坐标，同步采集当前毫秒级时间戳
• 引入Socket.IO客户端实例，连接成功后存储服务端下发的唯一客户端标识clientId；点击事件触发时，将坐标、时间戳、clientId打包后发送给服务端
• 监听Socket.IO通道的消息推送：普通通知直接追加到页面消息列表；回放阶段的点击事件按照携带的时间偏移量，在Canvas对应坐标绘制点击标记，完全还原操作轨迹
• 10秒倒计时进度条走完时，自动向服务端发送当前clientId的回放请求，等待事件流推送

服务端实现要求 #

• 保留现有基于Express搭建的HTTP服务、Socket.IO连接监听逻辑，原有基础代码可直接复用
• 新客户端建立Socket连接时，生成全局唯一clientId随握手响应下发给客户端，作为后续数据隔离的标识
• 监听客户端上报的点击事件，校验x坐标、y坐标、时间戳、clientId参数合法后，写入Redis Stream：每个客户端对应独立的Stream Key，命名规则参考canvas:click:{clientId}，每个Stream条目存储字段包含x、y、clientTs（客户端上报时间戳）、serverTs（服务端接收时间戳）
• 收到客户端的回放请求后，校验请求携带的clientId合法性，读取对应Stream的全量条目，以第一条事件的时间戳为基准计算每条事件的延迟偏移量，按偏移量逐次向对应clientId的Socket连接推送点击事件，保证回放时序和用户实际操作时序完全一致
• 全量事件回放完成后，向客户端推送回放结束通知，可按需配置Redis Stream过期规则，自动清理历史数据减少内存占用

核心规则说明 #

所有点击事件严格按clientId做数据隔离，回放仅推送给产生对应操作的客户端，禁止跨客户端数据读取
事件时间戳精度保留到毫秒级，回放触发延迟和原始操作时间差的误差控制在10ms以内，保证回放精准度
Redis Stream配置最大长度阈值，避免单客户端高频点击产生过多冗余数据占用存储空间

内容的提问来源于stack exchange，提问作者scranley