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

applebomb2024-11-21 9:16

从这篇文章接着向下看：

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

这样就解决了掉线问题