如何在 NextJS api 中转发服务器发送的事件

在 Next.js API 中转发服务器发送的事件（Server-Sent Events，SSE），可以通过创建一个 API 路由来实现，该路由响应 HTTP 请求并开始发送事件流给客户端。以下是详细步骤及示例：

步骤 1: 创建 Next.js API 路由

首先，你需要创建一个 Next.js API 路由来处理 SSE。在你的 Next.js 项目中的 pages/api 目录下，创建一个新文件，例如 events.js。

步骤 2: 设置 HTTP 响应头

在你的 API 路由中，设置正确的 HTTP 响应头来指示这是一个事件流。

步骤 3: 发送事件

使用适当的格式发送事件到客户端，通常是一行以 data: 开头，后跟实际的数据，然后是两个换行符来结束事件。

步骤 4: 保持连接

保持请求打开，以便可以不断地发送事件。如果连接关闭了，你需要在客户端处理重连的逻辑。

示例代码

javascript
// pages/api/events.js

export default function handler(req, res) {
  // 设置 HTTP Header 为事件流格式
  res.writeHead(200, {
    Connection: 'keep-alive',
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
  });

  // 发送事件的函数
  const sendEvent = (data) => {
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  };

  // 发送一个初始事件
  sendEvent({ message: '连接已建立' });

  // 设置一个定时器模拟事件发送
  const intervalId = setInterval(() => {
    sendEvent({ dateTime: new Date().toISOString() });
  }, 5000);

  // 如果请求被关闭，清除定时器
  req.on('close', () => {
    clearInterval(intervalId);
    res.end();
  });
}

客户端代码示例

在客户端，使用 EventSource 来连接到上面创建的 API 路由，并监听事件。

javascript
// 客户端 JavaScript
const evtSource = new EventSource('/api/events');
evtSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('收到新事件:', data);
};

// 处理错误
evtSource.onerror = (error) => {
  // 处理连接错误
  console.error('EventSource 错误:', error);
  evtSource.close();
};

在使用 SSE 时需要注意的是，服务器发送的事件(SSE)是一个单向通道，仅用于服务器到客户端的通信。如果需要双向通信，可以考虑使用 WebSockets。

请注意，由于 SSE 要求保持长时间的连接，这可能与 Next.js 的无服务器环境不兼容，因为无服务器函数通常有执行时间限制。如果你的 Next.js 应用部署在无服务器环境中，你可能需要使用其他实时数据传输方案，比如 WebSocket 或使用第三方服务。