如何在React项目中实现AI流式输出？

BUG收容所所长
500 阅读16分钟

如何在React项目中实现AI流式输出？

1. 引言：为什么我们需要AI流式输出？

随着人工智能技术的飞速发展，AI应用已经渗透到我们日常生活的方方面面。想象一下，你正在与一个AI助手进行对话，你提出一个复杂的问题，然后屏幕上长时间没有任何反馈，直到几秒甚至十几秒后，所有的回答才突然完整地呈现在你面前。这种体验就像在看电影时，画面突然卡住，然后瞬间跳到几分钟后，你错过了中间的所有精彩细节。这显然不是我们希望看到的。

为了解决这一痛点，AI流式输出（Streaming Output） 应运而生。流式输出的核心思想是：AI在生成内容的同时，将已经生成的部分内容实时地、片段式地发送给用户。用户可以像看电影的“缓冲”过程一样，实时看到AI“思考”和“生成”的过程，而不是苦苦等待最终结果。这种方式极大地提升了用户体验，让交互变得更加流畅、自然和高效。

当然，话不多说，先给大家看一下我们完工之后的效果

2025-07-28 00-38-57.gif

2. 准备工作：构建你的React AI应用

在深入探讨流式输出的实现细节之前，我们首先需要搭建一个基本的React项目环境，并配置好与Deepseek AI交互所需的API密钥。本节将引导你完成这些准备工作。

项目初始化：从零开始构建React应用

如果你已经有一个React项目，可以跳过此步骤。对于新项目，我们推荐使用Vite，它是一个现代化前端构建工具，以其快速的冷启动、即时热模块更换（HMR）和优化的构建性能而闻名。通过以下命令，你可以快速创建一个新的React项目：

npm create vite@latest my-ai-streaming-app -- --template react
cd my-ai-streaming-app
npm install
npm run dev

执行这些命令后，一个基础的React应用就运行起来了。你可以通过浏览器访问提示的地址（通常是http://localhost:5173）看到默认的Vite + React欢迎页面。

Deepseek API密钥配置：连接AI的桥梁

要让你的React应用能够与Deepseek AI进行通信，你需要一个Deepseek API密钥。这个密钥是你访问Deepseek服务的凭证，务必妥善保管，不要直接暴露在前端代码中。在我们的示例项目中，我们通过环境变量来安全地管理这个密钥。

  1. 获取API密钥： 访问Deepseek官方网站，注册并登录你的账户，然后在API密钥管理页面生成一个新的API密钥。请确保复制这个密钥，它只会显示一次。

  2. 配置环境变量： 在你的React项目根目录下创建一个名为.env的文件（如果不存在的话）。然后，将你的Deepseek API密钥添加到这个文件中，格式如下：

    VITE_DEEPSEEK_API_KEY=YOUR_DEEPSEEK_API_KEY_HERE

    请将YOUR_DEEPSEEK_API_KEY_HERE替换为你刚刚获取到的真实API密钥。Vite会自动加载以VITE_开头的环境变量，并通过import.meta.env对象在你的前端代码中暴露它们。这样做的好处是，在构建生产环境代码时，这些环境变量会被替换为实际值，而不会将敏感信息直接硬编码到客户端代码中。

核心组件概览：项目结构初探

我们的示例项目结构相对简单，主要包含以下几个关键文件：

  • src/App.jsx：这是React应用的入口组件，负责渲染主要的UI结构。在我们的案例中，它非常简洁，仅仅引入并渲染了Deepseek组件。

    import Deepseek from './components/deepseek'

function App() {
  return (
    <div>
      <Deepseek />
    </div>
  )
}
export default App

  • src/components/deepseek/index.jsx：这是实现Deepseek AI交互逻辑的核心组件。它包含了用户输入、发送请求、处理AI响应（包括流式和非流式）以及展示结果的所有功能。我们将在下一节详细剖析这个文件中的代码。

  • src/components/deepseek/index.css：这个文件包含了Deepseek组件的样式定义，负责界面的美观和布局。它定义了输入框、按钮、响应区域以及一些动画效果的样式，确保应用具有良好的用户体验。

通过以上准备工作，我们已经搭建好了React项目的基础框架，并配置了与Deepseek AI通信所需的API密钥。现在，我们已经准备好深入探索流式输出的核心实现了。

3. 核心实现：Deepseek流式输出的奥秘

