AI应用的流式输出，都在使用的 SSE 协议实现

by nick / On 2025年6月22日 / In 后端开发

自从 ChatGPT 发布后，各类基于 AI 大模型开发出来的应用百花齐放。

比如 AI 智能客服，知识库各类 AI Agent，有关注这些工具在回复内容的时候，都是一个字一个字显示出来，不像搜索引擎直接返回一个网页的内容。

查看各类开源 AI 应用的源码实现，都是用 SSE 协议实现。

SSE协议简介

SSE（Server-Sent Events）是一种让服务器向浏览器推送信息的技术，基于HTTP协议，利用其长连接特性，在客户端与服务器之间建立持久连接，实现服务器向客户端的实时数据推送。

SSE是HTML5规范的一部分，由服务端与浏览器端的通讯协议和浏览器端的EventSource对象组成。

SSE 的一些关键特性：

单向通信:
SSE 仅支持服务器向客户端发送数据，客户端不能向服务器发送数据，这与WebSocket 不同，后者是双向通信。
长连接:
SSE 使用HTTP 长连接，服务器可以持续向客户端发送数据，而不需要客户端频繁地重新建立连接。
自动重连:
SSE 客户端在连接断开时会自动尝试重新连接，这使得SSE 具有较好的容错性和可靠性。
基于文本:
SSE 使用文本格式来传输数据，通常是text/event-stream，这使得调试和理解数据更容易。

SSE 的典型应用场景包括：

实时社交媒体更新:
例如，当有新消息或动态时，服务器可以立即推送给客户端。
股票行情更新:
股票市场的价格经常变动，SSE 可以让用户实时看到新的股票价格。
体育比分更新:
赛事比分、统计信息等，可以通过 SSE 在比赛进行时实时更新。
实时通知:
例如，当有新的订单、消息等，服务器可以主动通知客户端。
IM 即时通讯
例如，客服 AI 工具

例子

网页前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSE示例</title>
</head>
<body>
    <div id="result"></div>
    <script>
        // 检查浏览器是否支持EventSource
        if (!!window.EventSource) {
            var sse = new EventSource('sse.php');

            // 监听消息事件
            sse.onmessage = function (event) {
                var resultDiv = document.getElementById('result');
                resultDiv.innerHTML += event.data + '<br>';
            };

            // 监听打开连接事件
            sse.onopen = function (event) {
                console.log('连接已打开');
            };

            // 监听关闭连接事件
            sse.onclose = function (event) {
                console.log('连接已关闭');
            };

            // 监听错误事件
            sse.onerror = function (event) {
                console.error('连接出错');
            };
        } else {
            alert('您的浏览器不支持SSE');
        }
    </script>
</body>
</html>

PHP 后端代码

<?php
// 关闭输出缓冲
ini_set('output_buffering', 'off');
// 清空所有当前激活的输出缓冲区
while (@ob_end_flush()) {}

// 设置HTTP响应头
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive');
header('X-Accel-Buffering: no');

// 开启输出缓冲
ob_start();
// 发送消息的循环
while (true) {
    // 生成随机数并发送消息
    $number = rand(1, 10);
    echo "data: $number\n\n";
    // 刷新缓冲区，将内容发送到客户端
    ob_flush();
    flush();
    // 模拟快速响应，暂停1毫秒
    usleep(1000);
}