获课：aixuetang.xyz/22452/

前后端联调 AI 流式输出打字机效果实战指南

在 AI 对话应用中，大模型生成完整回复往往需要数秒甚至数十秒。若采用传统的同步请求模式，用户将面临漫长的空白等待，极易产生焦虑感。而“打字机效果”（即边思考边输出）则是解决这一体验痛点的核心方案。实现这一效果，需要前后端基于 SSE 协议与响应式编程进行紧密配合。

一、 核心协议：SSE 与单向数据流的契约

流式输出的技术基石是 SSE（Server-Sent Events）协议。与 WebSocket 的双向通信不同，SSE 是一种基于 HTTP 的轻量级单向推送协议，完美契合大模型“服务端持续生成，客户端持续渲染”的场景。在后端响应时，必须严格遵守 SSE 的数据格式规范：每次推送的文本片段需以 data: 开头，并以两个换行符 \n\n 结尾。同时，响应头必须明确声明 Content-Type: text/event-stream、Cache-Control: no-cache 以及 Connection: keep-alive，以此告知浏览器保持长连接并禁用缓存。

二、 后端架构：响应式流与增量推送

在 Java 等后端生态中，实现流式输出的核心在于引入响应式编程框架（如 Spring WebFlux）。传统的同步阻塞调用需被替换为支持异步数据流的 .stream() 方法。大模型每生成一个 Token，后端便将其封装为标准的 SSE 事件块进行推送。在此过程中，后端还需做好异常处理与生命周期管理：当模型生成完毕或发生异常时，需主动发送结束标识（如 data: [DONE]）以通知前端释放资源；同时，必须监听客户端断开连接的事件，及时清理后端的定时器或中断任务，防止内存泄漏。

三、 前端接收：ReadableStream 与缓冲区解析

面对流式数据，前端摒弃了传统的 AJAX 轮询，转而使用 Fetch API 结合 ReadableStream 进行处理。通过调用 response.body.getReader() 获取读取器，前端可以逐块读取二进制数据，并利用 TextDecoder 将其解码为字符串。由于网络传输的特性，单次读取到的数据可能包含多个不完整的 SSE 消息，因此必须在内存中维护一个 Buffer（缓冲区），通过按行分割和正则匹配，精准剥离出每一个完整的 JSON 数据片段并进行渲染。

四、 体验打磨：智能滚动与防抖渲染

纯粹的流式拼接仍不足以达到完美的交互体验，还需辅以多项工程优化。首先是自动滚动机制：当新内容超出可视区域时，系统需实时判断用户的滚动状态。若用户处于底部，则自动平滑滚动至最新内容；若用户主动向上翻阅历史记录，则立即暂停自动滚动，尊重其阅读节奏。其次是性能优化：大模型高频吐字可能导致 DOM 频繁重绘引发卡顿，前端可采用防抖节流策略或虚拟滚动技术，将高频更新的文本合并渲染。最后，配合闪烁光标动画与发送按钮的状态锁定，即可打造出媲美原生应用的丝滑对话体验。