用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);
});

然后就会发现，并没有期待的效果出现，并且浏览器会报错：
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_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);
    }
}