本节将深入探讨src/components/deepseek/index.jsx文件中的核心逻辑，特别是如何实现Deepseek AI的流式输出。我们将从非流式输出开始，逐步过渡到流式输出，并详细解析其中的关键技术点。

非流式输出（传统模式）：一次性获取结果

在理解流式输出之前，我们先回顾一下传统的非流式输出模式。在这种模式下，客户端向AI服务发送请求后，会等待服务完整生成所有内容，然后一次性将完整的响应数据返回给客户端。这就像你点了一份外卖，需要等到所有菜都做好并打包完毕，才能一次性送到你手上。

在代码中，非流式输出的实现相对简单：

// ... (部分代码省略)
const response = await fetch(endpoint, {
    method: 'POST',
    headers,
    body: JSON.stringify({
        model: 'deepseek-chat',
        messages: [{ role: "user", content: input }],
        stream: false // 关键：设置为false表示非流式输出
    })
})

// 非流式输出
const data = await response.json()
setContent(data.choices[0].message.content)
// ... (部分代码省略)

这里，stream: false告诉Deepseek API我们不需要流式响应。await response.json()会等待整个JSON响应体接收完毕并解析成功后，才将AI生成的内容data.choices[0].message.content设置到组件的状态中。

流式输出（Streaming）：实时获取内容

流式输出则完全不同。它允许AI服务在生成内容的同时，将数据分块发送给客户端。客户端可以实时接收并处理这些数据块，从而实现内容的渐进式显示。这就像你观看在线视频，视频内容是边下载边播放的，你不需要等到整个视频下载完成才能开始观看。

实现流式输出的关键在于fetch API的response.body属性，它返回一个ReadableStream对象。我们可以通过这个流来读取AI服务实时推送的数据。以下是send函数中流式输出的核心逻辑：

// ... (部分代码省略)
const response = await fetch(endpoint, {
    method: 'POST',
    headers,
    body: JSON.stringify({
        model: 'deepseek-chat',
        messages: [{ role: "user", content: input }],
        stream: streaming // 关键：根据checkbox状态决定是否流式输出
    })
})

if(streaming) {
    // 流式输出
    setContent('') // 清空之前的内容，准备接收流式数据
    const reader = response.body.getReader() // 1. 获取可读流的读取器
    const decoder = new TextDecoder() // 2. 初始化TextDecoder，用于解码二进制数据
    let done = false
    let buffer = '' // 3. 缓冲区，用于处理不完整的行

    while(!done) {
        const { value, done: readerDone } = await reader.read() // 4. 读取数据块
        done = readerDone
        const text = buffer + decoder.decode(value) // 5. 解码数据块并与缓冲区拼接
        buffer = '' // 清空缓冲区

        // 6. 处理多行数据，过滤出以'data:'开头的行
        const lines = text.split('\n').filter(line => line.startsWith('data:'))
        for (const line of lines) {
            const incoming = line.slice(6) // 7. 移除'data:'前缀
            if (incoming === '[DONE]') { // 8. 判断是否接收完毕
                done = true
                break
            }
            try {
                const parsed = JSON.parse(incoming) // 9. 解析JSON数据
                const content = parsed.choices[0].delta.content // 10. 提取AI生成的内容片段
                if (content) {
                    setContent(prev => prev + content) // 11. 拼接内容并更新UI
                }
            } catch (e) {
                console.error('Error parsing JSON:', e)
                // 如果JSON不完整，将其放入缓冲区，等待下一个数据块
                buffer = line // 将当前不完整的行放回缓冲区
            }
        }
    }
} else {
    // 非流式输出
    const data = await response.json()
    setContent(data.choices[0].message.content)
}

