// 当前环境采用win10，HBuilderX 3.8.3 alpha，Vue2，node v16.15.0
// 安装mqtt插件，npm install mqtt@4.3.7
// 测试代码如下：
<script>
import mqtt from "mqtt"
function getNonce() {
let nonce = (new Date().getTime()).toString(16)
if (nonce.length > 8) {
nonce = nonce.substring(nonce.length - 8)
}
return nonce
}
export default {
mounted() {
this.connect()
},
methods: {
connect() {
try{
let protocol
// #ifdef H5
//h5的连接是 'ws://' + url
protocol = 'ws://'
// #endif
// #ifdef MP-WEIXIN||APP-PLUS
protocol = 'wx://'
// #endif
let url = protocol + "192.168.1.21:8083/mqtt"
let username = '******' // 屏蔽了mqtt用户名
let password = '**********' // 屏蔽了mqtt密码
let clientId = getNonce() // 生成一个随机数
let myOptions = {
connectTimeout: 5000,
username,
password,
clientId,
clean: false,
keepalive: 60
}
let client = mqtt.connect(url, myOptions)
console.log('mqtt connecting...', url, clientId, myOptions)
client.on('connect', (connack) => {
console.log('mqtt connect success...', clientId, connack)
}).on('reconnect', (error) => {
console.error("mqtt reconnect", clientId, error)
}).on('error', (error) => {
console.log('mqtt connect error...', clientId, error)
}).on('offline', () => {
console.log('mqtt offline...', clientId)
}).on('disconnect', (packet) => {
// mqtt 5.0
console.log('mqtt disconnect...', clientId)
}).on('end', () => {
console.log('mqtt end...', clientId)
}).on('close', () => {
console.log('mqtt close...', clientId)
}).on('message', (topic, payload, packet) => {
try {
let message = payload ? payload.toString() : ""
console.log("接收到消息！", clientId, topic, message)
} catch (e) {
console.error("mqtt on message...", clientId, e)
}
})
}catch(e){
console.error(e)
}
}
}
}
</script>
怪虫机器人
- 发布：2023-05-25 16:48
- 更新：2023-05-26 15:03
- 阅读：607
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Win10
HBuilderX类型： Alpha
HBuilderX版本号： 3.8.3
手机系统： Android
手机系统版本号： Android 12
手机厂商： 华为
手机机型： 华为Mate 30, 华为P9，苹果 7Plus
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
新建一个项目，采用默认模板。
安装mqtt
npm install mqtt@4.3.7
index/index.vue 加入上方测试代码
mqtt的 url、username、password 修改为个人测试环境的信息
新建一个项目，采用默认模板。
安装mqtt
npm install mqtt@4.3.7
index/index.vue 加入上方测试代码
mqtt的 url、username、password 修改为个人测试环境的信息
预期结果：
安卓、苹果手机app 能够正常连上mqtt服务器，日志显示 mqtt connect success...
安卓、苹果手机app 能够正常连上mqtt服务器，日志显示 mqtt connect success...
实际结果：
真机app无法连上mqtt服务器，日志一直显示 mqtt reconnect
只有h5端能正常连接到mqtt服务器
真机app无法连上mqtt服务器，日志一直显示 mqtt reconnect
只有h5端能正常连接到mqtt服务器
bug描述：
mqtt采用mqtt.js
HBuilderX从3.6.18 到 3.8.3 alpha版，超过一半的版本都测试过了，
mqtt 从 mqtt@3.0.0到mqtt@4.3.7也试了七八个版本，通过真机测试都无法连接，云打包安卓app后测试也无法连接。
在苹果电脑上进行几个版本测试，一样连不上。
4月份最后一次打包测试（HBuilderX3.6.18），mqtt还能正常连接。
mqtt服务端采用emqx5，4月份打包的app，目前也能正常连接到服务器，正常通讯。
之前过年前后，也出现类似问题，不过当时只是安卓app无法连接，苹果app可以连接
安卓、苹果手机都测过，都不能连接，但H5能够连接。
另外使用paho-mqtt-1.0.3.js组件，采用renderjs方式，能在安卓手机上正常连接。
也已经新建了一个全新的测试项目（基于默认模板项目），排除自身代码原因。
Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架：https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群：120594820，代表作灵感实用工具小程序
有没有一种可能是后端链接断了
怪虫机器人 (作者)
碰上一样的问题的，可以参见官方demo：https://ext.dcloud.net.cn/plugin?id=854
mqtt 支持 3.0.0, 4.1.0版本，但不支持4.3.7，其它版本没有测试过。
如果要兼容4.3.7，估计得对后面适配2的uni.connectSocket部分进行调整，增加对4.3.7版本的兼容。
主要增加了2个适配：
1、项目根路径，增加了uni-promisify-adaptor.js
main.js 在Vue2部分
import './uni-promisify-adaptor'
2、main.js 尾部增加uni.connectSocket处理
// #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
怪虫机器人 (作者)
之前发布的APP，现在也能正常使用，mqtt能够正常连接。
测试环境中，也把后端emqx的认证、acl权限关闭校验，但也是无法连接。
如果是后端连接断了，我觉得应该总有一瞬间连接成功。但这一周弄了几天，APP端一直没有连成功过。
2023-05-25 17:04