核心是建立稳定WebSocket长连接、高效解析流式地震波数据、用Canvas实现低延迟动态渲染；需通过心跳保活、指数退避重连、服务端预解码、客户端降采样、像素级平移绘制及时间校准等机制精准控节奏。
用 WebSocket 接收地震波实时数据并做动态可视化，核心是三件事：建立稳定长连接、高效解析流式数据、用 Canvas 或 Web 图表库做低延迟渲染。关键不在“能不能”，而在“怎么控节奏”——数据来得太快要节流，太慢要防断连，波形细节要保精度。
WebSocket 连接与心跳保活
地震监测站通常通过 WebSocket 服务（如基于 Node.js 的 ws 或 Python 的 websockets）推送二进制或 JSON 格式的波形包。网页端需主动处理连接状态：
- 用
new WebSocket(url)初始化，监听onopen、onmessage、onclose和onerror - 服务端应支持心跳帧（如每 15 秒发
{"type":"ping"}），前端收到后立即回{"type":"pong"}，超时未响应则主动重连 - 避免无限重连：采用指数退避策略，例如首次 1s 后重试，失败则 2s、4s、8s… 最大间隔不超过 30s
数据接收与轻量解析
真实地震台网数据常以 MiniSEED 片段或自定义二进制格式传输，浏览器无法直接解析原始格式。推荐折中方案：
- 服务端预解码：将 MiniSEED 转为紧凑 JSON（如
{"ts":1717023456789,"ch":"EHZ","samples":[−21,18,−3,…]}），单条消息控制在 64KB 内 - 前端用
JSON.parse()解析，提取时间戳和浮点采样数组；若用二进制（ArrayBuffer），可用Int16Array视图快速读取 16 位有符号整数 - 对高频数据（如 100Hz 以上）做客户端降采样：每 N 点取极值或均值，避免渲染过载
Canvas 实现毫秒级波形滚动渲染
用原生 <canvas></canvas> 绘制波形比 SVG 或高级图表库更可控、更低延迟，适合连续滚动场景：
立即学习“前端免费学习笔记（深入）”；
- 设定画布宽度固定（如 800px），高度适配通道数；每次新数据到达，将旧图像左移 1 像素，右侧按比例绘制新采样点
- 使用
ctx.getImageData()+putImageData()实现像素级平移，比重绘整条线快 3–5 倍 - 为不同通道（如 EHN/EHE/EHZ）分配颜色和 Y 偏移，叠加显示时加半透明遮罩避免视觉混淆
- 添加简单标尺：每 5 秒画一条竖线，顶部标注相对时间（如 “+5s”），用
ctx.fillText()动态更新
异常处理与用户体验补全
真实监测环境网络波动频繁，不能只靠“连接成功”就假设一切正常：
- 检测数据间隔：若连续 3 秒无新
onmessage，显示“信号弱”提示，并暂停滚动动画 - 容错解析：对损坏 JSON 或非法采样值（如
NaN、Infinity）设默认值（如 0），不中断主循环 - 提供手动触发“重同步”按钮，点击后向服务端发送
{"cmd":"resync"}请求最新元数据与首帧波形 - 在页面角落显示实时状态栏：当前采样率、延迟毫秒数（用
Date.now() − data.ts计算）、连接状态图标
不复杂但容易忽略的是时间一致性——浏览器 Date.now() 与地震台站原子钟存在毫秒级偏差，若需精确到 0.01s 的相位分析，应在首次连接时通过服务端返回授时校准值（如 NTP 差值），后续所有时间戳都做偏移修正。
