uniapp中使用mqtt.js的踩坑记录

最近在uniapp的vue3.0版本中使用mqtt.js库时遇到了一些坑，经过亲身踩坑，现在把实际能够实现在uniapp的app端能够使用mqtt.js的方法步骤记录如下：

一、安装

首先安装mqtt.js,建议使用较为稳定的3.0.0版本:

npm install [email protected]

二、引入mqtt.js

import mqtt from 'mqtt/dist/mqtt.js';

三、main.js中配置兼容性

请注意一定要在main.js中增加如下代码：

// #ifndef MP
// 处理 wx.connectSocket promisify 兼容问题，强制返回 SocketTask
uni.connectSocket = (function(connectSocket) {
	return function(options) {
		console.log(options)
		options.success = options.success || function() {}
		return connectSocket.call(this, options)
	}
})(uni.connectSocket)
// #endif

四、连接并订阅使用

此处有坑，容易出现H5端和app端的兼容问题，请注意以下代码：

// 引入
import mqtt from 'mqtt/dist/mqtt.js'; 

// 定义连接地址
	const connectBaseUrl = `broker.emqx.io:8083/mqtt`;
// 定义客户端id
	const clientId = `mqtt_${Math.random().toString(16).slice(3)}`;
// 连接配置
	let myOptions = {
		clean: true,
		connectTimeout: 4000,
		reconnectPeriod: 1000,
		clientId: clientId,
		username: 'emqx_test',
		password: 'emqx_test'
	}
    
// 注意下面因为兼容性而编写的代码
   
	// #ifdef H5
	console.log('h5')
	const client = mqtt.connect(`ws://${connectBaseUrl}`, myOptions)
	//#endif

	// #ifdef APP-PLUS
	console.log('app')
	const client = mqtt.connect(`wx://${connectBaseUrl}`, myOptions)
	//#endif

	// 需要订阅的主题
	const topic = 'test';

	//成功连接后触发的回调
	client.on('connect', () => {
		console.log('已经连接成功');
		// 这里可以订阅多个主题
		client.subscribe([topic], () => {
			console.log(`订阅了主题 ${topic}`)
		})
	});

	// 当客户端收到一个发布过来的消息时触发回调
	client.on('message', function(topic, message, packet) {
		// 这里有可能拿到的数据格式是Uint8Array格式，所以可以直接用toString转成字符串
		// let data = JSON.parse(message.toString());
		console.log("返回的数据：", message)
		mqttResult.value = JSON.parse(message.toString())
	});

	// 连接断开后触发的回调
	client.on("close", function() {
		console.log("已断开连接")
	});

	/**
	 * 自定义编写的断开连接的方法
	 */
	const endMqtt = () => {
		client.end()
	}

经过以上步骤，就可以在app端使用mqtt.js连接了