uni-app mqtt连接在H5下可以正常重连 在APP下无法重连

uni-app mqtt连接在H5下可以正常重连 在APP下无法重连

开发环境 版本号 项目创建方式
Windows win10专业版 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10专业版

HBuilderX类型：正式

HBuilderX版本号：3.1.22

手机系统：Android

手机系统版本号：Android 11

手机厂商：三星

手机机型：N20U

页面类型：vue

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```html
<template>
<view class="content">
<button [@click](/user/click)="connect" type="primary">connect</button>
<view class="log">
<view v-for="(log,index) in logs" class="" :key="index">
{{log}}
</view>
</view>
</view>
</template> 
<script>
export default {
data() {
return {
title: 'Hello',
logs: []
}
},
methods: {
connect() {
var self = this
self.logs.push('connect')
var mqtt = require('mqtt/dist/mqtt.js')
// #ifdef H5
var client = mqtt.connect('ws://myserver:8083/mqtt')
// #endif
// #ifdef MP-WEIXIN||APP-PLUS
var client = mqtt.connect('wx://myserver:8083/mqtt')
// #endif
client.on('connect', function() {
self.logs.push('on connect')
client.subscribe('presence', function(err) {
if (!err) {
client.publish('presence', 'hello mqtt')
}
})
}).on('reconnect', function() {
self.logs.push('on reconnect')
}).on('error', function() {
self.logs.push('on error')
}).on('end', function() {
self.logs.push('on end')
}).on('message', function(topic, message) {
console.log(message)
self.logs.push(message.toString())
})
}
}
}
</script> 
<style>
.content {
text-align: center;
height: 400upx;
word-break: break-all;
}
</style>

操作步骤：

可以直接导入 https://ext.dcloud.net.cn/plugin?id=854 到hbilderX中，发布在H5和APP，分别点击界面中的connect，而后在服务器端剔除新连接

预期结果：

正常情况下会有reconnect打印出来，说明重连成功

实际结果：

H5下可以正常打印log，但是在APP（安卓）下无法打印

bug描述：

使用mqtt库和示例代码，发布在h5时， 测试方式： 点击connect连接后，在MQTT服务器端主动剔除新连接名（模拟掉线的情况），H5下可以瞬间打出reconnect的log，但是在APP下没有任何反应。


更多关于uni-app mqtt连接在H5下可以正常重连 在APP下无法重连的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app mqtt连接在H5下可以正常重连 在APP下无法重连的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在APP环境下MQTT重连失败的问题，主要与uni-app的APP平台特性有关。以下是关键原因和解决方案：

核心问题： APP平台使用wx://协议连接MQTT时，底层实际使用的是uni-app的WebSocket实现，这与H5环境的标准WebSocket存在差异。当连接异常断开时，APP平台的WebSocket可能不会触发标准的重连事件。

解决方案：

  1. 使用uni-app原生WebSocket替代mqtt.js 推荐使用uni-app内置的uni.connectSocket API，它提供了更好的跨平台兼容性：

    // 替换mqtt.connect为uni.connectSocket
uni.connectSocket({
  url: 'wss://myserver:8083/mqtt',
  success: (res) => {
    console.log('连接成功')
  },
  fail: (err) => {
    console.log('连接失败', err)
  }
})

  2. 如果必须使用mqtt.js，需要修改连接方式 在APP平台使用TCP连接而非WebSocket：

    // #ifdef APP-PLUS
var client = mqtt.connect('tcp://myserver:1883')
// #endif

  3. 手动实现重连机制 添加自定义重连逻辑：

    let reconnectTimer = null
const MAX_RECONNECT_ATTEMPTS = 5
let reconnectAttempts = 0

client.on('close', function() {
  self.logs.push('连接关闭')
  if (reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
    reconnectTimer = setTimeout(() => {
      self.logs.push('尝试重连...')
      client.reconnect()
      reconnectAttempts++
    }, 2000)
  }
})

// 在组件销毁时清除定时器
onUnmounted(() => {
  if (reconnectTimer) clearTimeout(reconnectTimer)
})

  4. 检查APP权限配置 在manifest.json中确保网络权限正确：

    {
  "app-plus": {
    "distribute": {
      "android": {
        "permissions": [
          "<uses-permission android:name=\"android.permission.INTERNET\"/>"
        ]
      }
    }
  }
}
回到顶部