WebSocket是实现实时气压数据流与网页绘图联动的核心，需稳定接收、低延迟解析、时间对齐的增量渲染；服务端推送带时间戳JSON或二进制数据，前端用Canvas双缓冲、动态Y轴缩放、滑动窗口及中值滤波保障亚秒级响应与长时间稳定性。
WebSocket 是实现实时气压数据流与网页端绘图联动的核心技术。关键不在于“画图本身”，而在于稳定接收、低延迟解析、时间对齐的增量渲染——尤其当气压变化微小（如 ±0.1 hPa）且采样率达 10 Hz 以上时，普通轮询或长连接无法满足精度与时效要求。
建立可靠 WebSocket 连接并处理气压数据流
服务端需推送结构化、带时间戳的气压数据（推荐 JSON 格式），例如：{"ts":1715823456789,"p":1013.25,"unit":"hPa"}。前端建立连接后应监听 message 事件，并启用二进制模式（若服务端支持）以降低解析开销：
- 使用
websocket.binaryType = 'arraybuffer'接收紧凑二进制帧（如 IEEE 754 float32 + int64 时间戳），比 JSON 解析快 3–5 倍 - 添加心跳保活与自动重连逻辑（如指数退避：1s → 2s → 4s），避免因短暂断连导致数据断层
- 用
performance.now()校准客户端本地时间偏移，将服务端ts映射到浏览器高精度时间轴，确保横轴刻度真实反映采样间隔
构建高精度时间序列绘图区域
Canvas 是实时高频绘图的首选，SVG 在百点以上易卡顿。建议采用双缓冲 canvas 策略，避免主线程阻塞：
- 主 canvas 仅用于最终显示；离屏 canvas（
document.createElement('canvas')）负责逐帧绘制新数据点 - 气压值映射为 Y 坐标时，不直接用全量范围缩放，而是动态锚定“当前均值±0.5 hPa”为可视窗口，防止毛刺拉伸失真
- 每帧只绘制新增点（非重绘全部），用
lineTo()连续路径+stroke()，禁用阴影、渐变等开销操作
实现亚秒级响应的实时交互与校准
用户常需查看瞬时极值、趋势斜率或导出原始片段。这些功能必须与绘图解耦，避免拖慢主循环：
立即学习“前端免费学习笔记（深入）”；
- 维护一个固定长度的
Float32Array滑动窗口（如 1000 点），配合环形索引写入，比数组push/shift快一个数量级 - 点击图表任意位置，通过 canvas 坐标反查最近数据点（二分查找时间戳数组），立即显示该时刻精确气压、采样差值、10 秒变化率（单位：hPa/min）
- 提供“零点校准”按钮：记录当前读数作为基准，后续所有 Y 值显示为 Δp（相对变化），适用于监测微小波动（如实验室气密性测试）
保障长时间运行稳定性与降级体验
连续运行数小时后，内存泄漏与精度漂移是常见问题：
- 每 5 分钟清理一次离屏 canvas 的
getContext('2d').clearRect()，防止累积绘图状态 - 用
requestIdleCallback异步执行数据聚合（如每 100 点生成 min/max/avg 统计），不影响主线程帧率 - 若 WebSocket 断开且重连失败，自动切换至本地模拟数据源（基于上一周期趋势外推），并在 UI 角落显示淡黄色告警条：“网络延迟，显示预测值”
不复杂但容易忽略：气压传感器原始数据常含高频噪声，前端应在绘图前做轻量中值滤波（取连续 3 帧中位数），比服务端滤波更及时，且不影响原始数据存档。
