寒窗轩,寒川的个人网络博客,记录互联网事,学习网络编程、分享工作经验、人生感悟,包括但不限于程序代码、数据库、Office办公、随笔等内容。

nginx+php如何EventStream流式数据传输

近几年,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>

祝您好运。

程序 2024-10-19 21:57:26 8 0 824 nginxphpeventstream
文章写得不错?我是土豪我要在线打赏!
在线打赏

昵称:

验证码:验证码

评论:

文章分类
系统
程序
数据
Office
随笔
热门文章
请不要奇怪,为什么最近博客的文章是几年前的内容
Excel动态引用各表格指定单元格数据
开篇第一章
ubuntu24.04无法安装向日葵,提示依赖libgconf-2-4怎么办?
发现一个好网站——春燕文档
ubuntu24.04安装网易云音乐
Ubuntu22.04中用thunar替换默认文件管理器,提示无法启动“TerminalEmulator“的首选应用程序
MySQL如何按每个分类查询10条数据,即MySQL如何每个分类查询10条数据
python读取旧的Excel文件的数据到新的Excel表中
nginx+php如何EventStream流式数据传输
文章推荐
免责声明
关于博主
开篇第一章
随机推荐
​Excel获取有数据的最后一列以及最后倒数第2列数据
腾讯空间Qzone,你别乱屏蔽好不?
emlog升级5.0.0
google太小气了
用ASP+XML编写留言本
发布个EMlog安装插件的插件
我们该怎样爱国?
这个flash太有才了,不得不佩服制作者的想象力。。。。超级强悍的计算机病毒。呵呵。
想说点什么
终于升级了。
友情连接
春燕网络
谢润的博客