用thinkphp+js模拟ChatGPT逐字打印的效果踩坑指南

最近对ChatGPT里逐字输出的效果很感兴趣，起初以为是接口内容返回之后使用css+js实现的纯前端效果，深入一调研发现用的是Server-Sent Events（SSE）数据流实现的，看了sse的基本原理之后，就开始上手测试了，结果碰到一个小坑，卡了很久，这里分享一下：
直接问ChatGPT用thinkPHP如何实现SSE，会得到如下代码：
在控制器方法中侦听事件源，并将数据输出到客户端。以下是输出要实时推送的事件的示例代码：
【不正确示例】

publicfunctionstream(){header('Content-Type: text/event-stream');header('Cache-Control: no-cache');header('Connection: keep-alive');// 建立连接后，您可以输出初始化数据到客户端echo"event: sse_init\ndata: {}\n\n";flush();// 监听事件源，并输出实时事件while(true){$event='my_event';// 获取要发送的事件数据$data='Hello SSE!';// 输出事件到客户端echo"event: $event\ndata: $data\n\n";flush();// 休眠一段时间等待下次事件sleep(1);}}

上述代码会不断地监听 “my_event” 事件源，并将数据 “Hello SSE!” 输出到客户端。在每个事件发送之间，脚本会等待一秒钟以模拟实时数据流。

也可以用thinkPHP的标准返回方法：
【不正确示例】

publicfunctionstream(){$response=newResponse();$response->header('Content-Type','text/event-stream');$response->header('Cache-Control','no-cache');$response->header('Connection','keep-alive');// 建立连接后，您可以输出初始化数据到客户端$response->data("event: sse_init\n");$response->data("data: {}\n\n");// 监听事件源，并输出实时事件$count=0;while(true){$event='my_event';// 获取要发送的事件数据$data='Hello SSE! '.++$count;// 输出事件到客户端$response->data("event: $event\n");$response->data("data: $data\n\n");$response->send();// 休眠一段时间等待下次事件sleep(1);}}

然后在前端用js接收事件流：

var source =newEventSource("<?php echo url('stream'); ?>");
source.addEventListener('my_event',function(event){
    console.log(event.data);});

然后就会发现，并没有期待的效果出现，并且浏览器会报错：

EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.

这个问题卡了很久，PHP中已经设置了响应格式为

text/event-stream

，但是浏览器接收到的仍然是

text/html

格式，好像

$response->header('Content-Type', 'text/event-stream');

这句代码没有生效一样；
后来经过多方调查，ThinkPHP使用了数据缓冲来输出内容，这会导致有些响应格式没有生效，所以在上面的PHP代码中添加

ob_end_clean();

可以解决问题。
还有朋友会遇到一切看似正常，没有报错，返回头也是

text/event-stream

，但返回的事件流不是实时的，而是等很久最后一次性输出所有事件流，原因后面再说，先给出正确代码：
【正确示例】

publicfunctionstream(){// 检查当前缓冲区级别if(ob_get_level()>0){// 如果有缓冲区，则清空缓冲区ob_end_clean();}header('Content-Type: text/event-stream');header('Cache-Control: no-cache');header('Connection: keep-alive');// 重点，必须要加header('X-Accel-Buffering: no');// 建立连接后，您可以输出初始化数据到客户端echo"event: sse_init\ndata: {}\n\n";flush();// 监听事件源，并输出实时事件while(true){$event='my_event';// 获取要发送的事件数据$data='Hello SSE!';// 输出事件到客户端echo"event: $event\ndata: $data\n\n";flush();// 休眠一段时间等待下次事件sleep(1);}}

解释一下上面代码：
一开始的

ob_end_clean()

方法是清除之前的缓冲区域，使设置的返回头

header('Content-Type: text/event-stream');

生效，不然还会返回

text/html

格式，最终导致报错；
然后设置请求头，其他都好理解，重点是这句

header('X-Accel-Buffering: no');

，这段代码是强制关闭Nginx的代理缓存，其实也是关闭缓冲区域，不加这句话就会出现事件流最后一次性输出的问题；
然后就是使用

echo

• flush()
  

  方法向外输出事件流了，每次

  echo
  

  后面都要加上

  flush()
  

  ，强制输出事件流；

最后还有个大坑，不要用Apache，要用Nginx，似乎是因为Apache对

flush()

方法支持有问题，无论怎么搞，最终还是一次性输出事件流；