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

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

news 2025/6/10 5:36:12

📢 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 提示或弹窗增强用户体验