Uniapp:WebSocket 重连之后累加触发 uni.onSocketOpen()

省流

  • 不要用 uni.xxx 那一套,用 socketTask = await uni.connectSocket({}) socketTask 去控制

业务逻辑描述

  1. 第一次进入应用主页,连接 WebSocket
  2. 手机熄屏之后,断开当前连接的 WebSocket
  3. 手机亮屏之后,再次进入应用后,重新连接 WebSocket 服务

问题

  • 亮屏之后,再次进入应用,WebSocket 会累加,导致我发送的心跳包:

  • 第一次熄屏亮起,会在短时间内发送两次

  • 第二次熄屏亮起,会在短时间内发送三次

  • ...累加

问题截图

问题代码

大概就是这套逻辑

用的都是 uni.xxx 这套,问题就出现在这里了

javascript 复制代码
import { handleSocketMessage } from './websocketUtils'
import Nav2Login from '@/utils/request/modelNavigateToLogin'
let socketOpen = false
let socketMsgQueue: any = []
let heartbeatTimer: any | null = null

async function startWebsocketServer() {
  if (heartbeatTimer) {
    clearInterval(heartbeatTimer)
    heartbeatTimer = null
  }
  if (socketOpen) {
    await closeWebSocket()
  }
  await uni
    .connectSocket({
      url: WS_URL,
    })
    .then((res) => {
     
    })

  /**
   * 问题:
   * https://ask.dcloud.net.cn/question/149762
   */
  uni.onSocketOpen(function (res: any) {
    socketOpen = true
    for (var i = 0; i < socketMsgQueue.length; i++) {
      sendSocketMessage(socketMsgQueue[i])
    }
    socketMsgQueue = []
  })

  /**
   * 这里会有熄屏累积次数的效果
   */
  uni.onSocketMessage(function (res) {
    console.log('收到服务器内容:' + res.data)
    handleSocketMessage(res.data)
  })
}

function sendSocketMessage(msg: any) {
  if (socketOpen) {
    uni.sendSocketMessage({
      data: msg,
    })
  } else {
    socketMsgQueue.push(msg)
  }
}

/**
 * 关闭WebSocket连接
 */
export function closeWebSocket() {
  return new Promise((resolve, reject) => {
    uni.closeSocket({
      success: function (res) {
        console.log('WebSocket关闭成功!:>>', res)
        socketOpen = false
        clearInterval(heartbeatTimer)
        heartbeatTimer = null
        console.log('清除心跳定时器')
        resolve('Close Socket Success')
      },
      fail: function (res) {
        console.log('WebSocket关闭失败!:>>', res)
        reject('Close Socket Reject')
      },
      complete: () => {
        // console.log('complete')
      },
    })
  })
}
export default startWebsocketServer

解决之后的截图

解决的代码框架,参考官方文档

typescript 复制代码
let socketTask: any = null
//  complete: (res) => {}, 一定要有
socketTask = await uni.connectSocket({
  url: WS_URL,
  complete: (res) => {},
})
socketTask.onOpen(() => {})
socketTask.onMessage((res: any) => {})
socketTask.close({
  success: (res: any) => {},
  fail: (res: any) => {},
})
相关推荐
贝塔实验室2 小时前
频偏估计方法--快速傅里叶变换(FFT)估计法
网络协议·算法·数学建模·动态规划·信息与通信·信号处理·傅立叶分析
间彧2 小时前
TCPDump诊断网络故障案例-微服务集群间歇性通信失败排查
网络协议
间彧2 小时前
Tcpdump详解与项目实战:从基础到高级的网络抓包技术
网络协议
2501_916008893 小时前
iOS 26 性能分析深度指南 包含帧率、渲染、资源瓶颈与 KeyMob 协助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
jz_ddk4 小时前
[LVGL] 从0开始,学LVGL:基础构建篇 - 掌握UI的核心构建块
linux·网络协议·ui·rpc·嵌入式·gui·lvgl
iOS阿玮5 小时前
喜欢做马甲包的有福了~现在多了一招续费方式!
uni-app·app·apple
饥饿的半导体5 小时前
网络协议工程 - eNSP及相关软件安装 - [eNSP, VirtualBox, WinPcap, Wireshark, Win7]
网络·网络协议·wireshark
沐浴露z7 小时前
一篇文章讲清 UPD协议 与 TCP协议
网络·网络协议·tcp/ip·计算机网络
_AaronWong8 小时前
一键搞定UniApp WiFi连接!这个Vue 3 Hook让你少走弯路
前端·微信小程序·uni-app
IPIDEA全球IP代理8 小时前
跨境卖家该选静态IP还是动态IP?
网络·网络协议·tcp/ip