关于 @microsoft/fetch-event-source 的 EventSource 反复重连的问题

最新推荐文章于 2024-07-08 10:59:18 发布
最新推荐文章于 2024-07-08 10:59:18 发布
阅读量7.6k 收藏 8
点赞数 18
分类专栏： JavaScript 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42029374/article/details/131935713
版权

背景🙄

本来今天高高兴兴，用 Server-sent events 小小的一个做了 AI 聊天功能，没想到突然发现一个对话被重复请求了很多次，资源都被弄没了！这对本就不富裕的家庭来了狠狠的一巴掌！可恶啊！这到底是怎么回事！它怎么重复请求了这么多次！😫😫😫

复现😵‍💫

  • 打开页面
  • 使用 @microsoft/fetch-event-source 发送一个 EventSource 请求
  • 在请求没完成前切换页面（不管是切换浏览器 tag 还是直接隐藏浏览器）
  • 再切换回页面（此时请求也没完成）
  • 就会发现多了一个跟发送的请求一模一样的 EventSource 请求
  • 不管隐藏显示多少次，只要请求没完成，就会出现多少次的重连请求
    在这里插入图片描述

解决👌

  • 那不得先问一波 ChatGPT ？？？然而问了，没有得到有效方案
  • 在网上查阅一大波资料，有的说是 EventSource 本身的机制导致的，需要服务端做无限重连什么的，很复杂也很乱，没找到有效信息
  • 看官方 Github 上的文档，也没有说这种情况需要这么解决，只是看到它示例里有一个说在 onerror 里返回重试什么的，但是其实并没有用，如下图
    在这里插入图片描述
  • 于是直接拉官方源码阅读看看能不能解决，然后就发现了 openWhenHidden ，直接设置为 true 就可以了！！！
    在这里插入图片描述
