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

📢 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 大关键点

🎯 补充建议

• 可扩展为多频道监听（如：系统通知、私信、公告）；
• 建议后端设置 WebSocket 最大连接数 & 超时清理；
• 配合 Element Plus 弹窗组件提示用户收到通知。