vue实现即时通知

Vue 实现即时通知的方法

使用 WebSocket 实现实时通信

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，适合实现即时通知功能。在 Vue 中可以通过 socket.io-client 或原生 WebSocket API 实现。

安装 socket.io-client：

npm install socket.io-client

在 Vue 组件中使用：

import io from 'socket.io-client';

export default {
  data() {
    return {
      socket: null,
      notifications: []
    };
  },
  mounted() {
    this.socket = io('http://your-websocket-server-url');
    this.socket.on('notification', (data) => {
      this.notifications.push(data);
    });
  },
  beforeDestroy() {
    if (this.socket) {
      this.socket.disconnect();
    }
  }
};

使用 Event Bus 实现组件间通信

对于简单的应用，可以使用 Vue 的 Event Bus 实现通知功能。创建一个全局事件总线：

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

在发送通知的组件中：

import { EventBus } from './event-bus';

EventBus.$emit('new-notification', {
  title: 'New Message',
  content: 'You have a new message'
});

在接收通知的组件中：

import { EventBus } from './event-bus';

export default {
  created() {
    EventBus.$on('new-notification', (notification) => {
      console.log('Received notification:', notification);
    });
  },
  beforeDestroy() {
    EventBus.$off('new-notification');
  }
};

使用第三方通知库

Vue 生态系统中有专门的通知组件库，如 vue-notification：

安装：

npm install vue-notification

在 main.js 中引入：

import Notifications from 'vue-notification';
Vue.use(Notifications);

在组件中使用：

this.$notify({
  title: 'Important message',
  text: 'Hello user! This is a notification!'
});

使用浏览器 Notification API

可以利用浏览器原生的 Notification API 显示系统级通知：

export default {
  methods: {
    showNotification(title, options) {
      if (!('Notification' in window)) {
        console.log('This browser does not support notifications');
        return;
      }

      if (Notification.permission === 'granted') {
        new Notification(title, options);
      } else if (Notification.permission !== 'denied') {
        Notification.requestPermission().then(permission => {
          if (permission === 'granted') {
            new Notification(title, options);
          }
        });
      }
    }
  }
};

结合后端轮询实现

如果 WebSocket 不可用，可以使用轮询方式定期检查新通知：

export default {
  data() {
    return {
      notifications: [],
      pollInterval: null
    };
  },
  mounted() {
    this.pollInterval = setInterval(() => {
      this.checkForNotifications();
    }, 5000); // 每5秒检查一次
  },
  methods: {
    async checkForNotifications() {
      try {
        const response = await axios.get('/api/notifications');
        if (response.data.length > 0) {
          this.notifications = [...this.notifications, ...response.data];
        }
      } catch (error) {
        console.error('Error fetching notifications:', error);
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.pollInterval);
  }
};

实现通知中心组件

创建一个可复用的通知中心组件：

<template>
  <div class="notification-center">
    <div v-for="(notification, index) in notifications" 
         :key="index"
         class="notification"
         :class="`type-${notification.type}`">
      <h4>{{ notification.title }}</h4>
      <p>{{ notification.message }}</p>
      <button @click="dismiss(index)">×</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    maxNotifications: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      notifications: []
    };
  },
  methods: {
    addNotification(notification) {
      this.notifications.unshift(notification);
      if (this.notifications.length > this.maxNotifications) {
        this.notifications.pop();
      }

      if (notification.autoDismiss) {
        setTimeout(() => {
          this.notifications = this.notifications.filter(n => n !== notification);
        }, notification.duration || 5000);
      }
    },
    dismiss(index) {
      this.notifications.splice(index, 1);
    }
  }
};
</script>

以上方法可以根据项目需求单独使用或组合使用，WebSocket 适合需要真正实时性的场景，而轮询和事件总线适合简单应用。第三方通知库可以提供更丰富的 UI 效果和交互方式。