在 Vue Composition API 中处理 WebSocket 连接需统一纳入响应式系统：用 ref 管理状态与消息，封装支持自动重连的连接逻辑，加入心跳机制防断连，并在组件卸载时严格清理资源。

在 Vue Composition API 中处理 WebSocket 连接，核心是把连接生命周期、状态响应、消息收发和资源清理全部纳入响应式系统统一管理，而不是零散调用原生 API。

用 ref 管理连接状态和数据

WebSocket 的连接状态（如 disconnected / connecting / connected）和接收的消息列表必须用 ref 或 reactive 声明，否则组件无法自动更新视图。比如：

• status = ref('disconnected') —— 让 UI 能响应式显示“正在重连中”或“已断开”
• messages = ref([]) —— 每次 messages.value.push(...) 都会触发列表渲染更新
• ws = ref(null) —— 方便在 send / close 时安全访问 socket 实例

封装连接逻辑并支持自动重连

原生 new WebSocket() 不带重连能力，生产环境必须补上。常见做法是：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 监听 onclose 和 onerror，触发重试逻辑，用 setTimeout 控制间隔
• 限制重连次数（如最多 3 次），避免无限循环；失败后可 emit 错误事件供上层处理
• 重连前检查 ws.value?.readyState !== WebSocket.CONNECTING，防止重复发起

加入心跳机制防服务端踢出

很多 WebSocket 服务端会在空闲一段时间后主动关闭连接。解决办法是定时发心跳：

立即学习“前端免费学习笔记（深入）”；

• 连接成功后启动 setInterval，每 30 秒发一次 { type: 'ping' }
• 收到 pong 或 ping 类型消息直接忽略，不进业务逻辑
• 组件卸载时记得 clearInterval，避免内存泄漏

严格绑定组件生命周期做清理

忘记清理会导致报错或资源占用。关键点有：

• 必须在 onUnmounted（或 onBeforeUnmount）里调用 ws.value?.close()
• 关闭前清空 onmessage 回调引用，尤其当回调里用了 this 或闭包变量时
• 如果用了自定义事件监听器（如通过 emitter.on 订阅消息），也要一并移除