websocket是工业流水线实时数据推送的理想方案，需实现加密连接、指数退避重连、心跳保活；安全解析json并防抖更新ui；支持多产线网格视图与关键节点高亮；断线时降级轮询并缓存渲染，保障可用性。
WebSocket 是网页端实现实时数据推送的理想选择，尤其适合工业流水线这类需要低延迟、双向通信的场景。关键不在于“连接上”，而在于如何稳定接收、解析、展示设备上报的进度数据，并应对断线重连、数据格式异常、高频率更新等实际问题。
一、建立可靠 WebSocket 连接并处理生命周期
工业环境网络不稳定，不能依赖一次 connect 就万事大吉。需主动管理连接状态：
- 使用 带协议前缀的 wss://（非 ws://），确保生产环境加密传输，避免被中间设备拦截或降级
- 在
onclose回调中启动指数退避重连（如 1s → 2s → 4s → 最大 30s），并限制最大重试次数（如 5 次） - 连接成功后立即发送认证消息（如 JSON 格式
{"type":"auth","token":"xxx"}），服务端验证通过才允许接收产线数据 - 设置心跳机制：前端每 25 秒发
{"type":"ping"}，服务端响应{"type":"pong"}；若连续 2 次未收到 pong，主动关闭并重连
二、解析结构化产线进度数据并映射到 UI 元素
设备端通常按固定频率（如每 500ms）推送 JSON 数据包，例如：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
{"line":"A3","stage":"assembly","progress":78,"status":"running","timestamp":1715624892341,"alarms":[]}
前端应：
- 用
JSON.parse()安全解析，包裹 try-catch，丢弃非法 JSON 并记录错误日志（不阻塞后续消息） - 根据
line字段定位对应流水线 DOM 区域（如id="line-A3"），用dataset或 class 动态更新进度条宽度、状态标签文字和颜色 - 对
progress做防抖处理：仅当变化 ≥ 2% 或距上次更新 ≥ 1 秒，才触发 DOM 更新，避免高频重绘卡顿 - 将
alarms数组渲染为右侧浮动告警面板，点击可展开详情（如传感器 ID、触发时间、建议操作）
三、支持多产线聚合视图与关键节点高亮
一个车间常有数十条线，需提供全局监控视角：
- 用 CSS Grid 或 Flex 布局构建可滚动产线卡片网格，每张卡片包含名称、实时进度条、当前工位图标、运行状态徽章（绿色 running / 红色 stopped / 黄色 paused）
- 监听
stage字段变化，当某条线进入“质检”或“包装”等关键阶段时，在卡片顶部添加脉冲动画边框（CSS@keyframes实现），吸引管理员注意 - 提供筛选控件：按状态（运行/停机）、按产线类型（SMT/组装/测试）、按报警等级（无/警告/严重）动态显示子集
- 底部添加汇总栏：显示“当前运行中产线数 / 总数”、“平均进度”、“最近 1 分钟最高报警数”，数据来自内存缓存（非重复计算）
四、离线与降级策略保障基础可用性
即使 WebSocket 中断，也不能让操作员“看天吃饭”：
- 连接断开时，自动切换至轮询备用方案：每 10 秒请求一次
/api/line-status?last_ts=xxx，服务端只返回变更过的产线数据，减少带宽压力 - 本地 localStorage 缓存最近 10 条各产线数据，页面加载时优先渲染缓存内容，再叠加实时流更新，避免白屏等待
- 在页面角落固定显示连接状态图标（WebSocket 图标 + “在线”/“重连中…”/“仅轮询”文字），点击可查看详细日志（含最近 5 条错误码和时间）
- 对非关键数据（如环境温湿度）允许 30 秒无更新即标记为“离线”，但核心进度字段（progress、status）超 5 秒未更新即触发声光提醒（页面闪烁 + 浏览器通知）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
