当前位置：首页 > VUE

vue实现报警推送

2026-03-08 16:09:45VUE

Vue 实现报警推送的方法

使用 WebSocket 实时通信

WebSocket 是实现实时报警推送的常用技术。在 Vue 项目中，可以通过 socket.io-client 或原生 WebSocket API 实现。

安装 socket.io-client：

npm install socket.io-client

在 Vue 组件中初始化 WebSocket 连接：

import io from 'socket.io-client';

export default {
  data() {
    return {
      socket: null,
      alerts: []
    };
  },
  mounted() {
    this.socket = io('http://your-websocket-server');
    this.socket.on('alert', (data) => {
      this.alerts.push(data);
      this.showNotification(data.message);
    });
  },
  methods: {
    showNotification(message) {
      // 使用浏览器通知 API 或自定义 UI 组件
      if (Notification.permission === 'granted') {
        new Notification('报警通知', { body: message });
      }
    }
  },
  beforeDestroy() {
    if (this.socket) this.socket.disconnect();
  }
};

浏览器通知 API

利用浏览器原生 Notification API 显示推送通知，需先请求用户权限：

methods: {
  requestNotificationPermission() {
    if (window.Notification && Notification.permission !== 'granted') {
      Notification.requestPermission().then(permission => {
        if (permission === 'granted') console.log('通知权限已授予');
      });
    }
  }
}

结合后端推送服务

若使用 Firebase Cloud Messaging (FCM) 等第三方推送服务：

在 public/index.html 引入 Firebase SDK

初始化 Firebase 并处理消息接收：


import firebase from 'firebase/app';
import 'firebase/messaging';

const firebaseConfig = { apiKey: 'YOUR_KEY', projectId: 'YOUR_PROJECT_ID' };

firebase.initializeApp(firebaseConfig); const messaging = firebase.messaging();

messaging.onMessage((payload) => { console.log('收到推送消息', payload); this.showNotification(payload.notification.body); });


#### 自定义 UI 通知组件
创建可复用的通知组件 `AlertNotification.vue`：
```vue
<template>
  <div v-if="visible" class="alert-notification">
    {{ message }}
    <button @click="dismiss">×</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  data() {
    return { visible: true };
  },
  methods: {
    dismiss() {
      this.visible = false;
    }
  }
};
</script>

轮询作为备选方案

在不支持 WebSocket 的环境下，可使用定时轮询：

vue实现报警推送

setInterval(() => {
  fetch('/api/check-alerts')
    .then(res => res.json())
    .then(alerts => {
      if (alerts.length) this.showNotification(alerts[0]);
    });
}, 30000); // 每30秒检查一次