近几年,AI发展迅猛,跟随的EventStream流式数据传输也流行起来。其中chatgtp就是,那如何输出EventStream流式数据呢?对apache+php的服务器来说,貌似天生就可以直接输出,但对于国内很多宝塔用户搭建的nginx+php,又该怎么输出流式数据呢?下面直接上干货。
1、配置nginx输出EventStream流式数据。
location = /stream.php { include fastcgi_params; fastcgi_pass unix:/tmp/php-cgi-74.sock; # 确保路径正确 fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; # 禁用代理缓冲 fastcgi_buffering off; fastcgi_keep_conn on; # 设置长时间读取超时 proxy_read_timeout 3600s; # 增加超时时间,根据需要调整 # 禁止响应数据被压缩 gzip off; }
这里是为了只在网站根目录的“stream.php”文件访问时以流式数据输出。
2、stream.php文件演示内容如下:
<?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); header('Connection: keep-alive'); // 保持连接 ob_end_flush(); // 结束输出缓冲 ob_implicit_flush(true); // 启用隐式刷新 $i = 0; while (true) { $i++; if($i<=5){ // 发送事件流数据 echo "data: 这是第 {$i} 条数据。\n\n"; }else{ echo "event: close\n"; echo "data: 连接将被关闭\n\n"; } // 立即刷新输出缓冲区,确保数据被发送到客户端 flush(); // 延迟一段时间,以便下次发送 sleep(1); }
3、页面前端index.html内容如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Server-Sent Events 示例</title> <style> #events { border: 1px solid #ccc; padding: 10px; max-width: 500px; margin: 20px auto; font-family: Arial, sans-serif; } </style> </head> <body> <div id="events">等待事件...</div> <script> // 创建 EventSource 对象 const eventSource = new EventSource('db.php'); // 替换为你的 PHP 文件路径 // 监听消息事件 eventSource.onmessage = function(event) { const eventsDiv = document.getElementById('events'); eventsDiv.innerHTML += `<p>${event.data}</p>`; // 显示服务器发送的数据 }; // 监听关闭事件(如果需要) eventSource.addEventListener('close', function(event) { const eventsDiv = document.getElementById('events'); eventsDiv.innerHTML += `<p>连接已关闭</p>`; eventSource.close(); // 关闭 EventSource 连接 }); // 处理错误 eventSource.onerror = function(event) { const eventsDiv = document.getElementById('events'); eventsDiv.innerHTML += `<p>发生错误</p>`; eventSource.close(); // 可以选择在错误时关闭连接 }; </script> </body> </html>
祝您好运。