websocket多人协作白板同步采用“传操作、不传图”模式：1.前端canvas捕获画笔动作并本地即时绘制，封装为结构化消息广播；2.服务端仅广播消息，不处理图形；3.消息协议轻量，含start/move/end等类型；4.支持房间隔离、用户管理及断线重连。
WebSocket 实现多人协作白板同步，核心是“传操作、不传图”——只把用户的画笔动作（按下、移动、抬笔等）实时广播给所有成员，由每个客户端用自己的 Canvas 重放这些操作。这样延迟低、带宽省、响应快。
1. 前端用 Canvas 捕获并重放绘图操作
Canvas 负责本地绘制和渲染，不是用来截图或上传像素数据的。
- 监听
mousedown/mousemove/mouseup事件，记录坐标、颜色、线宽等参数 - 本地立即绘制，保证用户操作有即时反馈
- 把操作封装成结构化消息（如
{ type: 'start', x: 120, y: 80, color: '#3498db', lineWidth: 3 }），通过 WebSocket 发送给服务端 - 收到其他用户发来的同类消息后，调用
ctx.lineTo()或ctx.arc()等 API 在本地 Canvas 上复现该笔画
2. 服务端只做广播，不处理图形逻辑
服务端角色轻量：不解析图像、不生成图片、不保存像素，只做连接管理和消息中转。
- 用 Node.js（
ws库）或 Java（javax.websocket）建立 WebSocket 服务 - 为每个连接分配唯一 ID，并维护当前房间内的活跃客户端列表
- 收到某用户发来的绘图消息后，过滤掉发送者自身，向房间内其余所有人广播同一份 JSON 消息
- 支持
clear类型消息时，可加简单权限校验（比如仅房主能清空）
3. 消息协议要轻量且可扩展
避免传输 Base64 图片、canvas.toDataURL() 结果或整块像素数组——这些体积大、延迟高、难同步。
- 推荐操作类型：
start（落笔）、move（拖动）、end（抬笔）、clear（清屏）、setColor（换色）等 - 每条消息只含必要字段，例如
move只需{ type: 'move', x, y }，高频发送也不卡顿 - 加入
userId字段，方便前端用不同颜色/昵称标识不同用户笔迹 - 可选加时间戳或序列号，用于断线重连后做状态补全或冲突排查
4. 加上房间与用户管理，才真正可用
单个全局画板容易混乱，实际项目必须支持多房间隔离和用户状态感知。
- 连接时让客户端带上房间 ID（如 URL 参数
?room=design-2026），服务端按 room 分组存储连接 - 用户加入/离开时，广播
{ type: 'join', userId: 'u7', name: '张工' }类消息，前端更新在线列表 - 前端监听
onclose和onerror，自动尝试重连（带退避策略），重连后拉取最新画布快照（可选 HTTP 接口） - 若需保存历史，服务端可将操作流存为 JSON 数组，而非图片——体积小、易回放、可 diff
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
