物联网实时数据大屏怎么做?MQTT 设备数据上屏的 3 种路径

一、IoT 大屏和业务大屏不一样在哪

• 数据是推的,不是拉的:设备走 MQTT/TCP 长连接主动上报,天然不是 HTTP 形态;
• 高频且持续:一天 86400 秒,设备可能每 5 秒一条,数据量与普通业务不可同日而语;
• 关注状态与告警:看的不是历史报表,而是"当前值 + 越限没有 + 断没断线";
• 离线是常态:弱网、断电、维修都会造成数据缺口,大屏要能表现"离线"而不是显示 0。

二、路径一:设备云平台 API 直取

如果设备已经接入了物联网云平台(阿里云 IoT、腾讯连连、电信 AEP、各类 DTU 云),最省事——云平台都提供 HTTP 查询接口:

• 在云平台建好产品与设备分组,拿到查询 API 与鉴权 token;
• 在灵境大屏里配置该 API 为数据源,请求头带 token,JSONPath 映射设备属性值;
• 轮询 5~10 秒一档,对云平台毫无压力,一小时内就能完成从 0 到上屏。

适合:没有自建物联网中台、设备已上云的项目,例如智慧农业大棚、充电桩运营场景。

三、路径二:MQTT 转 HTTP 网关

设备走自建 MQTT Broker(EMQX/Mosquitto)时,加一层薄网关把推送转成查询:

• 网关订阅设备主题,把"设备最新状态"落进 Redis/内存(设备多的落时序库);
• 对外暴露 GET /api/devices/latest 之类的只读接口;
• 大屏按 3~5 秒轮询该接口,拿到的是网关内存里的最新值,响应毫秒级;
• 越限判断也放在网关:推送时对比阈值,超限写告警表,大屏同时轮询告警接口,实现告警上墙。

这层网关两三百行代码,是自建 IoT 项目里公认性价比最高的一块砖。

四、路径三:平台侧聚合

• 设备规模上千、需要历史曲线与统计分析时,引入时序数据库做冷热分层;
• 大屏只查"最新值表 + 聚合表",历史明细交给分析工具;
• 告警、离线、恢复三类事件单独落表,支撑事件流组件与处置闭环。

五、秒级刷新的工程细节

• 别真做 1 秒刷新:人眼对 3~5 秒的更新已经感知为"实时",刷新率翻倍、压力翻四倍不划算;
• 数字要防抖:数值组件加平滑过渡,每 3 秒跳一次的数字比疯跳的更有专业感;
• 离线态可视化:设备离线时图标置灰 + 独立离线列表,别让缺数伪装成 0;
• 多组件复用一源:温湿度、压力等指标都来自同一接口时,用数据源复用避免重复请求,细节见API 对接实战;
• 图表性能:实时曲线只保留最近 N 个点,长时间运行的内存问题见ECharts 避坑指南。

三条路径总结:设备在云上走 API 直取,自建 Broker 加转换网关,规模大了做平台聚合——共同点是让大屏永远只面对简单的 HTTP 查询,复杂度留在数据侧。