JavaScript 中 SSE 怎么配合后端实现大模型流式输出（Streaming）的打字机效果-js教程-PHP中文网

实现大模型流式输出“打字机”效果需前后端协同：后端按 token 或语义片段通过 sse 逐条推送（如 data: {"text": "今"}\n\n），前端用 eventsource 接收并缓存至数组，再以 requestanimationframe 控制节奏逐字渲染，同时处理超时、乱序、滚动等边界情况。

javascript 中 sse 怎么配合后端实现大模型流式输出（streaming）的打字机效果

要实现大模型流式输出的“打字机”效果，关键不在前端动画本身，而在于前后端协同完成“逐 token 传输 + 逐段渲染”这一闭环。SSE（Server-Sent Events）只是管道，真正让文字“蹦出来”的，是后端边生成边推、前端边收边显的配合。

后端必须按 token 或语义片段推送

大模型（如 Llama、Qwen、ChatGLM）本质是自回归生成——每步只产出一个 token。后端不能等整句生成完再返回，必须启用流式模式（如 OpenAI SDK 的 stream=True，Ollama 的 --stream，或 FastAPI 中手动 yield 每个 chunk）。每条响应应为独立的 SSE 事件：

格式严格为：data: {"text": "今"}\n\n（注意末尾两个换行符）
避免发整句，例如不要发 data: {"text": "今天天气不错"}\n\n，否则前端无法逐字控制节奏
推荐在标点、换行、空格后切分，比如 "今天" → "今"、"天"、" "、"天"、"气"… 更自然
响应头必须包含：Content-Type: text/event-stream、Cache-Control: no-cache、Connection: keep-alive

前端用 EventSource 接收并缓存片段

创建连接后，不直接渲染，而是先累积原始数据块，为后续节奏控制留出空间：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

用 new EventSource(url) 初始化，URL 可带鉴权参数（如 ?token=xxx），但不支持自定义 headers；若需 Authorization，改用 fetch + ReadableStream
监听 message 事件，解析 event.data，用 JSON.parse() 提取 text 字段
把所有 text 存入数组（如 buffer = []），而非立即拼成字符串，便于暂停、回退、去重等操作
监听 error：连接中断时调用 eventSource.close()，延迟 1–3 秒后重建新实例（带指数退避更稳）

用 requestAnimationFrame 控制“打字”节奏

视觉上的逐字效果，靠的是在 buffer 有内容时，以人眼可感知的节奏（20–60ms/字）将字符插入 DOM：

启动渲染函数，每次取 buffer[0]，拆成单字符数组（str.split('')），逐个追加到容器的 textContent（不用 innerHTML，防 XSS）
用 requestAnimationFrame 驱动比 setTimeout 更平滑、节电，也更契合浏览器刷新机制
加入暂停控制：设 isPaused = false，在 rAF 循环中检查该标志，为 true 时跳过本次插入
光标效果用 CSS 实现：::after { content: "|"; animation: blink 1s step-end infinite; }，连接建立即显示，收到 data: [DONE]\n\n 后移除