WebSocket是实现实时白板协同最直接高效的方式，通过轻量指令建模、服务端广播、前端批量渲染与本地预绘制、断线补指令等机制保障同步不断、不跳、不乱。
WebSocket 是实现实时白板协同最直接、高效的方式——它让所有参会者对画布的操作（如笔迹、形状、擦除）能在毫秒级同步到其他客户端，避免轮询开销和延迟累积。
白板操作建模为可序列化的指令
不直接传输 Canvas 像素或 DOM 节点，而是将每次交互抽象为轻量指令对象。例如：
- draw：包含 type（"pen"|"line"|"rect"）、points（坐标数组）、color、width 等字段
- clear：仅需 { "type": "clear", "timestamp": 1715234567890 }
- undo/redo：用操作 ID 或步数标识，服务端可选做状态快照管理
所有指令统一走 JSON 序列化，通过 WebSocket.send() 发出，体积小、解析快、易调试。
服务端做简单广播与顺序保障
Node.js（如 ws 库）或 Python（websockets）服务端无需复杂逻辑，核心只需两件事：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 收到某用户指令后，打上来源 userId 和服务器时间戳，再广播给房间内其他成员（不含发送者）
- 对同一房间内消息按接收顺序转发，不重排、不合并——前端靠本地操作队列 + 时间戳做冲突消解（如 LWW 或 CRDT 可后续引入）
注意：服务端不做画布渲染，只做“信使”，降低耦合和扩展成本。
前端用 requestAnimationFrame 控制绘制节奏
高频笔迹（如手指滑动）可能每秒产生数十条点数据，直接逐条 draw 会卡顿。应：
- 客户端收消息后暂存进一个 buffer 数组，用 requestAnimationFrame 统一批量渲染
- 对连续 pen 指令做简单插值（如贝塞尔平滑），提升线条流畅感
- 本地预绘制（local echo）：用户下笔立即画在自己屏幕上，同时发指令；收到服务端回传后再校准（防网络抖动偏移）
断线重连与状态恢复策略
会议中短暂断网很常见，不能清空白板重来：
- 连接恢复后，先向服务端请求“最后 N 条指令”（带时间戳范围），补全丢失操作
- 服务端可为每个房间维护最近 500 条操作日志（内存或 Redis），不持久化也够用
- 前端 canvas 保存当前完整快照（toDataURL）作为 fallback，极端情况直接重载整图（但丢操作历史）
不复杂但容易忽略：白板同步的体验关键不在“多快”，而在“不断、不跳、不乱”。WebSocket 提供了管道，细节决定协作是否自然。
