Vue 3 + WebSocket 实战：公司通知实时推送功能详解

news2025/6/10 16:23:36

📢 Vue 3 + WebSocket 实战：公司通知实时推送功能详解

📌 收藏 + 点赞 + 关注，项目中要用到推送功能时就不怕找不到了！

实时通知是企业系统中常见的功能，比如：管理员发布通知后，所有用户页面立即收到消息提示。本文将用 Vue 3 + WebSocket 实现一个公司通知实时推送功能，结构清晰、代码实用。

📦 一、完整示例源码

🧩 1. 通用 WebSocket 封装（`useWebSocket.ts`）

// composables/useWebSocket.ts
import { ref, onUnmounted } from 'vue';

export function useWebSocket(url: string) {
  const socket = ref<WebSocket | null>(null);
  const messages = ref<string[]>([]);
  const isConnected = ref(false);

  const connect = () => {
    socket.value = new WebSocket(url);

    socket.value.onopen = () => {
      isConnected.value = true;
      console.log('✅ WebSocket 已连接');
    };

    socket.value.onmessage = (event) => {
      messages.value.push(event.data);
      console.log('📩 收到通知：', event.data);
    };

    socket.value.onclose = () => {
      isConnected.value = false;
      console.warn('❌ WebSocket 已断开，准备重连');
      setTimeout(connect, 3000); // 断线重连
    };

    socket.value.onerror = (error) => {
      console.error('⚠️ WebSocket 错误：', error);
    };
  };

  const send = (msg: string) => {
    if (socket.value?.readyState === WebSocket.OPEN) {
      socket.value.send(msg);
    }
  };

  const close = () => {
    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 { useWebSocket } from '@/composables/useWebSocket';

const { isConnected, messages } = useWebSocket('wss://example.com/ws/notice');
</script>

✅ 注意：服务端需实现 WebSocket 服务，并在有新通知时主动推送至 /ws/notice 端口。

🧭 二、逐步讲解：每行代码都懂的 WebSocket 实践

📌 1. 为什么使用 WebSocket 而非轮询？

轮询会定期发请求，浪费资源；
WebSocket 是“事件驱动”，一旦服务端有通知立即推送，秒级响应。

📌 2. 组件封装优势（`useWebSocket`）

封装功能	作用说明
自动连接	页面加载后自动建立连接
自动重连	连接断开后 3 秒自动重试
消息管理	使用 `ref<string[]>` 存消息
错误监听	提示连接异常或断开
可复用性强	多个页面调用不同通知通道

📌 3. 实际项目中消息内容格式？

可以根据需要调整成结构化 JSON：

socket.value.onmessage = (event) => {
  const data = JSON.parse(event.data);
  // 如：{ type: 'notice', content: '系统将于今晚维护' }
  messages.value.push(data.content);
};

📌 4. 提醒用户注意通知（结合 UI 提示）

结合 Element Plus / Naive UI 提示弹窗：

import { ElNotification } from 'element-plus';

socket.value.onmessage = (event) => {
  const data = JSON.parse(event.data);
  ElNotification({
    title: '新通知',
    message: data.content,
    type: 'info',
  });
};

✅ 三、总结：公司通知推送的实现关键点

步骤	内容说明
建立连接	通过 WebSocket 实时建立持久连接
消息监听	接收后端推送的公司通知并展示
断线处理	页面关闭前关闭连接，异常时自动重连
结构封装	封装成 `useWebSocket` 提高可维护性
界面提示	搭配 UI 提示或弹窗增强用户体验