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/mqtt
username: admin
password: public
client-id: MQTT-CLIENT-DEV2
cleanSession: true
reconnect: true
timeout: 100
keepAlive: 80
defaultTopic: pop
defaultTopics: mqtt
serverTopic: mqtt
isOpen: true
qos: 0
qoss: 0,0