一、安装依赖

通过查阅资料，了解到现在mqtt.js库的最新版本已经是5，但是目前应该mqtt@3.0.0版本最为稳定，我项目开发中使用的也是mqtt@3.0.0版本

npm install mqtt@3.0.0

参考插件：MQTT使用-模板项目 - DCloud 插件市场

参考文档：GitHub - mqttjs/MQTT.js: The MQTT client for Node.js and the browser

二、封装一个工具包

utils/mqtt.js

var mqtt = require('mqtt/dist/mqtt.js')

let mqttTool = {
	client: null
}

mqttTool.connect = function(params) {
	let options = {
		port: 443,
		host: params.url,
		protocol: 'wxs',
		path: '/mqtt',
		clientId: params.clientId,
		username: params.username,
		password: params.password,
		connectTimeout: 5000,
		clean: false,
		rejectUnauthorized: false,
	}
	let client = mqtt.connect(options);
	// console.log("client", client);
	mqttTool.client = client
	return client;
}

mqttTool.end = function() {
	return new Promise((resolve, reject) => {
		if (mqttTool.client == null) {
			resolve('未连接')
			console.log('App_text' + ":end 未连接")
			return;
		}
		mqttTool.client.end()
		mqttTool.client = null
		resolve('连接终止')
	})
}

mqttTool.reconnect = function() {
	return new Promise((resolve, reject) => {
		if (mqttTool.client == null) {
			resolve('未连接')
			console.log('App_text' + ":reconnect 未连接")
			return;
		}
		mqttTool.client.reconnect()
	})
}

mqttTool.subscribe = function(params) {
	return new Promise((resolve, reject) => {
		if (mqttTool.client == null) {
			resolve('未连接')
			console.log('App_text' + ":unconnect 未连接")
			return;
		}
		mqttTool.client.subscribe(params.topic, {
			qos: params.qos
		}, function(err, res) {
			console.log(err, res)
			if (!err && res.length > 0) {
				resolve('订阅成功')
				console.log('App_text' + ":subscribe success 订阅成功")
			} else {
				resolve('订阅失败')
				console.log('App_text' + ":subscribe failed 订阅失败")
				return;
			}
		})
	})
}

mqttTool.unsubscribe = function(params) {
	return new Promise((resolve, reject) => {
		if (mqttTool.client == null) {
			resolve('未连接')
			console.log('App_text' + ":unconnect 未连接")
			return;
		}
		mqttTool.client.unsubscribe(params.topic, function(err) {
			if (!err) {
				resolve('取消订阅成功')
				console.log('App_text' + ":unsubscribe success 取消订阅成功")
			} else {
				resolve('取消订阅失败')
				console.log('App_text' + ":unsubscribe failed 取消订阅失败")
				return;
			}
		})
	})
}

mqttTool.publish = function(params) {
	return new Promise((resolve, reject) => {
		if (mqttTool.client == null) {
			resolve('未连接')
			console.log('App_text' + ":unconnect 未连接")
			return;
		}
		mqttTool.client.publish(params.topic, params.message, function(err) {
			if (!err) {
				resolve(params.topic + '-' + params.message + '-发送成功')
				console.log('App_text' + ":publish success 发送成功")
			} else {
				resolve(params.topic + '-' + params.message + '-发送失败')
				console.log('App_text' + ":publish failed 发送失败")
				return;
			}
		})
	})
}

export default mqttTool

三、挂载到全局

// 从封装的工具导入
import mqtt from './until/mqtt.js'


// 将mqtt实例挂载到Vue.prototype上
Vue.prototype.$mqtt = mqtt


Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
	...App
})
app.$mount()

四、页面中使用

startConnect() {
	let params = {
		url: 需要连接的url,
		clientId: 需要连接配置的clientId,
		username: 需要连接配置的username,
		password: 需要连接配置的password,
	}

	let client = this.$mqtt.connect(params);

	client.on('connect', function(res) {
		console.log('连接成功');
        this.$mqtt.subscribe({
		    topic: 需要订阅的topic,
		    qos: 0
	    }).then((response) => {
		    console.log("订阅响应", response);
	    })
    }).on('reconnect', function(res) {
		console.log('重连', res);
	}).on('error', function() {
		console.log('报错');
	}).on('end', function() {
		console.log('断连');
	}).on('error', function(error) {
		console.log('连接失败...', error)
	}).on('end', function() {
		console.log('连接断开')
	}).on('message', (topic, message) => {
	    //如果mqtt订阅主题成功，那么这里就是当接收到自己订阅主题的处理逻辑
		try {
			let data = JSON.parse(message)

			console.log('接收推送信息:', data)
		} catch (e) {
			console.log("Caught: " + e.message)
		}
	})
				
}

连接、订阅成功控制台返回结果