让我们逐一解析上述代码中的关键步骤：

  1. response.body.getReader()：获取可读流的读取器 当fetch请求的响应体是一个可读流时，我们可以通过调用response.body.getReader()方法来获取一个ReadableStreamDefaultReader对象。这个读取器允许我们逐块读取流中的数据。

  2. new TextDecoder()：解码二进制数据 从网络流中读取到的数据是Uint8Array类型的二进制数据。为了将其转换为可读的字符串，我们需要使用TextDecoder。它能够根据指定的编码（默认为UTF-8）将二进制数据解码为文本。

  3. let buffer = ''：缓冲区 在流式传输中，数据块可能在任意位置被分割。这意味着一个数据块可能只包含一个JSON行的前半部分，而其后半部分在下一个数据块中。为了正确处理这种情况，我们需要一个buffer来暂存不完整的行，并与后续接收到的数据拼接后再进行解析。

  4. await reader.read()：读取数据块 reader.read()方法返回一个Promise，当新的数据块可用时，Promise会解析为一个对象，包含value（Uint8Array类型的数据块）和done（一个布尔值，表示流是否已结束）。我们使用while(!done)循环来持续读取数据，直到流结束。

  5. const text = buffer + decoder.decode(value)：解码与拼接 将当前数据块解码为文本，并与buffer中可能存在的上一个不完整的数据拼接起来，形成一个完整的字符串，以便后续处理。

  6. text.split('\n').filter(line => line.startsWith('data:'))：处理多行数据 Deepseek（以及许多其他AI服务）在流式输出时，会以data: 作为每行有效JSON数据的开头，并以\n作为行分隔符。我们首先将接收到的文本按行分割，然后过滤出所有以data:开头的行，这些才是我们真正需要处理的AI响应数据。

  7. line.slice(6)：移除data:前缀 在解析JSON之前，我们需要将每行数据开头的data: （包含冒号和空格，共6个字符）移除。

  8. if (incoming === '[DONE]')：判断流是否结束 当AI服务完成所有内容的生成后，会发送一个特殊的data: [DONE]消息。收到这个消息后，我们就可以确定流已经结束，可以跳出循环。

  9. JSON.parse(incoming)：解析JSON数据 每一行data:后面的内容都是一个JSON字符串，我们需要将其解析为JavaScript对象，以便访问其中的AI生成内容。

  10. parsed.choices[0].delta.content：提取内容片段 在Deepseek的流式响应中，AI生成的内容片段位于choices[0].delta.content路径下。delta对象表示的是当前数据块相对于上一个数据块的增量内容。

  11. setContent(prev => prev + content)：拼接内容并更新UI 最后，我们将提取到的内容片段追加到content状态变量中。React会自动检测到状态的变化，并重新渲染组件，从而实现内容的实时渐进式显示。prev => prev + content这种函数式更新方式可以确保我们总是基于最新的状态进行更新，避免闭包问题。

通过上述步骤，我们成功地实现了AI流式输出。当用户输入问题并选择“启用流式输出”时，AI的回复将像打字机一样，一个字一个字地呈现在屏幕上，极大地提升了交互的流畅感。

4. 用户体验优化：前端交互与样式

一个功能完善的应用不仅需要强大的后端支持，更离不开优秀的前端交互和美观的界面设计。在我们的Deepseek AI流式输出应用中，Deepseek/index.jsx和Deepseek/index.css文件共同构建了用户友好的交互界面。本节将详细介绍这些前端元素的实现。

输入与发送：直观的用户交互

用户与AI的交互始于输入问题。我们的应用提供了一个文本输入框和一个发送按钮，让用户可以方便地输入并提交他们的问题。

<input 
    type="text" 
    className="input" 
    placeholder="在这里输入您想问的问题..."
    value={input}
    onChange={(e) => setInput(e.target.value)}
    onKeyPress={(e) => e.key === 'Enter' && send()} // 监听回车键
/>
<button onClick={send}>发送</button>
  • input状态： useState('')用于管理输入框的当前值。onChange事件监听用户输入，并实时更新input状态。
  • 回车发送： onKeyPress事件监听键盘按键，当用户按下Enter键时，也会触发send函数，这是一种常见的用户体验优化，提高了操作便捷性。
  • 发送按钮： onClick事件绑定send函数，点击按钮即可发送问题。

流式控制：赋予用户选择权

为了展示流式输出和非流式输出的区别，我们提供了一个复选框，允许用户自由选择是否启用流式输出。这不仅增加了应用的灵活性，也方便开发者进行测试和演示。

<div className="streaming-control">
    <input 
        type="checkbox" 
        id="streaming"
        onChange={(e) => setStreaming(e.target.checked)} 
    />
    <label htmlFor="streaming">启用流式输出</label>
</div>
  • streaming状态： useState(false)管理复选框的选中状态，决定了send函数中stream参数的值。
  • onChange事件： 当复选框状态改变时，setStreaming(e.target.checked)会更新streaming状态，从而影响下一次AI请求的行为。

状态管理：React Hooks的妙用

在Deepseek组件中，我们使用了React的useState Hook来管理组件的内部状态，包括用户输入、AI回复内容以及流式输出的开关状态。这使得组件的逻辑清晰、易于维护。

  • input: 存储用户在输入框中键入的问题。
  • content: 存储AI的回复内容。在流式输出模式下，这个状态会不断更新，实现内容的渐进显示。
  • streaming: 存储流式输出复选框的选中状态。

