PHP结合JavaScript SSE(流式显示)实现服务器实时推送功能

2024-3-25

简介

SSE 的全称是 Server Sent Events，即服务器推送事件。它是一种基于 HTTP 的服务器到客户端的单向（半双工）通信机制，使服务器能够主动将实时数据推送给客户端，而不需要客户端多次发起请求。
官方文档：https://developer.mozilla.org/en-US/docs/Web/API/EventSource

解决了什么问题

常规的HTTP请求响应流程无法做到服务器主动推送数据到客户端，SSE可以解决此问题。

适用场景

实时更新订阅数据、实时通知、实时日志监控、实时数据统计、简单的文本数据传输。

示例代码

服务端
// 这行代码用于关闭输出缓冲。关闭后，脚本的输出将立即发送到浏览器，而不是等待缓冲区填满或脚本执行完毕。
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');


/**
 * @function 封装sse格式的数据
 * @param  $data string
 * @return string
 */
function sse($data) {
    //data:\n\n不能少，sse固定格式
    return "data:{$data}\n\n";
}

// 开启输出缓冲
ob_start();
while (true) {
    $json = json_encode(['data' => ['time' => date('Y-m-d H:i:s')]], JSON_UNESCAPED_UNICODE);
    echo sse($json);
    //刷新缓冲区
    ob_flush();
    //将输出缓冲区的内容立即发送到客户端
    flush();
    sleep(1);
}
客户端
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>

<script>
    if(!! window.EventSource) {
        var sse = new EventSource('http://127.0.0.1/test/sse.php');
        //通信事件
        sse.onmessage = function (event) {
            var response  = JSON.parse(event.data);
            console.log(response.data.time);
        };

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

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

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

服务端对客户端单向通信是实时了，可服务端数据发生变化时，怎么及时同步到SSE模块呢？依客户端显示通知数量为需求做个简单示例

在实战项目中的封装

/**
 * @function 与客户端server send event通信方式
 * @param    $callback    callable 回调，若返回数组代表要输出json，返回null代表本次循环不进行输出
 * @param    $millisecond int      数据分发间隔，单位：毫秒
 * @return   string
 * @other    void
 */
function sse($callback, $millisecond = 1000) {
    set_time_limit(0);
    ini_set('output_buffering', 'off');
    ini_set('zlib.output_compression', false);
    while (@ob_end_flush()) {}
    header('Content-Type: text/event-stream; Charset=UTF-8');
    header('Cache-Control: no-cache');
    header('Connection: keep-alive');
    header('X-Accel-Buffering: no');
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Credentials: true");
    header('Access-Control-Allow-Methods: *');
    header('Access-Control-Allow-Headers: *');

    ob_start();
    while (true) {
        $callback_res = $callback();
        if($callback_res !== null) {
            $data = json_encode($callback_res, JSON_UNESCAPED_UNICODE);
            echo "data:{$data}\n\n";
        }
        ob_flush();
        flush();
        usleep($millisecond * 1000);
    }
}

//调用
sse(function() {
    if('业务逻辑数据存在') {
        return ['k' => 'v'];
    }
    return null;
}, 1000);

SSE优点

  1. 实现简单易用。
  2. 有断线重连的能力，即使网络中断，SSE仍旧会尝试每隔几秒自动重试的机制。
  3. 避免了客户端使用短轮询造成请求量过大的问题，避免在项目中因需要一个实时的通信小模块就需要另外搭建WebSocket的问题，得不偿失。

SSE缺点

  1. 完全不兼容IE浏览器。
  2. SSE是一种半双工通信，因为数据只能在一个方向上流动，即从服务器到客户端。与之相比，全双工通信（例如WebSocket）允许数据在两个方向上同时流动，允许双向的数据传输。
  3. 为了避免滥用和资源占用，一些浏览器可能会限制单个域名下的SSE连接数，例如同时最多打开6个连接。而另一些浏览器可能会限制整个浏览器实例中的SSE连接总数，这个限制不是由JavaScript语言本身所设定的，而是由浏览器实现所定义的。

SSE对比WebSocket

协议区别

协议：SSE是基于HTTP协议，而WebSocket则是独立的协议，它们都可以在浏览器和服务器之间建立持久的连接。

数据格式

SSE通过HTTP协议传输的数据格式是文本（通常是JSON格式），因此它适合用于传输简单的文本数据或者事件。而WebSocket可以传输文本和二进制数据，在处理音频、视频等大型数据时更有优势。

通信方式

SSE基于半双工模式，服务器可以通过发送事件流（event stream）来主动推送数据给客户端。客户端通过监听这些事件来接收数据。而WebSocket是全双工通信协议，客户端和服务器可以随时发送和接收数据。

兼容性

IE10及以上支持 WebSocket。但IE都不兼容SSE，并且不同浏览器对SSE兼容性不一样，可通过Polyfill解决，官网：https://developer.mozilla.org/en-US/docs/Glossary/Polyfill。

版权声明：
作者：admin
链接：http://blog.mryxh.cn/3511.html
文章版权归作者所有，未经允许请勿转载。
THE END
WebStorm自定义主题/护眼主题
<<上一篇
使用SSE技术调用OPENAI接口并实现流式输出，用PHP语言实现
下一篇>>
相关推荐
thumbnail

fasadmin 的lang接口任意文件读取漏洞(CVE-2024-7928)解决方案

今天网警来说lang接口存在漏洞. 我按网警说的的路径 /index/ajax/lang?lang=..//..//application/database 安装了最新版本的fastadmin后访问这个路径依然……
2024-12-13 admin
33 0 0
thumbnail

关于php：Libreoffice headless处理结果未返回，但等待超时(环境异常变化导致php无法正常调用Libreoffice)

环境异常变化导致php无法正常调用Libreoffice，之前是正常执行的，突然出现的异常，异常表现就是php调用会一直卡着指导超时，命令行root用户正常调用。 问题原……
2024-08-27 admin
189 0 0
thumbnail

fastadmin后台 点击开关 弹出 你没有权限访问 角色组里面添加了，除了超级管理员其他的只要用状态开关就，没权限 解决办法

首发地址：https://ask.fastadmin.net/question/22863.html         然后再对应的后台控制器里面 加入 protected $multiFields = '你……
2024-08-21 admin
179 0 0
thumbnail

php怎么执行shell命令

要在PHP中执行shell命令，可以使用exec()函数、shell_exec()函数或system()函数。 exec()函数： exec(command, output, return_var); 复制代码 command……
2024-08-08 admin
191 0 0
Copyright © 2024 博客猫 CoreNext Powered by WordPress