用Spring Boot + MQTT + EMQX搭建一个简易的物联网设备状态监控面板（附前端代码）

基于Spring Boot与MQTT协议的物联网监控系统实战指南在万物互联的时代背景下设备状态监控已成为工业自动化、智能家居等领域的核心需求。本文将手把手带您实现一个完整的物联网监控系统从传感器数据采集到可视化展示的全链路开发。1. 系统架构设计与技术选型典型的物联网监控系统包含三个核心组件设备端数据生产者、服务端数据处理中心和客户端数据消费者。我们采用的技术栈如下通信协议MQTTMessage Queuing Telemetry Transport专为物联网设计的轻量级协议服务端Spring Boot 2.5 EMQX 4.3开源MQTT broker数据存储MySQL 8.0关系型数据 InfluxDB 2.0时序数据前端展示Vue 3 ECharts 5提示MQTT协议采用发布/订阅模式相比HTTP轮询更适合物联网场景能显著降低网络带宽消耗。系统工作流程示意图[设备端] --MQTT发布-- [EMQX Broker] --MQTT订阅-- [Spring Boot服务] ↑ ↓ [传感器数据] [WebSocket推送] -- [Vue前端]2. EMQX Broker的安装与配置EMQX作为MQTT消息代理是整个系统的通信枢纽。以下是Windows环境下的安装步骤从EMQX官网下载4.3.10版本ZIP包解压到D:\emqx目录命令行执行启动命令cd D:\emqx\bin emqx start访问管理控制台http://localhost:18083默认账号admin/public关键配置项说明配置项推荐值说明listener.tcp.external1883MQTT TCP端口listener.ws.external8083WebSocket端口listener.http.mgmt18083管理控制台端口3. Spring Boot服务端实现3.1 项目初始化与依赖配置创建Spring Boot项目并添加关键依赖dependencies !-- MQTT集成 -- dependency groupIdorg.springframework.integration/groupId artifactIdspring-integration-mqtt/artifactId /dependency !-- 数据持久化 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-data-jpa/artifactId /dependency dependency groupIdcom.influxdb/groupId artifactIdinfluxdb-client-java/artifactId version3.1.0/version /dependency /dependencies3.2 MQTT连接配置类创建配置类管理MQTT连接参数Configuration ConfigurationProperties(prefix mqtt) public class MqttConfig { private String brokerUrl; private String clientId; private String username; private String password; Bean public MqttConnectOptions mqttConnectOptions() { MqttConnectOptions options new MqttConnectOptions(); options.setServerURIs(new String[]{brokerUrl}); options.setUserName(username); options.setPassword(password.toCharArray()); options.setAutomaticReconnect(true); options.setCleanSession(false); return options; } }3.3 消息订阅服务实现实现消息接收与处理逻辑Service public class MqttSubscriber implements MqttCallback { private static final Logger logger LoggerFactory.getLogger(MqttSubscriber.class); Autowired private SensorDataRepository dataRepository; Override public void messageArrived(String topic, MqttMessage message) { String payload new String(message.getPayload()); logger.info(Received message from {}: {}, topic, payload); // 解析并存储传感器数据 SensorData data parseSensorData(payload); dataRepository.save(data); // 推送到WebSocket webSocketHandler.broadcast(data); } // 其他回调方法实现... }4. 数据持久化方案针对物联网数据特点我们采用混合存储策略关系型数据存储MySQLEntity public class Device { Id private String deviceId; private String name; private String location; Enumerated(EnumType.STRING) private DeviceStatus status; }时序数据存储InfluxDBpublic class SensorDataService { private final InfluxDBClient influxDB; public void writeData(SensorData data) { Point point Point.measurement(sensor_data) .addTag(deviceId, data.getDeviceId()) .addField(temperature, data.getTemperature()) .addField(humidity, data.getHumidity()) .time(data.getTimestamp(), WritePrecision.MS); influxDB.writePoint(point); } }存储策略对比特性MySQLInfluxDB数据模型关系型时序型写入性能中等极高查询复杂度灵活针对时序优化适用场景设备元数据传感器读数5. 前端可视化实现基于Vue 3和ECharts构建实时监控面板template div classdashboard div classchart-container line-chart :datatemperatureData title温度变化曲线/ line-chart :datahumidityData title湿度变化曲线/ /div device-status-panel :devicesdevices/ /div /template script import { onMounted, ref } from vue; import SockJS from sockjs-client; export default { setup() { const temperatureData ref([]); const socket new SockJS(/api/ws); socket.onmessage (event) { const data JSON.parse(event.data); temperatureData.value.push({ time: data.timestamp, value: data.temperature }); }; return { temperatureData }; } }; /script6. 系统部署与性能优化6.1 容器化部署方案使用Docker Compose编排服务version: 3 services: emqx: image: emqx:4.3 ports: - 1883:1883 - 8083:8083 backend: build: ./backend depends_on: - emqx - mysql environment: MQTT_BROKER_URL: tcp://emqx:1883 frontend: build: ./frontend ports: - 80:80806.2 性能优化技巧MQTT QoS选择设备状态更新使用QoS 0最高性能关键控制指令使用QoS 1平衡可靠性与性能数据采样策略// 采样间隔控制 Scheduled(fixedRate 5000) public void sampleData() { // 每5秒采集一次数据 }前端数据聚合function aggregateData(rawData, interval) { // 按时间间隔聚合原始数据 }7. 常见问题排查指南在实际部署过程中可能会遇到以下典型问题连接不稳定检查网络延迟ping测试调整KeepAlive间隔建议30-60秒消息堆积-- 监控EMQX消息堆积 SELECT COUNT(*) FROM mqtt_msg;数据不一致实现消息去重机制添加数据校验逻辑在最近的一个智能农业项目中这套架构成功支撑了200传感器节点的实时监控。关键发现是合理设置QoS级别能显著降低系统负载——将大部分传感器的QoS从1降为0后服务器CPU使用率下降了40%。