WebSocket实现白板模板实时切换需协同消息协议、服务端广播与前端安全渲染：一、定义含type/templateId等字段的JSON消息；二、服务端仅中继不存状态；三、前端校验白名单后动态加载并重绘；四、通过HTTP初同步、消息队列补发、防抖等处理离线与冲突。

WebSocket 能让白板背景模板切换真正“实时”——不是靠轮询或刷新，而是服务端一发，所有在线客户端瞬间同步。关键不在 WebSocket 本身，而在如何设计消息结构、状态管理与前端渲染的协同逻辑。

一、定义清晰的模板切换消息协议

服务端和所有客户端必须约定统一的消息格式，避免歧义。推荐使用 JSON，包含必要字段：

• type：固定为 "template:change"
• templateId：字符串标识（如 "grid-20", "lined", "blank"），不传路径或 URL，避免 XSS 和跨域风险
• timestamp（可选）：用于冲突检测或回滚，尤其在离线重连后判断是否需覆盖本地状态
• byUserId（可选）：标出谁触发了切换，便于 UI 显示操作提示（如“张三切换为方格背景”）

二、服务端：广播模板变更，不存状态

WebSocket 服务端（如 Node.js + ws 或 Socket.IO）只做中继，不维护白板全局模板状态。每次收到某用户发来的 template:change 消息，直接向该白板房间内所有其他客户端广播（不含发送者）。示例逻辑（Node.js + ws）：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

wsServer.on('connection', (ws, req) => {
  ws.on('message', (data) => {
    const msg = JSON.parse(data);
    if (msg.type === 'template:change' && msg.templateId) {
      // 广播给同房间其他人
      broadcastToRoomExcept(ws, msg);
    }
  });
});

三、前端：响应消息 + 安全加载模板资源

收到 WebSocket 消息后，前端不做直接 DOM 操作，而是走标准流程：

立即学习“前端免费学习笔记（深入）”；

• 校验 templateId 是否在预设白名单内（防止恶意 ID 触发未知资源加载）
• 若已缓存对应 CSS 类名或 Canvas 绘图逻辑，立即应用；否则按需动态加载（例如 import() 加载模板模块）
• 更新本地白板状态对象（如 boardState.template = msg.templateId），并触发重绘
• 对 Canvas 白板，用 clearRect() 清空画布后，调用对应模板的绘制函数（如 drawGrid(ctx, spacing=20)）
• 对 CSS 背景白板，切换容器元素的 class，由预设 CSS 控制背景图/重复方式/颜色

四、处理边界情况：离线、冲突与初始同步

真实场景中不能假设连接永远稳定：

• 页面加载时，先通过 HTTP API 获取当前白板最新 templateId，再建立 WebSocket 连接，避免闪屏
• WebSocket 断开期间发生的切换，靠服务端消息队列（如 Redis Stream）暂存，重连后推送“快照+增量”消息
• 多人同时点不同模板？以最后到达服务端的消息为准（最终一致性），前端可加防抖按钮，或显示“正在切换…”置灰操作区
• 禁止客户端自行发 template:change —— 所有切换必须经服务端广播，确保强一致