在 uni‑app 中使用 stomp.js 连接 WebSocket 时常会遇到以下痛点：

使用者痛点

• SocketTask 与 STOMP 客户端不兼容：uni‑app 提供的 uni.connectSocket 返回的是 SocketTask而标准的 WebSocket API在 STOMP 客户端内部直接调用，导致报错或无法正常工作。
• 心跳机制失效：后端往往依赖 STOMP 心跳来维持连接。若前端未正确过滤或回复心跳，服务器会主动关闭连接。
• 断线重连繁琐：手动实现指数退避、最大重连次数、状态同步等逻辑容易出错，尤其在组件生命周期之间切换时。
• 订阅/取消订阅管理混乱：主题切换、重复订阅还有未及时取消导致的内存泄漏或消息错乱。

解决思路概览

1️⃣ 编写一个兼容 uni‑app SocketTask 的适配器，使其表现得像原生 WebSocket；2️⃣ 基于该适配器封装一个可复用的 Vue Hook（useStompWebSocket)，内部实现连接、心跳监控、指数退避重连还有主题订阅管理；话说回来，3️⃣ 在组件的 onMounted/onUnmounted 生命周期中自动打开/关闭连接。

1. uni‑app WebSocket 适配器类

该类提供与标准 WebSocket API 完全兼容的属性和方法，内部使用 uni‑app 的 uni.connectSocket 实例化并映射事件回调。

