前言
最近我们公司也是在做认知助手,大模型相关的功能,正在做提示词,机器人对话相关功能。想要提高用户体验,使用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);