专业网站建设团队淄博seo推广
📢 Vue 3 实战：公司通知推送（WebSocket + token 校验 + 心跳机制）
📌 收藏 + 点赞 + 关注，让你的 Web 项目拥有企业级实时推送能力！
📦 一、完整源码（含 token 校验 + 心跳）
🧩 1. 通用 WebSocket 封装（useSecureWebSocket.ts）
// composables/useSecureWebSocket.ts
import { ref, onUnmounted } from 'vue';export function useSecureWebSocket(url: string, token: string) {const socket = ref<WebSocket | null>(null);const messages = ref<string[]>([]);const isConnected = ref(false);let heartbeatTimer: number;const HEARTBEAT_INTERVAL = 30000; // 每 30 秒发送一次心跳const connect = () => {const wsUrl = `${url}?token=${encodeURIComponent(token)}`;socket.value = new WebSocket(wsUrl);socket.value.onopen = () => {isConnected.value = true;console.log('✅ WebSocket 已连接');// 启动心跳机制heartbeatTimer = window.setInterval(() => {send('__ping__');}, HEARTBEAT_INTERVAL);};socket.value.onmessage = (event) => {const data = event.data;if (data === '__pong__') {console.log('❤️ 心跳回应');return;}messages.value.push(data);console.log('📩 收到通知：', data);};socket.value.onclose = () => {isConnected.value = false;console.warn('❌ WebSocket 断开，3 秒后重连');clearInterval(heartbeatTimer);setTimeout(connect, 3000);};socket.value.onerror = (err) => {console.error('⚠️ WebSocket 错误', err);};};const send = (msg: string) => {if (socket.value?.readyState === WebSocket.OPEN) {socket.value.send(msg);}};const close = () => {clearInterval(heartbeatTimer);socket.value?.close();};onUnmounted(() => {close();});connect();return {isConnected,messages,send,close,};
}
🧩 2. 页面组件中使用（NoticePush.vue）
<template><div><p>连接状态：<b :style="{ color: isConnected ? 'green' : 'red' }">{{ isConnected ? '已连接' : '断开连接' }}</b></p><ul><li v-for="(msg, index) in messages" :key="index">📨 {{ msg }}</li></ul></div>
</template><script setup lang="ts">
import { useSecureWebSocket } from '@/composables/useSecureWebSocket';// 从 token 管理器中获取身份认证信息（如 Vuex、Pinia、cookie）
const token = localStorage.getItem('auth_token') || '';
const { isConnected, messages } = useSecureWebSocket('wss://example.com/ws/notice',token
);
</script>
🧭 二、逐步讲解：核心机制全搞懂
✅ 1. 身份认证：token 方式连接服务器
const wsUrl = `${url}?token=${encodeURIComponent(token)}`;
- 客户端连接时携带
?token=xxx； - 后端通过 token 验证用户身份；
- 更安全，不依赖 cookie，不暴露 session。
服务端需要校验 token，有效期控制、防篡改等处理。
✅ 2. 心跳机制：保持连接 & 检测断线
// 每 30 秒发送一次 __ping__
heartbeatTimer = window.setInterval(() => {send('__ping__');
}, 30000);
if (data === '__pong__') {console.log('❤️ 心跳回应');return;
}
- 每隔一段时间发送
"__ping__"； - 后端响应
"__pong__"，代表连接活跃； - 如果连续几次没有回应，后端可主动断开连接。
✅ 3. 断线重连机制
socket.value.onclose = () => {isConnected.value = false;setTimeout(connect, 3000);
};
- 断线后 3 秒自动尝试重连；
- 避免偶发性断网带来的消息中断；
- 心跳机制 + 重连机制，提升稳定性。
✅ 4. 后端配合逻辑参考（伪代码）
onConnect(socket) {const token = extractToken(socket.url);if (!verifyToken(token)) {socket.close();return;}socket.on('message', (msg) => {if (msg === '__ping__') {socket.send('__pong__');}});// 有通知时主动广播pushTo(socket, '公司最新公告...');
}
✅ 三、总结：企业级推送的 5 大关键点
| 模块 | 功能说明 |
|---|---|
| ✅ token 鉴权 | 前端通过 URL 携带 token，验证身份 |
| ✅ 心跳机制 | 每 30 秒 ping-pong 检测连接活跃状态 |
| ✅ 自动重连 | 断网后 3 秒自动重连，稳定持续连接 |
| ✅ 消息缓存 | ref<string[]> 保存所有历史通知消息 |
| ✅ 可扩展封装 | 抽离为 useSecureWebSocket 通用组件 |
🎯 补充建议
- 可扩展为多频道监听（如：系统通知、私信、公告）；
- 建议后端设置 WebSocket 最大连接数 & 超时清理；
- 配合 Element Plus 弹窗组件提示用户收到通知。