SSE部署后无法连接问题解决

1. 问题现象

通过域名访问 https://api-uat.sfxs.com/sse/subscribe?token=Bearer%20eyJUxMiJ9.eyJhY2NvdW50IjoiYWRtaWZ0NvZGUiOiIwMDEiLCJyb2xidXNlcm5hbWUiOiLotoXnuqfnrqHnkIblkZgifQ.tlz9N61Y4

一直无法正常连接

2. 问题解决

nginx.conf进行配置

    server {

        location /sse {
            # 确保使用正确的协议版本
            proxy_http_version 1.1;
            # 启用长连接
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            # 传递主机头信息
            proxy_set_header Host $host;
            # 避免缓存
            proxy_cache_bypass $http_upgrade;
            
            # 连接到后端服务
            proxy_pass http://api-uat.sfxs.com/sse;
            
            # 调整超时时间以适应长连接
            proxy_read_timeout 3600s;
            proxy_send_timeout 3600s;
            
            # 关闭缓冲
            proxy_buffering off;
        }

        # CORS 配置(如果需要)
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

        ....
    }
}

再次访问显示如图, 但是页面还是无法访问, 是因为我们在后端已经设置过CORS 配置,取消即可
在这里插入图片描述

### 如何在 Nginx 中配置服务器发送事件 (SSE) #### 配置 PHP 和 Nginx 支持 SSE 为了使 Nginx 正确处理 Server-Sent Events(SSE),需要调整 Nginx 的配置文件来确保长连接不会被过早关闭。通常情况下,Nginx 默认会设置较短的超时时间和缓冲区大小,这可能会中断 SSE 连接。 对于 PHP 应用程序,在 `nginx.conf` 或站点特定配置文件中加入如下指令可以改善 SSE 性能: ```nginx location /eventsource { proxy_pass http://backend; # 关闭代理缓存 proxy_buffering off; # 设置客户端最大响应体尺寸为0表示不限制 client_body_buffer_size 0; # 增加读取操作的超时时间 keepalive_timeout 65s; } ``` 上述配置通过禁用代理缓存并允许更大的数据流传输,从而支持更稳定的 SSE 流[^1]。 #### 处理 PHP 后端逻辑 PHP 脚本应当持续运行并向浏览器推送更新直到连接断开或达到设定的时间限制。下面是一个简单的例子展示如何创建一个用于发送消息给用户的 PHP 文件 `server-push.php`: ```php <?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush(); ?> ``` 此脚本设置了适当的内容类型,并立即向客户端发送一条包含当前服务器时间的消息。注意每次输出后调用了 `flush()` 函数以确保即时传送数据到客户端[^2]。 #### 实现前端 JavaScript 接收 SSE 数据 当页面加载完成之后,可以通过 JavaScript 创建一个新的 `EventSource` 对象实例并与指定 URL 建立连接。一旦成功建立了连接,则可以根据需求监听不同的回调函数来进行相应的业务处理。 以下是基于 AngularJS 框架的一个简单实现方式: ```javascript if (!!window.EventSource) { var source = new EventSource('/apis/messages'); source.onopen = function(event) { // 当连接打开时触发 }; source.onmessage = function(event) { var data = event.data; console.log("hb_data:" + data); $scope.$broadcast("BroadInfo", data); // 广播信息 }; } ``` 这段代码展示了如何初始化 `EventSource` 来接收来自 `/apis/messages` 地址的数据,并将其打印至控制台以及广播出去供其他组件使用[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

算法小生Đ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值