sanye丶
关注
  • 18
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
chatgpt 逐字输出 使用fetch/eventSource/fetchEventSouce进行sse流式处理
weixin_50572740的博客
05-05 1万+
vue chatgpt 逐字输出 使用fetch/eventSource/fetchEventSouce进行sse流式处理
eventsource:用于EventSource浏览器API的Rust客户端
05-19
EventSource是一个Rust库，用于从服务器发送的事件端点读取。 它透明地发送HTTP请求，并且仅向用户公开事件流。 它处理text/event-stream数据格式的自动重新连接和解析。 例子 use eventsource :: reqwest :: ...
@microsoft/fetch-event-source，流式输出进行中，切换浏览器选项卡后重连问题
无言非影的博客
09-17 2637
如果openWhenHidden设置为 true，即使文档处于隐藏状态，也会保持请求的打开状态。默认情况下，fetchEventSource 会在文档再次变为可见时自动关闭请求并重新打开。离开页面导致的连接断开可以通过设置。
今日推荐库：@microsoft/fetch-event-source 前端发送SSE请求实现GPT流式输出
SAXX2的博客
03-07 5245
每日推荐库：@microsoft/fetch-event-source 前端实现GPT发送SSE请求，流式输出.使用 @microsoft/fetch-event-source 改善服务器发送事件的请求
@microsoft/fetch-event-source EventSource 使用说明
m0_56416159的博客
07-05 355
【代码】@microsoft/fetch-event-source EventSource 使用说明。
使用Fetch替换EventSource
weixin_45642270的博客
08-01 1650
常理说就能读取服务器中的数据了，不过我在做项目时用该方法迟迟没有读取到服务器传过来的数据，而且在本地浏览器中是可以读取数据的，困扰了很长时间，然后向大佬请教，大佬直接发我他写的使用Fetch替换EventSource的方法，拿着代码稍微改造了一下，成功读取数据，给大家分享一波。前几天做了一个项目，需要用到SSE(Server-Send Events)技术，在前端中，我们一般是通过EventSource来实时接收后端传来的数据。EventSource建立连接非常简单，直接通过其构造函数即可。
fetchEventSource和EventSource流式请求
weixin_43702062的博客
06-21 546
记录一次由websocket流式请求改为sse流式请求（项目为Angular） fetchEventSource和EventSource流式请求 踩坑问题处理解决
EventSource 长链接执行
weixin_39593730的博客
01-26 693
vue3 项目中使用 eventSource
fetch-event-source踩坑sse（getReader）
a598829181的博客
01-29 1747
去百度一下，原来还有fetch-event-source实现了post方式的EventSource（我管你原理怎么实现的，tm能用就行），然后引入，测试，发布！还有一个灵异的地方：本来我一直想不懂，为什么这个app的浏览器里一个请求会有两个请求出现（不是options预检），这时我才明白，因为这个fetch是假的，这个app壳子自己又用xhr来了一遍，所以请求了两次。灵异事件一：我只问了一个问题，然后卡住了，过了一会儿一刷新页面，列表里很多一样的问题【发起了多次请求】
fetch 发送 2 次请求的原因
超级罗伯特的博客
03-29 542
fetch 发送 post 请求的时候，总是发送 2 次，第一次状态码是 204，第二次才成功？原因很简单，因为你用 fetch 的 post 请求的时候，导致 fetch 第一次发送了一个。Options 请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发。
为什么Fetch会发送两次请求
weixin_49274461的博客
10-30 1198
为什么Fetch会发送两次请求
vue单项数据传输流式回复功能，post传值可关闭请求（@microsoft/fetch-event-source）
qq_34955596的博客
08-11 5526
vue实现单项传输流式答复功能
event-source-stream:EventSource在节点和浏览器中以可读流的形式实现
05-16
事件源流在节点中将实现为可读流 npm install event - source - stream用法 var ess = require ( 'event-source-stream' )ess ( 'http://server-sent-events-demo.herokuapp.com/update' ) . on ( 'data' , function...
前端项目-event-source-polyfill.zip
09-03
需要注意的是，由于`event-source-polyfill`依赖于`XMLHttpRequest`或`fetch`，因此在网络不稳定或服务器断开连接时，可能需要处理重连的问题。`event-source-polyfill`提供了`onerror`和`onopen`事件，可以用于监控...
EventSource：提供polyfill以在不可用的浏览器中支持EventSource
02-23
EventSource Polyfill 在不可用的浏览器中提供polyfill以支持EventSource。 用于生产 在Internet Explorer 8 +中测试 在Android浏览器2.1中测试过 运行 正在安装 从来源 从下载合适的项目档案（zip或tar.gz） 在...
javascript-form-source-code-Form source code
03-25
在"javascript-form-source-code-master"这个项目中，开发者可能已经实现了上述功能，并提供了示例代码供学习和参考。通过研究这些源代码，你可以深入了解JavaScript在实际项目中处理表单的各种技巧和最佳实践。同时...
fetchEventSource请求，数据没有流式输出
幽灵古堡的博客
03-29 1116
vue项目实现流式输出
FetchEventSource在大模型流式输出的应用
weixin_62428445的博客
05-17 1134
是微软在 ASP.NET Core 中引入的一个功能，它允许开发者以一种更简单和高效的方式处理 HTTP 请求和响应。通常用于处理服务器发送的事件（Server-Sent Events，SSE），这是一种允许服务器向客户端异步推送实时数据的技术。事件处理器的作用是：当通过 SSE 接收到消息时，它将解析消息内容，从中提取有用的信息，并将其追加到 Vue 组件的。是 Vue 组件实例的一个数据属性，用于累积从服务器接收到的所有消息内容。就可以显示所有接收到的消息内容，保持其原始的格式。
使用 fetchEventSource 实现sse流式请求
最新发布
simpleMan8023的博客
07-08 1185
/ onclose函数是会话结束正常关闭触发，但几乎没有做到这步，不执行这个回调，不知道什么原因。//我这里是判断我请求回来的数据里是否包含'[DONE]'，他是数组里的最后一项，表示加载完成。// console.log('接口返回', JSON.parse(event.data))// console.log('SSE会在通过事件源收到数据时触发')// 开始会话链接，也做了个全局的......// 终止or结束会话，做了个全局的...// 关闭业务，执行关闭sse数据接口。'SSE结束会话了'
vue3 封装 @microsoft/fetch-event-source
05-30
对于Vue3封装@Microsoft/fetch-event-source，您可以按照以下步骤进行操作： 1. 首先，您需要安装@Microsoft/fetch-event-source模块。您可以使用以下命令进行安装： ``` npm install @microsoft/fetch-event-source --save ``` 2. 接下来，您可以在Vue3组件中创建一个名为fetchEventSource的方法，该方法将使用@Microsoft/fetch-event-source模块从指定的URL获取事件数据。例如，以下是一个示例fetchEventSource方法： ``` import EventSourcePolyfill from '@microsoft/fetch-event-source/dist/event-source-polyfill.js'; export default { methods: { fetchEventSource(url) { const eventSource = new EventSourcePolyfill(url); eventSource.onmessage = (event) => { console.log(event.data); }; } } } ``` 3. 最后，在Vue3组件中调用fetchEventSource方法并传递您要监听的事件的URL。例如： ``` this.fetchEventSource('http://example.com/events'); ``` 这将使用@Microsoft/fetch-event-source模块从http://example.com/events获取事件数据，并在控制台中记录每个事件的数据。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值