vue 3 中用自定义 hook usewebsocket 封装 websocket 连接、重连、收发消息及生命周期管理，返回响应式状态和方法，支持多实例、错误反馈与消息缓存重发。
在 Vue 3 组合式 API 中用 WebSocket 实现实时通信，核心是把连接管理、消息收发和状态响应封装成可复用的自定义 Hook（如 useWebSocket），避免在组件中直接操作原生 WebSocket 实例导致逻辑分散、重复或内存泄漏。
创建可复用的 WebSocket Hook
将 WebSocket 的连接、重连、发送、监听封装为一个组合函数，返回响应式数据和操作方法：
- 使用
ref管理连接实例、连接状态（connected）、消息队列（messages） - 用
onMounted和onUnmounted控制生命周期：自动连接、断开时清除定时器和事件监听 - 内置简单重连机制（如指数退避），避免频繁失败连接
- 暴露
send方法供组件调用，内部检查连接状态并缓存未发送消息
示例（简化版）：
const useWebSocket = (url) => {const socket = ref(null);
const connected = ref(false);
const messages = ref([]);
let reconnectTimer = null;
const connect = () => {
socket.value = new WebSocket(url);
socket.value.onopen = () => {
connected.value = true;
if (reconnectTimer) clearTimeout(reconnectTimer);
};
socket.value.onmessage = (e) => {
messages.value.push(JSON.parse(e.data));
};
socket.value.onclose = () => {
connected.value = false;
reconnectTimer = setTimeout(connect, 2000); // 2秒后重连
};
};
const send = (data) => {
if (connected.value && socket.value?.readyState === WebSocket.OPEN) {
socket.value.send(JSON.stringify(data));
}
};
onMounted(connect);
onUnmounted(() => {
if (socket.value) socket.value.close();
if (reconnectTimer) clearTimeout(reconnectTimer);
});
return { connected, messages, send };
};
在组件中使用 Hook 收发消息
组件只需解构使用返回的状态和方法，无需关心底层连接细节：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
messages是响应式数组，可直接用v-for渲染消息列表 -
send可绑定到按钮点击或表单提交，传入任意 JSON 兼容对象 - 通过
watch或计算属性对新消息做进一步处理（如过滤、分组）
示例组件片段：
export default {setup() {
const { connected, messages, send } = useWebSocket('ws://localhost:8080');
const sendMessage = () => {
send({ type: 'chat', content: 'Hello from Vue!' });
};
return { connected, messages, sendMessage };
}
};
处理连接异常与用户反馈
WebSocket 易受网络波动影响，需主动提示用户当前状态：
- 根据
connected值显示「连接中」「已连接」「离线重试中」等 UI 状态 - 发送失败时（如
readyState !== OPEN），给出轻量提示（Toast 或输入框禁用） - 避免在未连接时静默丢弃消息——可暂存本地，待重连成功后批量补发（需服务端配合幂等）
进阶建议：支持多实例与协议抽象
实际项目中常需多个独立 WebSocket 连接（如聊天 + 通知 + 数据看板），可增强 Hook：
- 为每个连接加唯一
key，用Map缓存不同实例，避免重复创建 - 把消息格式标准化（如统一含
id、timestamp、type字段），方便客户端路由分发 - 结合 Pinia，在 store 中集中管理连接状态和消息，跨组件共享更自然
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
