ChatGPT 流式响应架构实践：Node.js 代理与 React 状态管理

在集成 ChatGPT 等 LLM 时，流式响应（Streaming）是保障用户体验的核心。长文本生成若采用传统同步等待模式，前端将面临数秒至数十秒的白屏。本文将深入探讨如何基于 Node.js 与 React 构建高效的流式对话架构。

一、Node.js 流式代理：避免缓冲积压

Node.js 作为中间层代理 OpenAI 接口，核心职责是透传 SSE（Server-Sent Events）流。如果处理不当，会将流式响应退化为同步响应。

❌ 反例：缓冲完整响应再返回

import express from 'express';

app.post('/api/chat', async (req, res) => {
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: { 'Authorization': `Bearer ${API_KEY}` },
    body: JSON.stringify({ ...req.body, stream: true })
  });
  // 错误：等待所有数据接收完毕才返回，完全丧失流式优势
  const data = await response.json(); 
  res.json(data);
});

✅ 正例：基于 Web Streams 的逐块转发

app.post('/api/chat', async (req, res) => {
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: { 'Authorization': `Bearer ${API_KEY}` },
    body: JSON.stringify({ ...req.body, stream: true })
  });

  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  const decoder = new TextDecoder();
  const reader = response.body.getReader();

  try {
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      // 逐块解码并立即刷新到客户端
      const chunk = decoder.decode(value, { stream: true });
      res.write(chunk);
    }
  } finally {
    res.end();
  }
});

二、React 流式状态管理：攻克渲染性能瓶颈

在 React 中接收流式数据，最直觉的做法是在 useEffect 中不断拼接字符串并 setState，但这会导致高频重渲染。

❌ 反例：高频 setState 导致渲染卡顿

function ChatComponent() {
  const [content, setContent] = useState('');

  useEffect(() => {
    fetch('/api/chat', { method: 'POST', body: /*...*/ })
      .then(res => res.text())
      .then(text => setContent(text)); // 假设这里是流式更新，每次触发 render
  }, []);

  // 每次 setContent 都会触发组件及子组件的完整重渲染
  return <div className="markdown-body">{content}</div>; 
}

✅ 正例：自定义 Hook + 批量更新优化

利用 useRef 暂存流式数据，通过 requestAnimationFrame (rAF) 合并状态更新，将渲染频率锁定在浏览器的刷新率（通常 60fps）。

function useChatStream() {
  const [content, setContent] = useState('');
  const bufferRef = useRef('');
  const rafIdRef = useRef(null);

  const startStream = async (messages) => {
    bufferRef.current = '';
    setContent('');

    const response = await fetch('/api/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ messages, stream: true })
    });

    const reader = response.body.getReader();
    const decoder = new TextDecoder();

    const processChunk = () => {
      // 将缓冲区数据同步到状态，触发单次渲染
      if (bufferRef.current !== content) {
        setContent(bufferRef.current);
      }
      rafIdRef.current = null;
    };

    const readStream = async () => {
      while (true) {
        const { done, value } = await reader.read();
        if (done) {
          if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current);
          setContent(bufferRef.current); // 最终同步
          break;
        }

        const chunk = decoder.decode(value, { stream: true });
        // 解析 SSE 数据并提取 delta content (此处简化处理)
        const lines = chunk.split('\n').filter(line => line.startsWith('data: '));
        for (const line of lines) {
          if (line === 'data: [DONE]') continue;
          const parsed = JSON.parse(line.replace('data: ', ''));
          const delta = parsed.choices[0]?.delta?.content || '';
          bufferRef.current += delta; // 追加到缓冲区
        }

        // 使用 rAF 合并渲染
        if (!rafIdRef.current) {
          rafIdRef.current = requestAnimationFrame(processChunk);
        }
      }
    };

    readStream();
  };

  return { content, startStream };
}

三、Markdown 渲染优化：增量解析

LLM 返回的内容通常是 Markdown 格式。在流式场景下，每次内容追加都全量重新解析 Markdown AST 是极其耗时的。

❌ 反例：全量重解析 Markdown

import ReactMarkdown from 'react-markdown';

// 每秒触发数十次，每次都从头解析整个 Markdown 字符串
const MarkdownRenderer = ({ content }) => {
  return <ReactMarkdown>{content}</ReactMarkdown>;
};

✅ 正例：分块渲染与稳定 Key

将已完成的段落与正在生成的段落分离，已完成部分使用 useMemo 缓存，仅对增量部分进行解析。

import ReactMarkdown from 'react-markdown';

const StreamMarkdown = ({ content }) => {
  // 按换行符拆分，最后一个段落视为正在生成的部分
  const paragraphs = content.split('\n\n');
  const stablePart = paragraphs.slice(0, -1).join('\n\n');
  const activePart = paragraphs.slice(-1)[0] || '';

  return (
    <div>
      {/* 已稳定的内容：仅当 stablePart 变化时重新解析 */}
      {stablePart && (
        <div key="stable">
          <ReactMarkdown>{stablePart}</ReactMarkdown>
        </div>
      )}
      {/* 正在生成的内容：高频更新，范围最小化 */}
      <div key="active">
        <ReactMarkdown>{activePart}</ReactMarkdown>
      </div>
    </div>
  );
};

四、AbortController：中断与资源释放

用户可能在生成过程中切换问题，必须中断前序请求并清理状态，否则会导致数据错乱和内存泄漏。

function useChatStream() {
  const [content, setContent] = useState('');
  const abortControllerRef = useRef(null);

  const startStream = async (messages) => {
    // 中断上一次未完成的请求
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }
    
    const controller = new AbortController();
    abortControllerRef.current = controller;

    try {
      const response = await fetch('/api/chat', {
        signal: controller.signal, // 传入中断信号
        // ...other options
      });
      // ...stream reading logic
    } catch (err) {
      if (err.name === 'AbortError') {
        console.log('Stream aborted by user');
      }
    } finally {
      abortControllerRef.current = null;
    }
  };

  const stopGeneration = () => {
    abortControllerRef.current?.abort();
  };

  return { content, startStream, stopGeneration };
}

Node.js 端同样需要监听中断事件，及时关闭 OpenAI 连接：

app.post('/api/chat', async (req, res) => {
  // ...fetch setup
  req.on('close', () => {
    // 客户端断开连接，主动中断 OpenAI 读取流
    reader.cancel();
    console.log('Client disconnected, stream closed');
  });
  // ...stream reading logic
});

总结

构建高质量的 ChatGPT 前端交互，核心在于流式数据流转的精细化控制：Node.js 层需做到逐块透传避免缓冲，React 层需通过缓冲区与 rAF 控制渲染频率，Markdown 渲染需隔离稳定与增量区域，最后辅以 AbortController 实现完整的生命周期管理。