前端实现 AI 打字机效果失败？一文讲清 SSE + PHP 的坑与解决方案！-CSDN博客

本文链接：https://blog.csdn.net/Jinxiansen0211/article/details/149357457

💬 前端实现 AI 打字机效果失败？一文讲清 SSE + PHP 的坑与解决方案！

👋 收藏、点赞、关注不迷路！本篇文章将从实际开发中的问题出发，逐步带你排查和解决 SSE（Server-Sent Events）+ PHP 实现流式回复打字机效果失败的关键问题，适合接入 AI 回复、进度流更新、日志流等场景。

🚀 一、问题背景：为什么没有“打字机效果”？

项目中我们使用了后端 Content-Type: text/event-stream 的 SSE 协议，希望实现类似 ChatGPT 的 逐字流式显示效果。

然而，前端收到了所有片段，但它们都在同一时间戳内出现，打字机效果完全丢失了，内容一瞬间闪现。

看似后端是这样一条一条输出的：

echo "data: {\"content\":\"象\"}\n\n";
echo "data: {\"content\":\"性\"}\n\n";

但前端收到的却是：

10:44:05.720 message: {"content":"象"}
10:44:05.720 message: {"content":"性"}
10:44:05.720 message: {"content":"常被"}

❗明明后端逐条 echo，为何前端会批量一次性接收？

🧠 二、核心问题分析：你以为是网络慢，其实是缓冲没清！

✅ 本质原因：PHP + Web 服务器缓冲未关闭

PHP 默认有 输出缓冲机制，即使你 echo + flush()，但 Web 服务器（Apache/Nginx）仍然可能将多次输出 缓存起来，等数据量足够后再一次性推送给浏览器！

🔧 三、如何解决？从服务端到前端全链路优化

✅ 1. 正确设置 PHP 服务端（以 `sse.php` 为例）

<?php
header('Content-Type: text/event-stream; charset=UTF-8');
header('Cache-Control: no-cache');
header('X-Accel-Buffering: no'); // 告诉 Nginx 不缓存

while (ob_get_level() > 0) ob_end_flush(); // 清理缓冲
ob_implicit_flush(true); // 开启隐式刷新

$chunks = ['象', '性', '：', '“111”', '常被', '认为', '...'];

foreach ($chunks as $chunk) {
    echo "data: " . json_encode(['content' => $chunk]) . "\n\n";
    flush(); // 强制刷新
    usleep(150000); // 模拟 150ms 打字
}

✅ 2. Nginx 的正确配置（禁止缓冲、关闭压缩）

location /sse.php {
  include fastcgi_params;
  fastcgi_pass 127.0.0.1:9000;

  proxy_buffering off;          # ✅ 禁用缓冲
  fastcgi_keep_conn on;
  gzip off;                     # ✅ 禁用压缩
  add_header Cache-Control no-cache;
  add_header X-Accel-Buffering no;
  add_header Access-Control-Allow-Origin *;
}

🔥 proxy_buffering off 和 X-Accel-Buffering: no 是关键！

✅ 3. 前端监听 SSE 流（支持逐字拼接）

const output = ref('')

const source = new EventSource('/sse.php')

source.addEventListener('message', (event) => {
  const data = JSON.parse(event.data)
  output.value += data.content
})

✅ 4. 加强前端体验：加入节奏缓冲器（可选）

为防止多个字符瞬间渲染，也可以添加“打字节奏”控制器：

const buffer = ref<string[]>([])
const output = ref('')
let timer: number | null = null

function startTyping() {
  if (timer) return
  timer = setInterval(() => {
    if (buffer.value.length === 0) {
      clearInterval(timer!)
      timer = null
      return
    }
    output.value += buffer.value.shift()
  }, 50)
}

source.addEventListener('message', (event) => {
  const data = JSON.parse(event.data)
  buffer.value.push(data.content)
  startTyping()
})

❗四、常见踩坑总结

问题	排查建议
数据全部同一时间到达	✅ 服务端未 `flush()`，PHP 缓冲未关闭
Nginx 依旧缓冲	✅ 是否漏写 `proxy_buffering off` 或未设置 `X-Accel-Buffering: no`
SSE 内容不生效	✅ 每条消息以 `\n\n` 结尾、格式为 `data: xxx`
无打字节奏	✅ 前端加入节奏器模拟延迟