当前位置：首页 > VUE

vue实现报警推送

2026-03-29 03:11:18VUE

Vue 实现报警推送功能

使用 WebSocket 实时通信

安装 WebSocket 客户端库

npm install socket.io-client

创建 WebSocket 服务连接

import io from 'socket.io-client'
const socket = io('http://your-websocket-server')

export default {
  data() {
    return {
      alerts: []
    }
  },
  mounted() {
    socket.on('alert', (data) => {
      this.alerts.push(data)
      this.showNotification(data)
    })
  }
}

浏览器通知 API 实现

请求通知权限

vue实现报警推送

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

显示通知弹窗

methods: {
  showNotification(alert) {
    if (Notification.permission === 'granted') {
      new Notification('报警通知', {
        body: alert.message,
        icon: '/alert-icon.png'
      })
    }
  }
}

集成第三方推送服务

使用 Firebase Cloud Messaging

vue实现报警推送

import { initializeApp } from 'firebase/app'
import { getMessaging, onMessage } from 'firebase/messaging'

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  projectId: "YOUR_PROJECT_ID",
  messagingSenderId: "YOUR_SENDER_ID"
}

const app = initializeApp(firebaseConfig)
const messaging = getMessaging(app)

onMessage(messaging, (payload) => {
  this.alerts.push(payload.notification)
  this.showNotification(payload.notification)
})

页面内消息提醒组件

创建 AlertComponent.vue

<template>
  <div class="alert-container">
    <div v-for="(alert, index) in alerts" :key="index" class="alert-item">
      {{ alert.message }}
    </div>
  </div>
</template>

<script>
export default {
  props: ['alerts']
}
</script>

<style>
.alert-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}
.alert-item {
  padding: 10px;
  margin-bottom: 10px;
  background: #ffeb3b;
  border-radius: 4px;
}
</style>

后端服务配置示例

Node.js WebSocket 服务

const io = require('socket.io')(server)

io.on('connection', (socket) => {
  setInterval(() => {
    socket.emit('alert', {
      message: '系统异常',
      level: 'critical',
      timestamp: new Date()
    })
  }, 5000)
})