一个SSE(流式)接口引发的问题

文章讲述了作者在开发认知助手功能时遇到的问题,即在本地环境使用EventSource和fetch进行流式SSE请求时,数据无法分段返回,而在线上环境则正常。文章详细描述了配置步骤,并探讨了可能的原因——本地环境的HTTP代理设置差异。
摘要由CSDN通过智能技术生成

前言

最近我们公司也是在做认知助手,大模型相关的功能,正在做提示词,机器人对话相关功能。想要提高用户体验,使用SSE请求模式,在不等数据完全拿到的情况下边拿边返回。

之前做过一版,但不是流式返回,是等待全部结果再返回,不得不说确实等待过程挺长,然后就有了现在的优化。想着功能都写好了,只是改一下接口,应该是个简单的需求。

后端使用的post接口,经过一番搜索,最后使用的fetch。经过短短几个小时,配置写好,准备联调,以为需求就顺利完工了。奈何就这流式联调,还耗了两天。只因为后端在postman上测试时正常的,然后前端在本地连调就是无法获取分段式数据,拿到的总是一整块数据。表现成这样,我们就开始纠结前端配置是否有误,网关转发是否有误。

就这样前端也试了好几种方式去发请求,奈何结果都一样。想着先测其他部分,这个接口最后测试。意外的是部署在线上的环境竟然能正常接收流式接口!!!那问题可能就是本地与部署线上的区别了,今天主要记录一下使用的配置。

EventSource

创建EventSource对象:首先,使用new EventSource()构造函数创建一个EventSource对象。该对象将用于与服务器建立连接并接收服务器发送的事件流。

var eventSource = new EventSource('sse_url');

在上面的代码中,将’sse_url’替换为实际的SSE请求URL。
2. 监听事件:使用EventSource对象的onmessage事件监听器来接收服务器发送的事件数据。当接收到数据时,事件处理函数将被调用,并可以通过事件对象的data属性访问数据。

eventSource.onmessage = function(event) {  
  console.log('Received data:', event.data);  
};

错误处理:为了处理可能发生的错误,可以使用EventSource对象的onerror事件监听器。当发生错误时,可以在事件处理函数中进行处理。

eventSource.onerror = function(error) {  
  console.error('SSE error:', error);  
};

关闭连接:当不再需要接收事件流时,可以使用EventSource对象的close方法关闭连接。

eventSource.close();

完整的示例代码如下所示:

var eventSource = new EventSource('sse_url');  
  
eventSource.onmessage = function(event) {  
  console.log('Received data:', event.data);  
};  
  
eventSource.onerror = function(error) {  
  console.error('SSE error:', error);  
};

但是EventSource只支持get请求,配置请求头也不太友好。

fetch

async function getStream() {
  try {
    let response = await fetch('url');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }   
    const reader = response.body.getReader();
    const textDecoder = new TextDecoder();
    let result = true;
    let output = ''
    while (result) {
        const { done, value } = await reader.read();

      if (done) {
        console.log('Stream ended');
       result = false;
       break;
      }
      const chunkText = textDecoder.decode(value);
      output += chunkText;
      console.log('Received chunk:', chunkText);
    }
  } catch (e) {
    console.log(e);
 }
}

插件

@microsoft/fetch-event-source
使用方法我就 不放了,看了一下源码也是基于fetch实现的,网上例子很多,可以看看。

问题

本地运行的环境也是用的代理访问的部署好的环境的接口。插件是 Node.js 的 HTTP 代理中间件http-proxy-middleware。所以为何同样的配置,本地运行不行,而部署到环境上就正常了呢,

  • 10
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在Spring Boot中,可以通过使用Server-Sent Events(SSE)技术来实现流式输出。SSE是一种基于HTTP的服务端推送技术,它允许服务器向客户端发送单向的数据流,这些数据可以是文本、JSON等数据格式。 下面是一个使用Spring Boot SSE实现流式输出的示例代码: 首先,在Spring Boot应用程序中添加以下依赖项: ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-webflux</artifactId> </dependency> ``` 然后,创建一个RESTful控制器,该控制器使用SSE技术向客户端输出数据。以下是一个简单的控制器示例: ```java @RestController public class MyController { @GetMapping("/stream") public Flux<String> stream() { return Flux.interval(Duration.ofSeconds(1)) .map(seq -> "Stream - " + seq); } } ``` 在上面的示例中,我们使用`@GetMapping`注解将一个路由绑定到`/stream`路径。当客户端连接到此路由时,控制器将使用`Flux`对象返回数据流。在这种情况下,我们使用`Flux.interval()`方法创建一个每秒发送一次消息的数据流。 最后,在客户端中,可以使用JavaScript代码来订阅SSE事件并接收数据。以下是一个简单的JavaScript代码示例: ```javascript const source = new EventSource('/stream'); source.onmessage = function(event) { console.log(event.data); }; ``` 在上面的示例中,我们使用`EventSource`对象来订阅`/stream`路径上的SSE事件。当事件被触发时,回调函数将被调用,并显示接收到的数据。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值