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

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

ccWebsocket.ts:

import { IStompSocket } from '@stomp/stompjs'let socket: UniApp.SocketTask/*** uniapp WebSocket Polyfill* @Jim 2024/11/23*/
class WebSocketPolyfill implements IStompSocket {constructor(url) {// 创建连接this.url = urlif (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: stringget 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下能很好工作，不会丢失消息了，能自动重连。另外心跳也能正常工作了不用另建立一个线程处理