基于ThinkPHP+Bootstrap在线购物商城网站（用thinkphp+js模拟ChatGPT逐字打印的效果踩坑指南）

最近对ChatGPT里逐字输出的效果很感兴趣              ，起初以为是接口内容返回之后使用css+js实现的纯前端效果 
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，深入一调研发现用的是Server-Sent Events（SSE）数据流实现的













，看了sse的基本原理之后
  
  
  
  
  
  
  ，就开始上手测试了 
  
  
  
  
  
  
 ，结果碰到一个小坑 


 


 


 


 


 


 


，卡了很久
 
 
 
 
 
 
 ，这里分享一下：

用thinkPHP实现sse可以这样：

在控制器方法中侦听事件源  
   
   
   
   
   
   
 ，并将数据输出到客户端              。以下是输出要实时推送的事件的示例代码： public function stream() { 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的标准返回方法：

public function stream() { $response = new Response(); $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 = new EventSource("<?php echo url(stream); ?>"); source.addEventListener(my_event, function(event) { console.log(event.data); });

然后就会发现 
 
 
 
 
 
 
 
 
 
 
 
 
 
，并没有期待的效果出现




















，并且浏览器会报错：

EventSources 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_flush();解决问题
  
  
  
  
  
  
  。

以下是正确的PHP代码示例： public function stream() { // 关闭输出缓冲 ob_end_flush(); 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); } }