由于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 = 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下能很好工作,不会丢失消息了,能自动重连。另外心跳也能正常工作了不用另建立一个线程处理