WebSocket是HTML5提供的全双工通信协议，适合实时监控大屏；它通过ws/wss连接、订阅机制、增量DOM更新及断线重连与降级策略，实现低延迟、高效率、高可靠的数据推送与展示。
WebSocket 是 HTML5 提供的全双工通信协议，特别适合网页端实时监控大屏这类需要低延迟、高频率数据更新的场景。相比轮询或 SSE，它能真正实现服务端主动推送，避免无效请求和连接开销。
一、建立稳定 WebSocket 连接
前端需用 new WebSocket(url) 初始化连接，URL 必须以 ws://（开发）或 wss://（生产）开头。注意服务端必须支持 WebSocket 协议（如 Node.js 的 ws 库、Java 的 Spring WebSocket、Python 的 websockets 等）。
建议在连接前加状态监听与重连机制：
- 监听
onopen确认连接就绪后才开始发送心跳或订阅数据 - 监听
onerror和onclose，失败时延时重试（如指数退避：1s → 2s → 4s） - 避免页面加载完成前就创建连接，可在
DOMContentLoaded或组件挂载后初始化
二、按需订阅监控数据流
大屏通常展示多个指标（如 CPU 使用率、在线设备数、告警计数），不建议服务端全量广播。推荐采用「消息协议 + 订阅机制」：
立即学习“前端免费学习笔记（深入）”；
- 前端连接后立即发送 JSON 订阅消息，例如：
{"type":"subscribe","topics":["cpu_usage","device_online"]} - 服务端解析并为该连接维护订阅列表，只推送匹配 topic 的数据
- 若大屏切换视图（如从“全国”切到“华东区”），前端发送新订阅，取消旧 topic，减少带宽浪费
三、安全高效地更新 DOM
收到消息后，不要直接对每个字段都调用 innerHTML 或频繁触发 Vue/React 更新。应聚焦性能优化：
- 使用
requestAnimationFrame批量更新，避免布局抖动 - 对数字类指标（如“当前温度：26.3℃”），仅替换数值部分，保留静态文本结构
- 对图表类区域（如 ECharts、AntV），调用实例的
setOption({series: [...]}, true)启用增量渲染 - 对列表类数据（如最新告警），用虚拟滚动或只更新变化项（配合 key 或 ID 对比）
四、处理异常与降级体验
真实环境中网络波动、服务重启不可避免，需保障大屏“可观测、可降级”：
- 在界面上显示连接状态（如右上角小图标：绿色=在线，黄色=重连中，红色=离线）
- 离线时自动切换为本地缓存数据 + 时间戳提示（如“最后更新：2024-06-12 14:22:05”）
- 服务端推送的数据必须带时间戳，前端校验是否过期（如 >5s 未更新则标记为“延迟”）
- 关键指标可叠加本地定时轮询（如每30秒 GET /api/status）作为兜底，但仅用于恢复连接判断，不替代主通道
不复杂但容易忽略的是连接生命周期管理与数据消费节奏控制——WebSocket 不是“连上就完事”，而是要让每一次 onmessage 都有意义、有节制、有反馈。