CSS样式：美化你的AI应用

src/components/deepseek/index.css文件负责整个界面的视觉呈现。它定义了应用的布局、颜色、字体、输入框、按钮以及AI回复区域的样式，确保应用不仅功能强大，而且美观易用。

一些关键的CSS样式点包括：

  • .container： 定义了整个应用的布局，使用Flexbox实现居中和垂直排列，并设置了渐变背景色，使界面看起来现代而舒适。

  • .input-section 和 .response： 这两个类定义了输入区域和回复区域的样式，包括背景色、圆角、阴影和模糊效果，营造出一种“玻璃拟态”的视觉风格。

  • .input 和 button： 定义了输入框和按钮的样式，包括边框、圆角、内边距和过渡效果，提升了交互的视觉反馈。

  • .response-content： AI回复内容的显示区域，设置了背景色、左侧边框、内边距和字体样式，使其内容清晰可读。white-space: pre-wrap; word-wrap: break-word;确保了AI回复中的换行和长单词能够正确显示。

  • .thinking 动画： 当AI正在“思考”时，thinking类会应用一个pulse动画，使“思考中...”的文本进行透明度渐变，为用户提供视觉上的反馈，减少等待的焦虑感。

    .thinking {
    color: #667eea;
    font-style: italic;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

  • 响应式设计： @media (max-width: 768px)媒体查询确保了应用在小屏幕设备（如手机）上也能良好显示，提供了更好的移动端用户体验。

通过这些前端交互和样式设计，我们不仅实现了AI流式输出的功能，还确保了用户在使用过程中能够获得流畅、直观且愉悦的体验。

5. 总结与展望

通过本文的深入探讨，我们详细了解了如何在React项目中实现AI流式输出，并以Deepseek AI为例，展示了从项目搭建到核心代码实现的完整过程。流式输出作为提升AI应用用户体验的关键技术，其优势不言而喻：它将漫长的等待变为实时的反馈，让用户能够“亲眼见证”AI的思考过程，极大地增强了交互的流畅性和沉浸感。

流式输出的核心要点在于：

  • stream: true参数： 告知AI服务以流式方式返回数据。
  • ReadableStream与getReader()： 利用fetch API获取响应体的可读流，并通过getReader()获取读取器。
  • TextDecoder： 将接收到的二进制数据解码为文本。
  • 循环读取与数据解析： 持续从流中读取数据块，处理data:前缀，解析JSON片段，并识别[DONE]标记以判断流的结束。
  • 内容拼接与UI更新： 将接收到的内容片段逐步拼接，并实时更新前端UI，实现渐进式显示。
  • 错误与不完整数据处理： 使用缓冲区（buffer）来处理可能出现的不完整数据行，确保数据解析的健壮性。

我们还探讨了如何通过前端交互（如输入框、发送按钮、流式开关）和CSS样式（如响应式布局、动画效果）来进一步优化用户体验，使整个应用不仅功能强大，而且易于使用和美观。

鼓励与展望：

现在，你已经掌握了在React项目中实现AI流式输出的核心技术。这仅仅是一个开始，你可以基于此项目进行更多的探索和扩展：

  • 历史记录功能： 增加一个功能，保存用户与AI的对话历史，方便回顾和继续对话。
  • 更完善的错误处理： 针对网络错误、API密钥失效、AI服务异常等情况，提供更友好的错误提示和重试机制。
  • Markdown渲染： 如果AI返回的内容包含Markdown格式，可以集成一个Markdown渲染库，使其在前端显示得更加美观。
  • 多模型支持： 尝试集成其他AI模型，让用户可以选择不同的AI进行交互。
  • 语音输入/输出： 结合语音识别和语音合成技术，实现更自然的语音交互体验。

AI技术与前端开发的结合，正在为我们带来前所未有的可能性。流式输出只是其中一个缩影，它展示了如何通过精巧的技术实现，将复杂的技术概念转化为用户可感知的流畅体验。未来，随着AI能力的不断提升和前端技术的持续演进，我们有理由相信，AI应用将变得更加智能、更加人性化，并深度融入到我们生活的每一个角落。希望本文能为你打开AI前端开发的大门，激发你创造更多精彩应用的灵感！

avatar
文章
阅读
粉丝