如何在Next.js中实现EventEmitter3全局事件监听？

我在Next.js应用中用EventEmitter3扩展实现了单例事件类，目前可以全局触发事件，但无法全局监听——只有在API路由或事件类所在文件内的监听才有效，其他地方（比如客户端页面、其他服务端文件）的监听收不到事件。

现有代码 #

事件单例类 #

import { EVENTS } from "./events"
import EventEmitter from "eventemitter3"

class Events extends EventEmitter {
    constructor() {
        super()
    }

    public emit(event: string | symbol, ...args: any[]): boolean {
        if (event in EVENTS) {
            return super.emit(event, ...args)
        }
        throw new Error(`Event ${String(event)} is not defined`)
    }

    public on(event: string | symbol, listener: (...args: any[]) => void): this {
        if (event in EVENTS) {
            return super.on(event, listener)
        }
        throw new Error(`Event ${String(event)} is not defined`)
    }

    public once(event: string | symbol, listener: (...args: any[]) => void): this {
        if (event in EVENTS) {
            return super.once(event, listener)
        }
        throw new Error(`Event ${String(event)} is not defined`)
    }

    public off(event: string | symbol, listener: (...args: any[]) => void): this {
        return super.off(event, listener)
    }

    public removeListener(event: string | symbol, listener: (...args: any[]) => void): this {
        return super.removeListener(event, listener)
    }

    public removeAllListeners(event?: string | symbol): this {
        return super.removeAllListeners(event)
    }
}

export const events = new Events()

API路由触发事件 #

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  events.emit(EVENTS.NEW_MESSAGE, { name: 'John' })
  res.status(200).json({ name: 'John Doe' })
}

原因分析 #

核心问题是Next.js的运行环境隔离：

• EventEmitter3是内存内的事件系统，单例只在当前运行环境中有效。
• 服务端（API路由、Server Components等）和客户端（浏览器）是完全独立的进程/环境，各自会加载一份events实例，两者无法共享事件。
• 即使在服务端内部，Next.js的API路由是无状态的，若监听逻辑写在handler函数内部，每次请求都会重新注册，但emit可能在另一次请求的handler中触发，此时监听已经失效（因为请求结束后handler的上下文被销毁）。

解决方案 #

方案1：服务端内部全局监听（仅服务端内通信） #

确保监听逻辑注册在文件顶层（而非API路由的handler内部），这样服务端启动时只会注册一次监听（开发模式下热重载可能重复注册，可加判断避免）。

示例：

// 在某个服务端文件（比如api/listen-events.ts）的顶层注册监听
import { events, EVENTS } from '../events';

// 避免开发模式热重载重复注册
if (!globalThis.eventListenerRegistered) {
  events.on(EVENTS.NEW_MESSAGE, (data) => {
    console.log('服务端收到新消息:', data);
  });
  globalThis.eventListenerRegistered = true;
}

// 其他服务端文件（比如API路由）导入同一个events实例触发事件即可

方案2：跨客户端-服务端事件通信（替代EventEmitter3） #

如果需要客户端和服务端之间互通事件，EventEmitter3无法满足，推荐以下方案：

• WebSocket（Socket.io）：建立客户端与服务端的长连接，支持双向实时通信，可直接替代内存事件系统实现跨环境事件触发与监听。
• Server-Sent Events (SSE)：服务端主动向客户端推送事件，适合单向的服务端到客户端通知场景。
• Redis Pub/Sub：用Redis作为中间件，服务端emit事件时发布到Redis频道，服务端其他实例或客户端通过API/WebSocket订阅频道接收事件，适合多实例部署的场景。

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