发帖
翼度科技»论坛 › 编程开发 › PHP › 查看内容

浅谈PHP结合JavaScript SSE(Server Sent Events)实现服务器实时推送功能

萨伊尔德

6

主题

6

帖子

18

积分

新手上路

Rank: 1

积分
18
显示全部楼层
简介

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

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

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

服务端
  1. // 这行代码用于关闭输出缓冲。关闭后，脚本的输出将立即发送到浏览器，而不是等待缓冲区填满或脚本执行完毕。
  2. ini_set('output_buffering', 'off');
  3. // 这行代码禁用了 zlib 压缩。通常情况下，启用 zlib 压缩可以减小发送到浏览器的数据量，但对于服务器发送事件来说，实时性更重要，因此需要禁用压缩。
  4. ini_set('zlib.output_compression', false);
  5. // 这行代码使用循环来清空所有当前激活的输出缓冲区。ob_end_flush() 函数会刷新并关闭最内层的输出缓冲区，@ 符号用于抑制可能出现的错误或警告。
  6. while (@ob_end_flush()) {}
  7. // 这行代码设置 HTTP 响应的 Content-Type 为 text/event-stream，这是服务器发送事件（SSE）的 MIME 类型。
  8. header('Content-Type: text/event-stream');
  9. // 这行代码设置 HTTP 响应的 Cache-Control 为 no-cache，告诉浏览器不要缓存此响应。
  10. header('Cache-Control: no-cache');
  11. // 这行代码设置 HTTP 响应的 Connection 为 keep-alive，保持长连接，以便服务器可以持续发送事件到客户端。
  12. header('Connection: keep-alive');
  13. // 这行代码设置 HTTP 响应的自定义头部 X-Accel-Buffering 为 no，用于禁用某些代理或 Web 服务器（如 Nginx）的缓冲。这有助于确保服务器发送事件在传输过程中不会受到缓冲影响
  14. header('X-Accel-Buffering: no');
  17. /**
  18. * @function 封装sse格式的数据
  19. * @param  $data string
  20. * @return string
  21. */
  22. function sse($data) {
  23.     //data:\n\n不能少，sse固定格式
  24.     return "data:{$data}\n\n";
  25. }
  27. // 开启输出缓冲
  28. ob_start();
  29. while (true) {
  30.     $json = json_encode(['data' => ['time' => date('Y-m-d H:i:s')]], JSON_UNESCAPED_UNICODE);
  31.     echo sse($json);
  32.     //刷新缓冲区
  33.     ob_flush();
  34.     //将输出缓冲区的内容立即发送到客户端
  35.     flush();
  36.     sleep(1);
  37. }
复制代码
客户端
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  9. </body>
  12. </html>
复制代码
服务端对客户端单向通信是实时了，可服务端数据发生变化时，怎么及时同步到SSE模块呢？依客户端显示通知数量为需求做个简单示例

方案1：纯粹轮询模式

做法：不停对数据库做查询。
优点：实现简单。
缺点：很不优雅的方案，性能消耗大。
场景：数据量不大且赶工时，可作为临时方案。
示例：
  1. ob_start();
  2. $user_id = 1; //假设用户id为1，实际可传参获取。
  3. while (true) {
  4.     $notice_count = DB::table('notice')->where('user_id', $user_id)->count();
  5.     echo sse(json_encode(['notice_num' => notice_count]));
  6.     ob_flush();
  7.     flush();
  8.     sleep(1);
  9. }
复制代码
方案2：基于事件触发，用消息队列做订阅发布模式

做法：对要实时获取的数据，先赋一个初始值的实际值，传递给客户端，当数据发生变化时，触发生产消息的通知，SSE模块不停的消费消息。
优点：避免了轮询模式疯狂查询。
缺点：仍旧需要消耗一些资源，实现稍微繁琐。
场景：方法优雅，适用于订阅端根据消息做更复杂的业务逻辑操作时使用。
示例：
  1. 暂时用redis队列简单实现：技术选型可根据实际情况做高可用或更复杂的设计。
  3. //例如要实现一个通知数量实时变更的功能：
  4. //发布端：
  5. $redis = new Redis();
  6. $redis->connect('127.0.0.1', 6379);
  7. //假设用户id为1
  8. $user_id = 1;
  9. //执行完其它的针对notice表写操作的业务逻辑代码...，然后向队列丢一个任务
  10. $redis->lPush('add_one_notice_task:'. $user_id, 1);
  11. //------------------------------------------------------------------------------------------------------------------
  12. //订阅端
  13. $redis = new Redis();
  14. $redis->connect('127.0.0.1', 6379);
  16. //先查询数据库通知数量
  17. $user_id = 1; //假设用户id为1，实际可传参获取。
  18. $notice_count = DB::table('notice')->where('user_id', $user_id)->count();
  19. $redis->set('user_notice_num:'. $user_id, $notice_count);
  21. while (true) {
  22.     //若检测到有自增一个通知数量的任务，则消费时触发一个增加数量的动作。
  23.     $add_one_notice_task = $redis->rPop('add_one_notice_task:'. $user_id);
  24.     if($add_one_notice_task) {
  25.         $redis->incr('user_notice_num:'. $user_id);
  26.     }
  28.     echo sse(json_encode(['notice_num' => $redis->get('user_notice_num:' . $user_id) ?? 0]));
  29.     ob_flush();
  30.     flush();
  31.     sleep(1);
  32. }
