【前端系统功能】实现实时展示系统通知的方法总结（轮询，WebSocket,SSE)

一、前端实现实时展示系统通知的方法总结

系统通知的实时展示需要前端和后端的协作，核心是通过 实时通信 技术，将后台生成的通知及时推送到前端，前端接收到通知后进行展示。

• （一）功能概述

  实时显示聊天消息、系统通知以及数据变化是一个典型的前端开发需求，涉及到实时通信、数据更新和界面渲染，常见于即时通讯应用、数据监控系统等。
• 需求点：
  • 聊天消息：用户发送和接收消息实时更新。
  • 系统通知：新通知及时推送并显示。
  • 数据变化：实时反映后端数据的变化，如监控系统中的仪表盘数据更新。

• （二）设计目标

• 高效、稳定的实时通信机制。
• 优化前端性能，避免过多的资源消耗。
• 界面友好，更新流畅且用户无感知。

---

二、实现系统通知的详细步骤

（一）前端技术选型与实现方式

(1) WebSocket 实现

• 特点：WebSocket 是一种全双工通信协议，适合实时性要求高的场景。
• 实现步骤：
  1. 建立连接：
     • 前端通过 WebSocket API 创建连接，连接到后端的 WebSocket 服务。

       const socket = new WebSocket('ws://your-backend-address');
       socket.onopen = () => {
           console.log('WebSocket connected');
       };
       

  2. 接收通知：
     • 监听 message 事件，接收系统推送的消息。

       socket.onmessage = (event) => {
           const notification = JSON.parse(event.data);
           showNotification(notification);
       };
       

  3. 展示通知：
     • 调用封装的通知展示组件或库（如 Ant Design 的 Notification）。

       function showNotification(notification) {
           Notification.info({
               message: notification.title,
               description: notification.content,
               duration: 5,
           });
       }
       

  4. 断线重连：
     • 在连接断开时，尝试重连。

       socket.onclose = () => {
           console.error('WebSocket closed, retrying...');
           setTimeout(() => reconnectWebSocket(), 3000);
       };
       

(2) SSE (Server-Sent Events) 实现

• 特点：SSE 是一种轻量级的单向通信协议，适合需要从服务器到客户端推送通知的场景。
• 实现步骤：
  1. 建立连接：
     • 使用 EventSource 接收服务器推送的事件。

       const eventSource = new EventSource('/api/notifications');
       eventSource.onopen = () => {
           console.log('SSE connection opened');
       };
       

  2. 接收通知：
     • 监听消息事件。

       eventSource.onmessage = (event) => {
           const notification = JSON.parse(event.data);
           showNotification(notification);
       };
       

(3) 轮询 (Polling) 实现

• 特点：定期向服务器发送请求，获取新的通知，适用于后端不支持实时通信的场景。
• 实现步骤：
  1. 定时请求：
     • 使用 setInterval 定期发送请求。

       setInterval(() => {
           fetch('/api/notifications/latest')
               .then((response) => response.json())
               .then((data) => {
                   data.forEach(notification => showNotification(notification));
               });
       }, 5000); // 每隔5秒请求一次
       

（二）后端配合

(1) 推送逻辑

• 后端应根据业务场景和用户状态，将消息通过 WebSocket 或 SSE 推送给前端。

(2) 通知存储

• 系统通知一般会存储在数据库中（如 MySQL、MongoDB），以便前端在用户上线时能获取历史未读通知。

(3) API 支持

• 提供获取历史通知的接口：

  GET /api/notifications
  

（三）前端通知展示组件的选型

(1) Ant Design 的 Notification

• 示例代码：

  import { Notification } from 'antd';
  
  Notification.info({
      message: '系统通知',
      description: '您有新的消息，请及时查看！',
      duration: 3,
  });
  

(2) Toastify 或类似库

• 轻量化展示库，支持样式自定义。

  import { toast } from 'react-toastify';
  
  toast.info('您有新的消息！');
  

(3) 自定义组件

• 使用 React 或 Vue 自行封装通知组件，结合状态管理工具（如 Redux 或 Pinia）实现通知的实时更新。

---

三、总结

• 对于实时性要求高的系统通知展示，优先选择 WebSocket 或 SSE，兼顾性能与用户体验。
• 后端需配合提供实时推送服务，并保证历史通知的可靠性存储。
• 前端展示可根据实际需求选择 UI 组件库或自定义通知逻辑，以便提供良好的用户体验。