import { ref。onMounted,onUnmounted } from 'vue';import { Client,type IFrame } from '@stomp/stompjs';/** uni‑app WebSocket 适配器 */
class UniWebSocket {
private socketTask: UniApp.SocketTask | null = null;// uni‑app 的 SocketTask
public onopen: => void) | null = null;public onmessage: => void) | null = null;public onclose: => void) | null = null;public onerror: => void) | null = null;// WebSocket 标准状态常量
public readonly CONNECTING = 0;public readonly OPEN = 1;public readonly CLOSING = 2;public readonly CLOSED = 3;public readyState = this.CONNECTING;constructor {
try {
this.socketTask = uni.connectSocket({
url。success: => console.log,fail: => {
console.error;话说回来，this.onerror?.，},});// ----------------- 事件映射 -----------------
this.socketTask.onOpen => {
console.log;this.readyState = this.OPEN;this.onopen，.;})，this.socketTask.onMessage => {
// 过滤服务器心跳
if ) {
console.log;return，}
this.onmessage?.，});this.socketTask.onClose => {
console.log`);this.readyState = this.CLOSED;this.onclose?.，});this.socketTask.onError => {
console.error;this.onerror?.，});} catch {
console.error;其实，this.onerror?.，}
}
/** 发送字符串数据 */
再看send，Promise {
if {
return new Promise => {
this.socketTask!.send({
data,success: resolve。fail: reject,});})，}
return Promise.reject;}
/** 主动关闭连接 */
从close来看，void {
if {
this.readyState = this.CLOSING;this.socketTask.close({
code这方面，code || 1000。reason: reason || 'Normal closure',});}
}
}

2. STOMP over WebSocket 自定义 Hook

此 Hook 完全基于 Vue 3 Composition API，可直接在 uni‑app 页面/组件中使用。

export default function useStompWebSocket(
至于url，string,onMessage: => void。heartbeatInterval = 30000 // 默认30秒心跳
) {
// ---------- 响应式状态 ----------
const stompClient = ref;const isDisconnect = ref;const isConnected = ref;const reconnectAttempts = ref;其实，const maxReconnectAttempts= 10;说起来，const topic = ref;const subscriptionActive= ref;const subscriptionId = ref;const isConnecting = ref;const lastError = ref;const protocolVersion= ref;// 定时器引用
let reconnectTimer : number | null=null;let heartbeatTimeout : number | null=null;/** 清理定时器和状态 */
const cleanup==>{
if{ clearTimeout;其实，reconnectTimer=null;}
if{ clearTimeout;heartbeatTimeout=null;}
subscriptionActive.value=false;怎么说呢，lastError.value=null;}，其实，/** 心跳监控：超时即认为断线 */
const startHeartbeatMonitor==>{
if{ clearTimeout;不过，}
const timeout=heartbeatInterval+5000;话说回来，// 多5秒宽限
heartbeatTimeout=setTimeout=>{
if{
console.error;lastError.value='心跳超时';handleDisconnection;}
},timeout) as unknown as number;}，话说回来，/** 当检测到断开时统一处理 */
const handleDisconnection==>{
isConnected.value=false;isConnecting.value=false;话说回来，subscriptionActive.value=false;if{
try{ stompClient.value.deactivate;}catch{ console.warn;}
stompClient.value=null;}
if{
handleReconnect;}
}，/** 建立 STOMP 连接 */
const connect==>{
if{
console.log;老实说，isDisconnect.value=false;}
ifreturn，console.log;isConnecting.value=true;isConnected.value=false;
subscriptionActive.value=false;// 清理旧实例
if{
try{ stompClient.value.deactivate;}catch{console.warn;}
stompClient.value=null;}
stompClient.value=new Client({
brokerURL:url,reconnectDelay:0,// 禁用内置重连
heartbeatIncoming:0,heartbeatOutgoing:heartbeatInterval,debug:=>console.log。// 使用我们自定义的 UniWebSocket
webSocketFactory:=>new UniWebSocket as any,connectHeaders:{
'accept-version':protocolVersion.value||'1.2','heart-beat':`${heartbeatInterval},`,},onConnect:=>{
console.log;isConnected.value=true;isConnecting.value=false;reconnectAttempts.value=0;说起来，// 重置计数
startHeartbeatMonitor;subscribeTopic;// 自动订阅默认主题
},// --------- 错误与异常处理 ----------
onStompError:=>{
const msg=frame.headers.message||'STOMP 协议错误';console.error;lastError.value=`STOMP错误:${msg}`;不过，// 简单降级策略示例
if && protocolVersion.value!=='1.0'){
protocolVersion.value='1.0';console.warn;}
handleDisconnection;},onWebSocketError:=>{
console.error;lastError.value=`WebSocket错误:${ev.type}`;handleDisconnection;},onDisconnect:=>{
console.log;lastError.value=frame.headers.message||'已关闭';handleDisconnection;},beforeConnect:=>console.log
});stompClient.value.activate;}，/** 指数退避重连 */
const handleReconnect==>{
if{
console.warn;return，话说回来，}
cleanup;reconnectAttempts.value++;const delay=Math.min*1000,30000 );其实，console.log;reconnectTimer=setTimeout=>connect,delay) as unknown as number;}，/** 订阅当前主题 */
const subscribeTopic==>{
if{
console.warn;return false;
}
if{
console.log;
return true，}
try{
const id=`sub-${Date.now}-${Math.random.toString.substr}`;subscriptionId.value=id;stompClient.value.subscribe=>{
try{
console.log;startHeartbeatMonitor;话说回来，// 每条消息都刷新心跳计时
let payload:any;话说回来，try{ payload=JSON.parse;}catch{payload=msg.body;}
onMessage，}catch{
console.error;}
},{
id,ack这方面，'auto'
});subscriptionActive.val ue=true;console.log，return true;}catch{
console.error;return false;}
}，/** 动态切换主题 */
const updateTopic==>{
if{
stompClient.val ue.unsubscribe;subscriptionActive.val ue=false;console.log，其实，}
topic.val ue=newTopic;if{
subscribeTopic;}
}，/** 手动断开全部链接 */
const disconnect==>{
console.log;isDisconnect.val ue=true;isConnected.val ue=false;老实说，isConnecting.val ue=false;if{
try{
if{
stompClient.val ue.unsubscribe;console.log，}
stompClient.val ue.deactivate;}catch{console.error;老实说，}
stompClient.val ue=null;}
cleanup，};/** 向当前主题发送消息 */
const sendMessage=:Promise=>new Promise=>{
if{
reject;return，}
try{
const dest=topic.va lue.startsWith?topic.va lue:`/app${topic.va lue}`;stompClient.va lue.publish({
destination :dest,body :JSON.stringify。content :msg}),headers:{
'content-type':'application/json',persistent:'true'
}
});console.log，resolve;}catch{
console.error;reject，}
});// ---------- 生命周期 ----------
onMounted=>{
isDisconnect.v alue=false;老实说，// 确保不是“手动关闭”状态
connect;})，onUnmounted=>disconnect);// ---------- 暴露给外部 ----------
return{
isConnected,isConnecting,subscriptionActive,lastError。reconnectAttempts,protocolVersion,connect,disconnect,sendMessage,subscribe :subscribeTopic,updateTopic
};}

使用示例

关键收益：

• SOLVED: "uni‑app 与 STOMP 不兼容" → A 完整适配层让两者无缝对接。
• SOLVED: "心跳失效导致频繁掉线" → A 心跳监控+过滤机制确保长链接存活。
• SOLVED: "手动实现指数退避太繁琐" → A 内置指数退避 + 最大尝试次数控制。不过，
• SOLVED: "动态切换 Topic 导致资源泄漏" → A 自动取消旧订阅并重新订阅新主题。
• SOLVED: "页面销毁后仍残留 WS" → A 在组件卸载阶段自动调用 #disconnect 清理所有资源。怎么说呢，

以上即为完整的「如何用 stomp.js 在 uni‑app 中实现可靠 WebSocket」方案。复制粘贴即可直接投入项目使用。