介绍:
MQTT 协议的全称是 Message Queuing Telemetry Transport,翻译为消息队列传输探测,它是 ISO 标准下的一种基于发布 - 订阅模式的消息协议,它是基于 TCP/IP 协议簇的,它是为了改善网络设备硬件的性能和网络的性能来设计的。
小结:MQTT有着发布跟订阅两种模式。
模式:假设我跟你还有B是wx好友关系,但是你跟B不是,那么有天我群发了一个"中秋节快乐",这就是发布,你跟B接收到了消息,这就是订阅(个人想法,不喜勿喷)。
MQTT使用
方法一:
npm i mqtt
/**
*@author ahuan
*@data 2023/10/31 17:11
**/
import mqtt from "mqtt";
class mqttHandle {
static url; // mqtt地址
static subscribe; // 订阅地址
static client; // mqtt公共变量
static sendSubscribe; // 发布的主题
logs;
// 接收初始化数据
constructor(obj) {
let {url, subscribe, sendSubscribe , logs} = obj;
// 赋值
this.subscribe = subscribe;
this.sendSubscribe = sendSubscribe;
this.url = url;
this.logs = logs;
this.initMQTT();
}
// 初始化mqtt
initMQTT() {
const options = {
clean: true, // true 清除会话, false 保留会话
//mqtt客户端的id
clientId: "remove_" + Math.random().toString(16).substr(2, 8),
connectTimeout: 4000, // 超时时间
}
this.client = mqtt.connect(this.url, options);
// 连接失败回调函数
this.client.on("error", (error) => {
console.log(error)
});
// 连接成功回调函数
this.client.on("reconnect", (error) => {
console.log(error)
});
this.linkMQTT();
}
// 取消订阅
unsubscribes() {
this.client.unsubscribe(this.subscribe, (error) => {
if (!error) {
console.log(this.subscribe, "取消订阅成功");
} else {
console.log(this.subscribe, "取消订阅失败");
}
})
}
// 结束链接
over() {
if (this.client.end) {
this.client.end();
}
}
// 订阅主题
linkMQTT() {
this.client.on("connect", (error) => {
this.client.subscribe(this.subscribe, (error) => {
if (!error) {
console.log("订阅成功")
} else {
console.log("订阅失败")
}
})
this.getMessage();
})
}
// 发布订阅信息
setMessage(val) {
this.client.publish(this.sendSubscribe, JSON.stringify(val));
}
// 接受订阅信息
getMessage() {
this.client.on("message", (topic, message) => {
console.log("收到信息", this.uint8ArrayNewValue(message))
message = this.uint8ArrayNewValue(message);
this.logs.push(message);
})
}
// 解码Uint8Array
uint8ArrayNewValue(val) {
return String.fromCharCode.apply(null, new Uint8Array(val));
}
}
export default mqttHandle;
MQTT的方法
1.Connect。等待与服务器建立连接。
2.Disconnect。等待MQTT客户端完成所做的工作,并与服务器断开TCP/IP会话。
3.Subscribe。等待完成订阅。
4.UnSubscribe。等待服务器取消客户端的一个或多个topics订阅。
5.Publish。MQTT客户端发送消息请求,发送完成后返回应用程序线程。
属性说明keepalive单位为秒,数值类型,默认为 60 秒,设置为 0 时禁止。用于解决半连接问题,在该时间内是否接收两次传输clientId默认为 ‘mqttjs_’ + Math.random().toString(16).substr(2, 8),可自定义修改,字符串类型username认证用户名,如果 Broker 要求用户名认证的话,请设置该值password认证密码,如果 Broker 要求密码认证的话,请设置该值timeout 连接超时时长,收到 CONNACK 前的等待时间,单位为毫秒,默认 30000 毫秒
方法二:
使用mqttws31.min.js
'http://beefindtech.com/subservice/mqtt_new/mqttws31.min.js'
通过webpack引入mqttws31.js /在index.html中引入
/**
*@author ahuan
*@data 2023/11/2 9:06
**/
class MqttPaho {
static hostname; // mqtt地址
static subscribe; // 订阅地址
static client; // mqtt公共变量
static sendSubscribe; // 发布的主题
static port;
keepAlive = 60;
timeout = 30;
ssl = false;
static clientId;
cleanSession = true;
qos = 0;
state = false; // 是否连接成功
header;
logs;
deviceStatus = false; // 是否调用设备基本信息接口
constructor(obj, f) {
let {hostname, subscribe, sendSubscribe, port, logs, clientId} = obj;
this.hostname = hostname;
this.subscribe = subscribe;
this.sendSubscribe = sendSubscribe;
this.port = port;
this.logs = logs;
this.clientId = clientId + new Date().getTime();
// 创建MQTT客户端实例
this.client = new Paho.MQTT.Client(this.hostname, this.port, this.clientId);
// 连接MQTT
this.linkMQTT(f);
}
// 连接MQTT
linkMQTT(f) {
let that = this;
let options = {
invocationContext: {
host: that.hostname,
port: that.port,
path: that.client.path,
clientId: that.clientId
},
timeout: that.timeout,
keepAliveInterval: that.keepAlive,
cleanSession: that.cleanSession,
useSSL: that.ssl,
onSuccess: () => {
that.onConnect(that, f);
},
onFailure: (error) => {
alert("连接失败")
}
}
that.client.connect(options);
// 配置链接丢失事件监听
that.client.onConnectionLost = that.onConnectionLost;
// 配置消息回传事件
that.client.onMessageArrived = (msg) => {
that.onMessageArrived(that, msg)
};
}
// 连接成功回调
onConnect(that, f) {
that.client.subscribe(that.subscribe, {
qos: Number(that.qos)
})
if (f) {
f();
}
that.state = true;
}
// 丢失连接回调
onConnectionLost(responseObject) {
if (responseObject.errorCode !== 0) {
Message.error("连接丢失:" + responseObject.errorMessage);
window.location.reload();
}
}
// 收到消息的回调
onMessageArrived(that, message) {
console.log("收到回传消息" + message.payloadString);
that.logs.push({
topic: that.header,
value: that.deviceStatus ? that.deviceInfo(message.payloadString) : message.payloadString
});
}
// 发送消息
setMessage(msg) {
if (msg) {
console.log('[mqtt send]' + msg);
let message = new Paho.MQTT.Message(msg + ' 2>&1');
console.log(this.sendSubscribe)
console.log(this.subscribe)
message.destinationName = this.sendSubscribe;
this.header = this.sendSubscribe;
this.client.send(message);
}
}
// 取消订阅
cancelYourSubscription() {
this.client.unsubscribe(this.subscribe, function (error) {
if (error) {
console.log(error)
} else {
console.log('已取消订阅')
}
})
}
}
export default MqttPaho;
有些变量是我业务中才需要用到的。logs用于接收mqtt订阅收到的信息,使用vue响应式变量可以直接触发页面更新。