【uni-app多端】修复stmopjs下plus-websocket无心跳的问题

从这篇文章接着向下看:

uniapp plus-websocket 和stompjs连接教程 安卓ios手机端有效 - 简书

按照文章的方式,能够实现APP下stmopjs长连接。但是有一个问题,就是会频繁输出

复制代码
res-创建连接-1-

跟踪连接,会发现连接都会在大约40s后掉线断开,然后由于stompjs保活机制又进行重连。在重连过程中,对应的消息接收不到。导致出现部分消息丢失的情况。

目前解决的办法,是自己实现一个心跳逻辑,每隔指定的时间发送。就完成了连接保活。修改如下:

TypeScript 复制代码
import socket from 'plus-websocket'

class WebSocketPolyfill {
  constructor(url) {
。。。。
  connected() {
    return socket.connected
  }
}

export default WebSocketPolyfill
TypeScript 复制代码
      client = new Client({
        // #ifndef H5
        webSocketFactory() {
          if (isMp) {
            // 微信小程序
            return new Ws({
              url: amqpServerUrl,
              protocols: ['v12.stomp', 'v11.stomp', 'v10.stomp'] // ← 这是 stomp 协议的默认写法,可供参考
            })
          } else {
            appWs = new WebSocket(amqpServerUrl)
            return appWs
            // Android | IOS
          }
        },

。。。。。

const appHeartbeat = () => {
  setTimeout(() => {
    if (appWs.connected) {
      const buffer = new ArrayBuffer(1) // 创建一个1字节的ArrayBuffer
      const view = new Uint8Array(buffer)
      view[0] = 0x09 // 根据RFC6455, opcode 0x9 表示ping帧

      appWs.send(buffer)
      appHeartbeat()
    }
  }, HEARTBEAT_INTERVAL)
}

然后在onConnect后激活心跳

TypeScript 复制代码
        onConnect: () => {
          // connect to user channel....

          // #ifdef APP-PLUS
          appHeartbeat()
          // #endif
        },

这样就解决了掉线问题

相关推荐
goto_w24 分钟前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos
小宝小白32 分钟前
【vue3】黑马小兔鲜儿项目uniapp navigationStyle
uni-app
Json____12 小时前
uni-app 框架 调用蓝牙,获取 iBeacon 定位信标的数据,实现室内定位场景
uni-app·电脑·蓝牙·蓝牙信标 beacon·定位信标·停车场定位
鹅肝手握高V五色15 小时前
Wireshark入门教程:如何抓取和过滤网络数据包
websocket·网络协议·tcp/ip·http·网络安全·https·udp
CryptoPP17 小时前
深入实践:基于WebSocket的全球化金融数据实时对接方案。 马来西亚、印度、美国金融数据API
websocket·网络协议·金融
iOS阿玮18 小时前
苹果 iOS 19 曝光,你的iPhone 还能再战一年?
app·apple
网络抓包与爬虫18 小时前
Wireshark——抓包分析
websocket·网络协议·tcp/ip·http·网络安全·https·udp
仙女很美哦19 小时前
Flutter视频播放、Flutter VideoPlayer 视频播放组件精要
websocket·网络协议·tcp/ip·http·网络安全·https·udp
web_Hsir20 小时前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir20 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app