当前位置：首页 > news >正文

Vue 3 实战：【加强版】公司通知推送（WebSocket + token 校验 + 心跳机制）

news 2025/6/10 5:23:22

📢 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` 通用组件