MQTT（Message Queuing Telemetry Transport）作为一种轻量级、开放、灵活、简单、易于实现的通信协议。它基于发布/订阅（Publish/Subscribe）模式的消息传输协议，在上位机和硬件设备间通信时经常用到。虽然在嵌入式软件一般使用C++来编码，但是难免有web端直接与设备交互的应用场景，本文将介绍mqtt本地服务部署和基于Vue的web端应用使用mqtt的全过程。
mqtt部署
EMQX（Erlang MQTT Broker）是一个用于支持 mqtt 的开源消息代理软件，这里我们用他来作为本地的mqtt 服务器。可以从这里下载，运行步骤如下
安装步骤
- 在
emqx的bin文件夹下运行emqx start
- 进入服务端可视化面板
http://127.0.0.1:18083
- 下载
mqttx，这是mqtt的客户端工具，在调试的时候比较方便和清楚。下载。新建连接，连接到我们刚才启动的服务上。
- 测试一下是否连接上
注意事项
-
运行
emqx报错、启动不了
原因可能是emqx文件夹所在的路径有中文或空格，导致服务不能启动。 -
服务启动后控制面板报错
url not found
原因是服务端口被占用了，emqx默认监听的是8081端口，找到下面这个文件，把监听的端口改成空闲的端口即可。
这里改成了8089
Vue连接mqtt
- 安装mqtt的依赖
npm install mqtt
- 使用mqtt.js来建立MQTT连接并监听订阅。以下是一个简单的Vue组件示例：
<template><div id="app"></div>
</template><script>
import mqtt from "mqtt";
import * as mqttUtils from "./utils/mqtt";export default {name: "App",data() {return {config: {username: "admin",password: "123456",clientId: "code_dev_ui" + new Date().getTime(),keepAlive: 60,cleanSession: true,clear: true,},client: null,brokerUrl: "ws://localhost:8083/mqtt",topics: ["mqtt/#"],},mounted() {this.handleConnection();},methods: {/*** 建立连接*/handleConnection() {var client = mqtt.connect(this.brokerUrl, this.config);this.client = client;// 保存至全局this.$store.dispatch("connectSucc", client);client.on("connect", (e) => {console.log(e, "mqtt连接成功！");mqttUtils.sub(client, this.topics, 0);});// 消息处理client.on("message", (topic, message) => {var text = new TextDecoder().decode(message);const info = eval("(" + text + ")");console.log("收到消息app：", topic, info);this.mqttControl(topic, info);});// 断线重连client.on("reconnect", (error) => {console.log("正在重连：", new Date().getTime(), error);});// 连接失败client.on("error", (err) => {console.log("mqtt连接失败！{}", err);client.end();});},/*** mqtt消息接收 事件回调*/mqttCallBack(topic, info) {console.log(topic,info);},
};
</script>3.Java后端连接使用mqtt配置如下
mqtt:hostUrl: ws://localhost:8083/mqttusername: adminpassword: publicclient-id: MQTT-CLIENT-DEV2cleanSession: truereconnect: truetimeout: 100keepAlive: 80defaultTopic: popdefaultTopics: mqttserverTopic: mqttisOpen: trueqos: 0qoss: 0,0
