如何基于Node.js与Angular实现全流程触发的全员实时推送通知？

这类全站点实时推送的场景，最成熟的实现方案是基于WebSocket做双向通信，推荐用生态完善的Socket.IO库，内置自动重连、降级兼容、房间管理等能力，不需要自己处理底层通信逻辑。

后端（Node.js）实现步骤 #

• 首先安装所需依赖

  npm install socket.io express
  

  如果你用Koa作为服务框架，替换为对应Socket.IO的Koa适配包即可。
• 绑定Socket.IO到Node服务，实现广播逻辑

  const express = require('express');
  const http = require('http');
  const { Server } = require('socket.io');
  
  const app = express();
  const server = http.createServer(app);
  // 配置跨域，origin替换为你实际的Angular站点访问地址
  const io = new Server(server, {
    cors: {
      origin: "http://localhost:4200",
      methods: ["GET", "POST"]
    }
  });
  
  io.on('connection', (socket) => {
    // 监听前端触发的「流程启动」事件
    socket.on('process:start', (processData) => {
      // 核心逻辑：向所有已连接的客户端广播通知
      io.emit('process:notify', {
        processType: processData.type,
        operator: processData.operator,
        startTime: new Date().toISOString(),
        content: `用户${processData.operator}已启动${processData.type}流程`
      });
    });
  
    socket.on('disconnect', () => {
      // 可在这里加在线用户统计、用户下线相关逻辑
    });
  });
  
  server.listen(3000, () => {
    console.log('服务已启动，端口3000');
  });
  

• 如果需要做权限控制，仅推送给特定角色的用户，可以用Socket.IO的「房间」功能，用户连接后按角色加入对应房间，广播时指定房间即可，不需要全量推送。

前端（Angular）实现步骤 #

• 安装Socket.IO客户端依赖

  npm install socket.io-client
  

• 封装全局Socket服务，方便全站组件调用

  // src/app/services/socket.service.ts
  import { Injectable } from '@angular/core';
  import { io, Socket } from 'socket.io-client';
  import { Observable } from 'rxjs';
  
  @Injectable({ providedIn: 'root' })
  export class SocketService {
    private socket: Socket;
  
    constructor() {
      // 连接后端Node服务地址，生产环境替换为实际服务域名
      this.socket = io('http://localhost:3000');
    }
  
    // 触发流程启动事件
    sendProcessStart(processInfo: {type: string, operator: string}) {
      this.socket.emit('process:start', processInfo);
    }
  
    // 监听全局流程通知
    getProcessNotify(): Observable<any> {
      return new Observable(observer => {
        this.socket.on('process:notify', data => observer.next(data));
      });
    }
  }
  

• 在流程启动页面调用触发事件的方法

  constructor(private socketService: SocketService) {}
  
  // 用户点击启动流程按钮后执行
  handleStartProcess(processType: string, currentUser: string) {
    // 原有流程提交的业务逻辑
    // ...
    // 发送流程启动通知
    this.socketService.sendProcessStart({
      type: processType,
      operator: currentUser
    });
  }
  

• 在全局根组件监听通知，实现全站弹出提示
  这里以PrimeNG的全局提示组件为例，你可以替换为自己项目用的UI组件库的通知组件：

  // src/app/app.component.ts
  import { MessageService } from 'primeng/api';
  constructor(private socketService: SocketService, private messageService: MessageService) {
    this.socketService.getProcessNotify().subscribe(notify => {
      // 弹出全局通知
      this.messageService.add({
        severity: 'info',
        summary: '流程通知',
        detail: notify.content
      });
      // 如果需要存储历史通知，可在这里写入状态管理库或者本地存储
    });
  }
  

可选优化点 #

• 离线消息补发：如果需要给不在线的用户上线后补发未读通知，可以把通知内容存储到Redis或者数据库，用户连接成功后拉取未读列表即可
• 生产部署适配：如果用Nginx做反向代理，需要添加WebSocket支持的配置，开启Upgrade和Connection头转发，避免连接中断
• 消息去重：给每条通知添加唯一ID，前端收到后判断是否已经展示过，避免异常场景下重复提示
• 重连配置：Socket.IO默认开启自动重连，你可以根据业务需要调整重试间隔、最大重试次数等参数

内容的提问来源于stack exchange，提问作者DineshJ