近几年,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>祝您好运。
