你有没有注意到 ChatGPT 的回复是一个字一个字"打"出来的，而不是等几秒钟后"啪"一下全部出现？

哈哈，这就是所谓的“打字机效果”，今天咱就来聊聊怎么实现这个效果。

说实话，用户体验这东西hen重要，不然你想想，你发个消息，结果干等几秒钟才有回复，和边等边kan到文字蹦出来哪个感觉geng好？

那怎么实现呢？ 得了解下 SSE，简单来说就是服务端Ke以往客户端推送事件。

格式就data: {...} 这么简单，表示结束，不需要搞得那么复杂用 WebSocket。

let buffer = '';function processChunk { buffer += text; const lines = buffer.split; buffer = lines.pop; for { if || line === 'data: ') continue; try { const data = JSON.parse); const content = data.choices?.delta?.content; if onContent; } catch { console.warn; } }}

这个函数干啥的？就是处理后端传来的 SSE 数据，解析 JSON，拿到 content 内容，然后调用 onContent 函数geng新界面。

技术上的区别就一个参数：stream: true。

stream = client.chat.completions.create

JS 和 Python 的 openai SDK dou把 SSE 解析封装好了你不需要手动去拼 data: 行，直接遍历就行，哈哈，是不是hen方便？

前端怎么接呢？这才是前端开发者的主场了！

async function fetchStream { const response = await fetch, }); const reader = response.body.getReader; const decoder = new TextDecoder; while { const { done, value } = await reader.read; if break; const text = decoder.decode; // ... 解析 SSE 数据，geng新 UI }}

核心就三步：fetch 请求，后端返回 SSE 数据，前端解析数据geng新界面。

有时候网络一下子推过来一大坨 token，屏幕上"哗"地蹦出一大段文字；有时候又卡顿半秒才来下一个 token。这种忽快忽慢的节奏感hen差，用户感觉不到"AI 在稳定地打字"。

解决方案——用 buffer 拼接：

生产者流式 chunk 到达后往 buffer 里追加文本，不直接geng新 UI。

消费者一个定时器（setInterval 或 requestAnimationFrame)以固定频率从 buffer 中取出少量字符，geng新到界面。

import { useState, useRef, useCallback } from 'react';function useTypewriterStream { // ... 状态和 ref 定义 const startTypewriter = useCallback => { timerRef.current = setInterval => { // 从 buffer 取字符，geng新 UI // ... geng新 messages 状态的逻辑 }, TICK_MS); }, ); // ... 其他逻辑}

TICK_MS 和 CHARS_PER_TICK 这两个参数Ke以调优，打字速度和流畅度就靠它们了！你Ke以根据场景调整，比如阅读理解场景慢点好，普通聊天Ke以快点。

SSE 和 WebSocket douNeng实现实时通信，但 SSE 简单啊，只需要服务器往客户端推数据，不需要客户端发数据给服务器，所以咱用 SSE 就行了！你要是Zuo个聊天室啥的，需要双向通信，那可Neng得考虑 WebSocket 了。

一下吧～

SSE hen简单，但hen有用！

Typewriter Buffer 让打字效果geng丝滑！

SSE + Typewriter Buffer + React/Vue，Neng帮你Zuo出媲美 ChatGPT 的 AI 打字机效果！

接下来聊聊 Prompt 工程吧～ 实际项目中，前端不会直接调 AI API。通常是：前端 → 后端 → AI API 。 所以后端还得Zuo一层转发，用 FastAPI 实现一个 SSE 流式接口： @app.postasync def chat: # 转发请求到 AI API，保持流式响应 # 用 StreamingResponse 返回 SSE 格式数据给前端 加上这段 CSS，你的 AI 聊天界面就有了和 ChatGPT 一样的光标闪烁效果～ .cursor { animation: blink .8s step-end infinite;} 关键设计点：

assistant 消息Zui后加个▊元素表示光标

CSS animation 实现光标闪烁

前后端配合 + 一点 CSS 小技巧，就NengZuo出媲美 ChatGPT 的 AI 打字机效果，是不是hen酷？ 讨论话题：你在实现 AI 流式输出时踩过哪些坑？是用 SSE 还是 WebSocket？评论区聊聊～