4、实时数据模拟与推送：使用setInterval模拟数据更新、WebSocket概念简介、数据推送流程设计

实时监控大屏的核心在于“实时”。在开发阶段，后端数据接口或WebSocket服务可能尚未就绪，此时需要前端模拟数据更新来验证图表渲染与刷新逻辑。本章将讲解如何使用 setInterval 模拟数据推送，并引入 WebSocket 概念，最后设计一套完整的数据推送流程。

4.1 使用 setInterval 模拟数据更新

setInterval 是浏览器提供的定时器函数，可按照指定时间间隔重复执行回调函数。在 ECharts 大屏开发中，常利用它定期生成随机数据并更新图表实例，以模拟真实数据流。

4.1.1 基础实现步骤

  1. 初始化图表：使用 echarts.init 创建图表实例。
  2. 定义更新函数：生成新数据，调用 chart.setOption 更新配置。
  3. 启动定时器：使用 setInterval(updateFn, interval) 开始模拟推送。
  4. 清理定时器：组件销毁时调用 clearInterval 防止内存泄漏。
关键提示： 模拟数据应尽量贴近真实业务范围与波动规律，避免极端值导致图表失真。建议使用 Math.random() 结合基础值生成。

4.1.2 代码示例：折线图实时更新

// 1. 初始化图表
const chartDom = document.getElementById('realtimeChart');
const myChart = echarts.init(chartDom);

// 2. 初始数据
let data = [];
for (let i = 0; i < 20; i++) {
  data.push(Math.round(Math.random() * 100));
}

// 3. 更新函数
function updateData() {
  data.shift(); // 移除最早数据
  data.push(Math.round(Math.random() * 100)); // 添加新数据

  myChart.setOption({
    xAxis: { data: data.map((_, idx) => idx + 1) },
    series: [{ data: data }]
  });
}

// 4. 启动定时器（每2秒更新一次）
const timer = setInterval(updateData, 2000);

// 5. 清理（例如在页面卸载时）
// clearInterval(timer);

4.1.3 模拟数据更新流程

最佳实践： 将定时器ID存储在全局变量或组件实例中，便于统一管理。对于多个图表，可封装一个数据管理器统一调度。
setInterval 模拟数据更新流程 初始化图表 生成随机数据 更新图表 setInterval 循环触发 说明： 1. 初始化图表后，定时器按固定间隔（如2秒）触发更新函数。 2. 每次更新生成新数据，调用 setOption 刷新图表。 3. 循环往复，模拟实时数据推送效果。

4.2 WebSocket 概念简介

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，广泛应用于实时性要求高的场景，如金融行情、在线协作、游戏和监控大屏。

4.2.1 核心特性对比

特性 HTTP 轮询 WebSocket
通信方向 客户端请求，服务端响应 全双工，双向实时
连接开销 每次请求建立新连接 一次握手，持久连接
实时性 取决于轮询间隔 毫秒级推送
资源消耗 高（频繁请求/响应） 低（长连接）
适用场景 低实时性、简单数据 高实时性、高频数据

4.2.2 WebSocket 连接生命周期

  1. 握手阶段：客户端发起 HTTP Upgrade 请求，服务端返回 101 状态码，协议升级为 WebSocket。
  2. 通信阶段：双方通过 send() 和 onmessage 事件进行双向数据传输。
  3. 关闭阶段：任一方调用 close() 或连接异常断开，触发 onclose 事件。
注意： WebSocket 连接可能因网络波动、服务端重启等原因断开，生产环境必须实现自动重连机制（如心跳检测 + 指数退避重连）。
WebSocket 连接生命周期 客户端 服务端 ① HTTP Upgrade 请求 ② 101 状态码，协议升级 双向通信 双向通信 send() / onmessage ③ close() 或异常断开 ④ onclose 事件触发 提示：生产环境需实现心跳检测与自动重连机制，保证连接稳定性。

4.3 数据推送流程设计

一个完整的实时数据推送流程，需要从前端数据接收、数据处理到图表渲染形成闭环。下面给出通用架构设计。

4.3.1 推送流程架构

层级 组件 职责
数据源层 传感器、数据库、第三方API 产生原始数据
推送层 WebSocket 服务 / MQTT Broker 实时推送数据到客户端
客户端接收层 WebSocket 客户端 / EventSource 接收数据，解析JSON
数据处理层 数据管理器（DataManager） 缓存、清洗、格式化数据
渲染层 ECharts 图表实例 调用 setOption 更新视图

4.3.2 推荐流程步骤

  1. 建立连接：客户端通过 WebSocket 连接到推送服务。
  2. 数据接收：监听 onmessage 事件，获取 JSON 格式数据。
  3. 数据校验：检查数据完整性、时间戳有效性。
  4. 数据缓存：将数据存入环形缓冲区或队列，控制最大长度。
  5. 图表更新：调用 chart.setOption 增量更新，避免全量重绘。
  6. 异常处理：连接断开时触发重连，数据异常时降级显示。
性能建议： 高频推送时（如每秒10次以上），建议在数据处理层做节流（throttle）或合并更新，避免频繁触发 ECharts 重绘导致卡顿。
数据推送流程架构图 数据源层（传感器/DB） 推送层（WebSocket服务） 客户端接收层（WS Client） 数据处理层（DataManager） 渲染层（ECharts图表） 说明：数据从源层逐级向下推送，每层负责特定处理，最终驱动图表实时更新。

4.4 小结

  • setInterval 适合开发阶段模拟数据更新，简单易用，但需注意清理定时器。
  • WebSocket 提供真正的全双工实时通信，是生产环境的首选方案。
  • 数据推送流程 应分层设计，从数据源到渲染层各司其职，保证可维护性和性能。
  • 实际项目中，建议先用 setInterval 快速验证图表效果，再替换为 WebSocket 对接真实数据源。
← 上一章 📖 返回目录 下一章 →