【vue3+Typescript】unapp+stompsj模式下替代plus-websocket的封装模块

由于plus-websocket实测存在消息丢失的问题,只能寻找替代的方案,看文章说使用原生的即可很好的工作。而目前在stompjs里需要使用websocket类型的封装模块,看了下原来提供的接口,采用uniapp原生的websocket模式,对原模块进行了重新封装,最终单元模块如下:

ccWebsocket.ts:

TypeScript 复制代码
import { IStompSocket } from '@stomp/stompjs'

let socket: UniApp.SocketTask

/**
 * uniapp WebSocket Polyfill
 * @Jim 2024/11/23
 */
class WebSocketPolyfill implements IStompSocket {
  constructor(url) {
    // 创建连接
    this.url = url

    if (socket) {
      socket.onClose = () => {} // 清理侦听
      socket.close({}) // 正常关闭
    }

    socket = uni.connectSocket({
      url,
      success: (res) => {
        console.log('连接创建成功:', res)
      },
      fail: (err) => {
        console.error('连接创建失败:', err)
      }
    })

    socket.onOpen((res) => {
      console.log('连接已开启', res)
      this.onopen(res)
    })

    socket.onClose((res) => {
      console.log('连接已关闭', res)
      this.onclose(res)
    })

    socket.onError((res) => {
      console.log('连接错误', res)
      this.onclose(res) // 出错断开重连,因为uniapp原生onclose监听不到
    })

    socket.onMessage((res) => {
      this.onmessage(res)
    })
  }

  url: string
  get readyState(): number {
    return (socket as any).readyState
  }

  /**
   * 连接开启回调,会被StompHandler接管
   */
  onopen(res) {}

  /**
   * 连接关闭回调,会被StompHandler接管
   */
  onclose(res) {}

  /**
   * 连接异常回调,会被StompHandler接管
   */
  onerror(res) {}

  /**
   * 接收消息回调,会被StompHandler接管
   */
  onmessage(res) {}

  /**
   * 发送消息
   */
  send(data) {
    if (socket) {
      socket.send({
        data,
        success: () => {
          // console.log('消息发送成功:', data)
        },
        fail: (err) => {
          console.error('消息发送失败:', err)
        }
      })
    }
  }

  /**
   * 关闭连接
   */
  close() {
    if (socket) {
      socket.close({
        success: () => {
          console.log('连接关闭成功')
        },
        fail: (err) => {
          console.error('连接关闭失败:', err)
        }
      })
    }
  }

  /**
   * 检查是否已连接
   */
  connected() {
    const nativeSocket = socket as any
    // console.log('检查连接状态:', nativeSocket.readyState)
    return socket && nativeSocket.readyState === 1
  }
}

export default WebSocketPolyfill

实测在IOS和Android下能很好工作,不会丢失消息了,能自动重连。另外心跳也能正常工作了不用另建立一个线程处理

相关推荐
网络安全工程师老王1 小时前
Java Agent 注入 WebSocket 篇
websocket·网络安全·信息安全·渗透测试
有什么东东8 小时前
山东大学软件学院创新项目实训开发日志(20)之中医知识问答自动生成对话标题bug修改
java·vue·bug·springboot
掘金-我是哪吒8 小时前
分布式微服务系统架构第119集:WebSocket监控服务内部原理和执行流程
分布式·websocket·微服务·架构·系统架构
络78 小时前
IDEA导入并启动若依项目步骤(SpringBoot+Vue3)
java·spring boot·mysql·vue·intellij-idea
掘金-我是哪吒11 小时前
分布式微服务系统架构第120集:专业WebSocket鉴权
分布式·websocket·微服务·云原生·架构
前端大白话13 小时前
前端人速码!10个TypeScript神仙技巧,看完直接拿捏项目实战
前端·javascript·typescript
高木的小天才1 天前
鸿蒙中的并发线程间通信、线程间通信对象
前端·华为·typescript·harmonyos
桃花岛主701 天前
WebSocket是h5定义的,双向通信,节省资源,更好的及时通信
网络·websocket·网络协议
_十六1 天前
看完就懂!用最简单的方式带你了解 TypeScript 编译器原理
前端·typescript
新时代农民工--小明1 天前
从0开始搭建一套工具函数库,发布npm,支持commonjs模块es模块和script引入使用
前端·javascript·typescript·npm·node.js