uniapp 微信小程序接入MQTT-uniapp配置

NPM方式安装

npm i mqtt@4.1.0

安装指定版本4.1.0，目前【2024-07-09】最新版本有问题

MQTT连接示例

import mqtt from 'mqtt/dist/mqtt'

const client = mqtt.connect("wxs://mqtt.xxx.com", {
    port: '9001',
    username: '用户名',
    password: '密码',
    reconnectPeriod: 1000
});
this.client = client
client.on('connect', () => {
    console.log('connect')
});
// 自动重连
client.on('reconnect', (msg) => {
    console.log('reconnect', msg)
});
// 错误
client.on('error', () => {
    console.log('error')
});
// 断开
client.on('end', () => {
    console.log('end')
});
// 掉线
client.on('offline', (msg) => {
    console.log('offline', msg)
});
// 收到消息        
client.on('message', (topic, message) => {
    // 把arrayBuffer转成字符串
    let encodedString = String.fromCharCode.apply(null, new Uint8Array(message));// 全局发送消息
})

熄屏断连问题

目前我的解决方案是
App.vue文件中onHide时断开连接，onShow时重新初始化client。
订阅时topic记录下来，client.on(‘connect’)时遍历topic记录一一订阅

onHide(() => {
  console.log("App onHide");
  client.end();
});