如何在Node.js Express中实现AI.JSX响应流式传输

问题根源 #

你当前的实现直接将AI.JSX toTextStream 输出的纯文本写入Express响应，但AI.JSX的useAIStream钩子要求SSE响应必须遵循特定格式：每个数据块需以data: 前缀开头，内容为包含type和value字段的JSON字符串，且每个事件需以双换行符结尾。纯文本输出无法被钩子识别，导致error和current始终为null。

修正后的后端代码 #

routes.post("/chat-stream", async (req, res) => {
  const { system = "", user = "" } = req.body || {};

  if (!user) {
    res.sendStatus(400);
    return;
  }

  const RequestEl = getRequestEl(user, system);
  const stream = toTextStream(RequestEl);
  const reader = stream.getReader();

  // 设置SSE标准响应头
  res.setHeader("Content-Type", "text/event-stream");
  res.setHeader("Connection", "keep-alive");
  res.setHeader("Cache-Control", "no-cache");
  res.setHeader("Access-Control-Allow-Origin", "*"); // 按需配置跨域规则
  res.flushHeaders();

  const pump = async () => {
    try {
      const { value, done } = await reader.read();

      if (done) {
        // 发送流结束标记事件
        res.write(`data: ${JSON.stringify({ type: 'done' })}\n\n`);
        res.end();
        return;
      }

      // 按照AI.JSX钩子期望的格式包装数据块
      res.write(`data: ${JSON.stringify({ type: 'completion', value })}\n\n`);
      await pump();
    } catch (err) {
      console.error(err);
      // 发送错误事件
      if (!res.headersSent) {
        res.status(500);
      }
      res.write(`data: ${JSON.stringify({ type: 'error', value: err.message })}\n\n`);
      res.end();
    }
  };

  pump();
});

客户端调用注意点 #

确保fetchAI调用时正确指定请求方法和请求体，示例：

fetchAI({
  url: '/chat-stream',
  method: 'POST',
  body: JSON.stringify({
    system: '你的系统提示词内容',
    user: '用户的提问内容'
  }),
  headers: {
    'Content-Type': 'application/json'
  }
});

关键说明 #

• 每个数据块必须包装为data: {JSON结构}\n\n的格式：type: 'completion'对应流式文本内容，type: 'done'表示流结束，type: 'error'传递错误信息
• 必须调用res.flushHeaders()确保响应头立即发送，避免客户端因等待超时断开连接
• 跨域场景需根据实际需求配置Access-Control-Allow-Origin等相关响应头

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