[寫在前面]
官網(wǎng)：https://github.com/mqttjs/MQTT.js
...等等再寫...
[版本明細]
"vue": "2.6.10",
"vue-router": "3.0.6",
"vuex": "3.1.0"
"mqtt": "^5.8.1",
"crypto-js": "^4.2.0",
"electron": "^13.6.9",
"electron-devtools-installer": "^3.1.0",
[vue.config.js]
mqtt內(nèi)部使用 ES6+ 的語法，使用過程中可能存在無法解析的情況，導致項目啟動報錯鸦概，需要在‘vue.config.js’中增加配置 transpileDependencies: ["mqtt"]
Ps. transpileDependencies 是一個Vue CLI 的配置選項枕磁，用于制定需要被轉(zhuǎn)譯的依賴包啄育。在Vue項目中，有些依賴包可能是用了ES6+的語法玖翅，而一些低版本的瀏覽器不支持這些語法脚曾，因此需要將這些依賴包轉(zhuǎn)譯成ES5語法东且，以便在低版本瀏覽器中正常運行。
[接口數(shù)據(jù)]
- getMqttConnectInfo
返回值：
data: {
host: "mqtt.xxxx.net", // "mqtt域名",
port: 8084, // "mqtt端口",
secretKey: "mmmmmmm", //"mqtt密鑰本讥，mqtt密碼 = md5(clientId,secretKey) ",
timestamp: 1758796, // "mqtt服務器時間戳",
token: "tokentokentoke token", //"clientid = token|sighmethod=md5,timestamp=nowdate ",
topic: "/message/yyyy", //"訂閱主題",
username: "username", //"mqtt用戶名",
},
[開始啦]
mqtt.js：
import mqtt from "mqtt";
import crypto from "crypto-js";
class MQTT {
url = ""; // mqtt地址
topic = ""; //
token = ""; //
secretKey = "";
username = "";
password = ""; //密碼
// 初始化類實例
constructor(params) {
console.log("mqtt實例", params);
this.topic = params.topic; // 訂閱的topic
this.token = params.token;
this.secretKey = params.secretKey;
this.url = params.url;
this.username = params.username;
this.password = params.password;
}
//初始化mqtt
init(config) {
const connectUrl = this.url || "wss://mqtt.djcps.com:8084/mqtt";
const token = this.token; //token
const username = this.username; // 用戶名
const secretKey = this.secretKey; //密鑰
//生成clientid (注意時間戳使用當前時間的珊泳，不要使用后端返回的，會導致密碼失敗)
var clientId = token + "|" + "signmethod=hmacmd5,timestamp=" + Date.now();
//生成password (這里使用HmacMD5加密囤踩， 沒有使用普通的md5)
var password = crypto.HmacMD5(clientId, secretKey).toString();
const options = {
clean: true,
protocolVersion: 4,
protocolId: "MQTT",
rejectUnauthorized: false,
connectTimeout: config.connectTimeout,
reconnectPeriod: config.reconnectPeriod,
clientId: clientId,
username: username,
password: password,
keepalive: 60,
// 其他
// protocol: "ws",
// host: this.url,
// ws: 8084,
// wss: 8084,
// port: 8008,
// endpoint: "/mqtt",
};
// const connectUrl = `${options.protocol}://${options.host}:${options.port}${options.endpoint}`;
// 使用地址鏈接
this.client = mqtt.connect(connectUrl, options);
// 消息處理
this.client.on("message", (topic, message) => {
let mqData = JSON.parse(message.toString());
console.log("收到消息", topic, message, mqData);
//接收消息
if (config.messageCallback) {
config.messageCallback(topic, mqData);
}
});
// 重連處理
this.client.on("reconnect", (error) => {
console.log("正在重連:", error);
});
// 鏈接失敗
this.client.on("error", (error) => {
console.log("鏈接失敗", error);
});
}
//取消訂閱
unsubscribes() {
this.client.unsubscribe(this.topic, (error) => {
if (!error) {
console.log("取消訂閱成功");
} else {
// console.log('取消訂閱失敗');
}
});
}
//連接
link() {
this.client.on("connect", (con) => {
let qosValue = this.qos;
this.client.subscribe(this.topic, { qosValue }, (error, res) => {
if (!error) {
console.log("訂閱成功");
} else {
console.log("訂閱失敗");
}
});
});
}
// // 發(fā)送信息
// SendMessage(topic, sendMsg) {
// let options = this.qos;
// this.client.publish(
// "rscu/sensor/exterior/up/id",
// sendMsg,
// options,
// (err, a) => {
// if (!err) {
// console.log("發(fā)送信息成功");
// // this.$message.success("發(fā)送信息成功");
// } else {
// console.log("發(fā)送信息失敗");
// }
// }
// );
// }
// //收到的消息
// get(callback) {
// this.client.on("message", callback);
// }
//結(jié)束鏈接
over() {
this.client.end();
console.log("結(jié)束鏈接");
}
}
export default MQTT;
使用：
import MQTT from "./mqtt";
created() {
this.startMqtt();
this.scanner = new Scanner();
console.log(this.scanner);
this.scanner.listener(this.scannerAdd);
},
destroyed() {
this.endMqtt();
this.PublicMqtt = null;
this.scanner.end();
},
methods: {
// 連接mqtt
startMqtt() {
const _machineInfo = JSON.parse(localStorage.getItem("machineInfo"));
Api.get_mqttConnectInfoNoAuth(_machineInfo.deviceId)
.then((res) => {
console.log("請求token", res);
if (res.success) {
const mqttConfig = res.data;
mqttConfig.url =
"wss://" + mqttConfig.host + ":" + mqttConfig.port + "/mqtt";
//設置訂閱地址
this.PublicMqtt = new MQTT(mqttConfig);
//初始化mqtt
this.PublicMqtt.init({
reconnectPeriod: 5000, //重連時間間隔
connectTimeout: 5000,
messageCallback: this.getMqttMessage, // 接收消息
});
//鏈接mqtt
this.PublicMqtt.link();
} else {
console.log("未連接芯片");
}
})
.catch((err) => {
console.log(err);
})
.finally(() => {});
},
getMqttMessage(topic, message) {
console.log("接收到消息", topic, message);
},
// 斷開鏈接
endMqtt() {
if (this.PublicMqtt) {
this.PublicMqtt.unsubscribes();
this.PublicMqtt.over();
}
},
// 發(fā)送信息 監(jiān)測有沒有鏈接 沒有彈框
// send(topic, message) {
// console.log("send方法被觸發(fā)", topic, message);
// if (this.PublicMqtt) {
// let mqttPayload = JSON.parse(message);
// mqttPayload.dynamicType = "";
// message = JSON.stringify(mqttPayload);
// this.PublicMqtt.SendMessage(topic, message);
// } else {
// this.$message.error("尚未連接");
// }
// },
}
其他
- 加密方式有 js-md5 ts-md5 crypto.HmacMD5旨椒，這里使用最后一個
//js使用
var key = md5('hello');
console.log("加密后："key) //加密后：5d41402abc4b2a76b9719d911017c592
//ts使用
var key = Md5.hashStr('hello');
console.log("加密后："key) //加密后：5d41402abc4b2a76b9719d911017c592
crypto.HmacMD5(clientId, secretKey).toString();
- 獲取到mqtt消息之后晓褪，需要通過 JSON.parse 進行處理堵漱，直接打印消息無法獲取
let mqData = JSON.parse(message.toString());
- 如果有如下報錯， 可能是生成密鑰的時候涣仿，時間戳不是當前時間戳導致的
mqtt Connection refused: Bad username or password
