0Pricing
AI SaaS Builder · 课时

在用户界面中流式传输人工智能响应

学习如何将人工智能输出逐令牌传输到前端，让人工智能 SaaS 在长时间生成期间依然快速响应，而不是陷入停滞。

在用户界面中流式传输人工智能响应 是 CoddyKit 上的免费 AI SaaS Builder 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 AI SaaS Builder 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 AI SaaS Builder 课程共包含 4 节课。

流式传输为何能改善用户体验

等待 10 秒才能看到完整答案，会让人觉得应用出了问题。流式传输会在文本生成时逐步显示内容，让应用感觉更快速、更有活力。

流式传输的工作原理

模型会逐步发出令牌。服务器将每个数据块转发给浏览器，浏览器再将其追加到屏幕上。

服务器发送事件

SSE 是一种通过 HTTP 从服务器向客户端传输的简单单向数据流，非常适合令牌流式传输。

res.setHeader('Content-Type', 'text/event-stream')
res.write('data: Hello\n\n')
res.write('data:  world\n\n')

在客户端读取数据流

使用 Fetch 的流式读取器（或 EventSource）读取数据块，并在数据到达时更新状态。

const reader = res.body.getReader()
while (true) {
  const { value, done } = await reader.read()
  if (done) break
  appendText(new TextDecoder().decode(value))
}

渐进式渲染

将数据块追加到状态缓冲区并进行渲染。避免每收到一个令牌就重新渲染整个页面，以保持界面流畅。

setText(prev => prev + chunk)

显示输入指示器

在第一个令牌到达之前，显示加载中或光标动画，让用户知道处理已经开始。

处理取消操作

允许用户停止较长时间的生成过程。中止请求可以节省令牌和费用。

const controller = new AbortController()
fetch('/generate', { signal: controller.signal })
// stop button:
controller.abort()

安全地流式渲染 Markdown

部分 Markdown 在流式传输过程中可能出现渲染异常。请逐步渲染，但要对最终 HTML 进行清理，以防止注入。

处理中途的错误

数据流可能会在中途失败。请检测已中断的数据流，并显示清晰的重试选项，而不是留下被截断的文本。

无障碍注意事项

快速更新的文本可能会让屏幕阅读器难以处理。请使用礼貌式实时区域，并在完成时进行播报，而不是播报每个令牌。

<div aria-live="polite">{streamedText}</div>

不应使用流式传输的情况

对于简短的结构化输出（例如单个对象），流式传输会增加复杂性，但收益很小。请将其留给较长且便于人类阅读的文本。

快速检查

检查您对流式传输的了解。

总结

您已经学习了令牌流式传输的工作原理，如何使用SSE传递并在客户端接收、增量渲染、显示正在输入指示器、支持取消、处理流传输过程中的错误、确保无障碍访问，以及何时不值得使用流式传输。

常见问题解答

「在用户界面中流式传输人工智能响应」课时是免费的吗？

是的 — 「在用户界面中流式传输人工智能响应」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 AI SaaS Builder 课程的其余内容，请升级到 CoddyKit PRO。 AI SaaS Builder 课程共包含 4 节课。

「在用户界面中流式传输人工智能响应」这节课中我会学到什么？

学习如何将人工智能输出逐令牌传输到前端，让人工智能 SaaS 在长时间生成期间依然快速响应，而不是陷入停滞。 你通过在浏览器中直接运行的动手代码来练习 AI SaaS Builder，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 AI SaaS Builder 需要有经验吗？

无需任何先前经验。CoddyKit 上的 AI SaaS Builder 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「在用户界面中流式传输人工智能响应」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 AI SaaS Builder 课中编写并运行代码吗？

能。每节 AI SaaS Builder 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. SaaS 前端框架
  2. 可视化人工智能输出
  3. 用户体验（UX）最佳实践
  4. 在用户界面中流式传输人工智能响应
← 返回 AI SaaS Builder