VUE集成MQTT

原创已于 2023-03-12 20:26:49 修改 · 387 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-02-17 11:21:04 首次发布

Vue 同时被 2 个专栏收录

97 篇文章

订阅专栏

uni-app

60 篇文章

订阅专栏

该代码示例展示了如何在JavaScript中安装和使用mqtt.js库来连接MQTT服务器，处理连接、消息和重连事件。它还包含了发布和订阅主题的函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装依赖

npm install mqtt@2.18.9 --save

代码集成

JS工具
mqtt-utils.js


import mqtt from "mqtt";

export default {
	MQTT_SERVER: "ws://XXXXXXX:8083/mqtt",//ws的端口是8083  TCP端口是1883
	MQTT_CONFIG: {
		username: "XXXX",
		password: "XXXXX",
		clientId: "WEB_01",
		keepAlive: 60,
		cleanSession: true,
		clear: true
	},
	mmClient: null,

	handleCon(clientId) {
		console.log('==handleCon==');
		this.mClient = mqtt.connect(this.MQTT_SERVER, this.MQTT_CONFIG);

		// mqtt连接
		this.mClient.on("connect", (e) => {
			console.log(e, "mqtt连接成功！");
			let topic1 = "device/+/send";
			// // let topic2 = "test2";
			let qos1 = 0;
			// // let qos2 = 0;
			// this.subTopic(this.mClient, [topic1, topic2], [qos1, qos2]);
			this.subTopic([topic1], [qos1]);

		});

		// 消息处理
		this.mClient.on("message", (topic, message) => {
			console.log("收到消息", topic, message);
			// let value = message.buffer
			var uint8_msg = new Uint8Array(message);
			var message = String.fromCharCode.apply(null, uint8_msg);
			console.log(message);
		})

		// 断线重连
		this.mClient.on("reconnect", (error) => {
			console.log("正在重连：", new Date().getTime(), error);
		})

		// 连接失败
		this.mClient.on("error", (err) => {
			console.log("mqtt连接失败！{}", err);
			this.mClient.end();
		})


	},

	/**
	 * 【通用】发布话题
	 *
	 * @param mClient
	 * @param topic
	 * @param qos
	 * @param msg
	 */

	pubTopic(topic, qos, msg) {
		console.log('=======pubTopic=====')
		this.mClient.publish(topic, msg, qos, err => {
			if (!err) {
				console.log("发布成功！");
			} else {
				console.log("发布失败！", err);
			}
		})
	},


	/**
	 * 【通用】订阅话题
	 *
	 * @param mClient
	 * @param topic
	 * @param qos
	 */
	subTopic(topic, qos) {
		this.mClient.subscribe(topic, qos, err => {
			if (!err) {
				console.log("订阅成功！");
			} else {
				console.log("订阅失败！", err);
			}
		})
	}
}

VUE页面集成

this.initMqtt();
MqttUtils.pubTopic("device/123456789/recive", 1, "123123");