简介

SSE 的全称是 Server Sent Events，即服务器推送事件。它是一种基于 HTTP 的服务器到客户端的单向（半双工）通信机制，使服务器能够主动将实时数据推送给客户端，而不需要客户端多次发起请求。

官方文档：https://developer.mozilla.org/en-US/docs/Web/API/EventSource

服务端-php

 
 // 这行代码用于关闭输出缓冲。关闭后，脚本的输出将立即发送到浏览器，而不是等待缓冲区填满或脚本执行完毕。
ini_set('output_buffering', 'off');
// 这行代码禁用了 zlib 压缩。通常情况下，启用 zlib 压缩可以减小发送到浏览器的数据量，但对于服务器发送事件来说，实时性更重要，因此需要禁用压缩。
ini_set('zlib.output_compression', false);
// 这行代码使用循环来清空所有当前激活的输出缓冲区。ob_end_flush() 函数会刷新并关闭最内层的输出缓冲区，@ 符号用于抑制可能出现的错误或警告。
while (@ob_end_flush()) {
}
// 这行代码设置 HTTP 响应的 Content-Type 为 text/event-stream，这是服务器发送事件（SSE）的 MIME 类型。
header('Content-Type: text/event-stream');
// 这行代码设置 HTTP 响应的 Cache-Control 为 no-cache，告诉浏览器不要缓存此响应。
header('Cache-Control: no-cache');
// 这行代码设置 HTTP 响应的 Connection 为 keep-alive，保持长连接，以便服务器可以持续发送事件到客户端。
header('Connection: keep-alive');
// 这行代码设置 HTTP 响应的自定义头部 X-Accel-Buffering 为 no，用于禁用某些代理或 Web 服务器（如 Nginx）的缓冲。这有助于确保服务器发送事件在传输过程中不会受到缓冲影响
header('X-Accel-Buffering: no');


// 开启输出缓冲
ob_start();
while (true) {
    $json = json_encode(['data' => ['time' => date('Y-m-d H:i:s')]], JSON_UNESCAPED_UNICODE);
    //data:\n\n不能少，sse固定格式
    echo "data:{$json}\n\n";
    //刷新缓冲区
    ob_flush();
    //将输出缓冲区的内容立即发送到客户端
    flush();
    sleep(1);
}

前端

    if(!!window.EventSource) {
        var sse = new EventSource('/log/swoole_log_sse');
        //通信事件
        sse.onmessage = function (event) {
            var response  = JSON.parse(event.data);
            console.log(response);
            htmlProcess(response); // 数据处理
        };
        // 打开事件
        sse.onopen = function (event) { console.log('连接成功'); };
        //关闭事件
        sse.onclose = function(event) {console.log('连接关闭');};
        //错误事件
        sse.onerror = function (event) {
            console.error('连接失败');
        };
    } else {
        alert('您的浏览器不支持SSE');
    }