【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
        },

这样就解决了掉线问题

相关推荐
iOS阿玮3 分钟前
别等了,今天是Xcode15时代的最后一天。
前端·app·apple
Jewel10533 分钟前
如何配置Telegram Mini-App?
前端·vue.js·app
万岳软件开发小城3 小时前
基于PHP+Uniapp的互联网医院源码:电子处方功能落地方案
开发语言·uni-app·php·软件开发·互联网医院系统源码·智慧医院app
桃花岛主7016 小时前
WebSocket是h5定义的,双向通信,节省资源,更好的及时通信
网络·websocket·网络协议
anyup1 天前
uni-app 蓝牙打印:实现数据分片传输机制
前端·uni-app·trae
fakaifa1 天前
【最新版】沃德代驾源码全开源+前端uniapp
前端·小程序·uni-app·开源·php·沃德代驾·代驾小程序
Monly211 天前
Uniapp:navigator(页面跳转)
uni-app
一一Null2 天前
Android studio—socketIO库return与emit的使用
android·java·网络·ide·websocket·网络协议·android studio
Monly212 天前
Uniapp:swiper(滑块视图容器)
uni-app
七七小报2 天前
uniapp-商城-32-shop 我的订单-订单详情和组件goods-list
uni-app