复制代码
方案3：基于事件触发的轮询

做法：触发端直接一步到位，修改好数据后缓存，监听端不停的监听缓存的值。
优点：实现起来比订阅发布简单，又避免轮询频繁查库，通过缓存解耦，避免了方案1的性能问题，又能保证缓存一致性。
缺点：终究还是轮询，仍旧需要消耗一些资源。
场景：相对简单的，不需要在监听端做业务处理，只做纯粹返回数据的场景。
示例：
  1. //触发端
  2. $redis = new Redis();
  3. $redis->connect('127.0.0.1', 6379);
  4. //假设用户id为1，实际可传参获取。
  5. $user_id = 1;
  6. //执行完其它的针对notice表写操作的业务逻辑代码...
  7. $notice_count = DB::table('notice')->where('user_id', $user_id)->count();
  8. $redis->set('user_notice_num:'. $user_id, $notice_count);
  9. //------------------------------------------------------------------------------------------------------------------
  10. //监听端
  11. $redis = new Redis();
  12. $redis->connect('127.0.0.1', 6379);
  13. $user_id = 1; //假设用户id为1，实际可传参获取。
  14. while (true) {
  15.     echo sse(json_encode(['notice_num' => $redis->get('user_notice_num:' . $user_id) ?? 0]));
  16.     ob_flush();
  17.     flush();
  18.     sleep(1);
  19. }
复制代码
在实战项目中的封装
  1. /**
  2. * @function 与客户端server send event通信方式
  3. * @param    $callback    callable 回调，若返回数组代表要输出json，返回null代表本次循环不进行输出
  4. * @param    $millisecond int      数据分发间隔，单位：毫秒
  5. * @return   string
  6. * @other    void
  7. */
  8. function sse($callback, $millisecond = 1000) {
  9.     set_time_limit(0);
  10.     ini_set('output_buffering', 'off');
  11.     ini_set('zlib.output_compression', false);
  12.     while (@ob_end_flush()) {}
  13.     header('Content-Type: text/event-stream; Charset=UTF-8');
  14.     header('Cache-Control: no-cache');
  15.     header('Connection: keep-alive');
  16.     header('X-Accel-Buffering: no');
  17.     header("Access-Control-Allow-Origin: *");
  18.     header("Access-Control-Allow-Credentials: true");
  19.     header('Access-Control-Allow-Methods: *');
  20.     header('Access-Control-Allow-Headers: *');
  22.     ob_start();
  23.     while (true) {
  24.         $callback_res = $callback();
  25.         if($callback_res !== null) {
  26.             $data = json_encode($callback_res, JSON_UNESCAPED_UNICODE);
  27.             echo "data:{$data}\n\n";
  28.         }
  29.         ob_flush();
  30.         flush();
  31.         usleep($millisecond * 1000);
  32.     }
  33. }
  35. //调用
  36. sse(function() {
  37.         if('业务逻辑数据存在') {
  38.                 return ['k' => 'v'];
  39.         }
  40.         return null;
  41. }, 1000);
复制代码
SSE优点


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


  • 完全不兼容IE浏览器。
  • SSE是一种半双工通信，因为数据只能在一个方向上流动，即从服务器到客户端。与之相比，全双工通信（例如WebSocket）允许数据在两个方向上同时流动，允许双向的数据传输。
  • 为了避免滥用和资源占用，一些浏览器可能会限制单个域名下的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。

来源:https://www.cnblogs.com/phpphp/p/17743706.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

上一篇: 网站程序中手机号码判断方法

下一篇: 快速定位手机号码归属地，数据源下载即刻开启！

发表于 2023-10-6 00:08:10

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4