@microsoft/fetch-event-source，流式输出进行中，切换浏览器选项卡后重连问题

最新推荐文章于 2024-07-04 12:49:25 发布
最新推荐文章于 2024-07-04 12:49:25 发布
阅读量2.4k 收藏 2
点赞数 1
分类专栏： 踩坑记 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40887836/article/details/132942878
版权

原因

默认情况下，fetchEventSource 会在文档再次变为可见时自动关闭请求并重新打开。
在这里插入图片描述

解决方案：

如果openWhenHidden设置为 true，即使文档处于隐藏状态，也会保持请求的打开状态。

离开页面导致的连接断开可以通过设置 openWhenHidden: true来避免
在这里插入图片描述

参考文章：
fetch-event-source源码解析
Server-Sent Events 教程

无言非影
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
chatgpt 逐字输出 使用fetch/eventSource/fetchEventSouce进行sse流式处理
weixin_50572740的博客
05-05 1万+
vue chatgpt 逐字输出 使用fetch/eventSource/fetchEventSouce进行sse流式处理
前端发送Fetch请求实现流式请求、模拟打字机效果等
qq_43750656的博客
07-07 4934
这里的逻辑是每次监听到后端的流式数据以后，动态拼接上已有的字符串，然后将markdown转为html格式，然后继续拼接上这个span标签一起渲染到页面上，这个时候再开启个定时器，定时器获取到这个标签，动态的调整这个标签的opcatity透明度就可以实现光标闪烁的效果了。onmessage的主要逻辑就是累加所有流式数据返回的内容，然后渲染到页面上，这里需要注意的是接口返回的为markdown格式的数据，所以还需要用到一个markdown转html的依赖库。npm 方式安装类库。
FetchEventSource在大模型流式输出的应用
weixin_62428445的博客
05-17 1033
是微软在 ASP.NET Core 中引入的一个功能，它允许开发者以一种更简单和高效的方式处理 HTTP 请求和响应。通常用于处理服务器发送的事件（Server-Sent Events，SSE），这是一种允许服务器向客户端异步推送实时数据的技术。事件处理器的作用是：当通过 SSE 接收到消息时，它将解析消息内容，从中提取有用的信息，并将其追加到 Vue 组件的。是 Vue 组件实例的一个数据属性，用于累积从服务器接收到的所有消息内容。就可以显示所有接收到的消息内容，保持其原始的格式。
【EventSource错误解决方案】EventSource的onmessage回调函数不触发
十一月廿七风雨大作
05-18 747
客户端发送请求后，使用的`fetchEventSource `的`onmessage`回调函数不触发，根本就拿不到数据，但是`onopen`函数可以正常执行。
SSE实现消息实时推送，前端渐进式学习、实践，真香
qq_41885295的博客
01-31 4521
基于大模型开发的会话体验流式输出的的经验总结，实现类似gpt的打字机输出效果。主要应用技术是event-source、fetch-event-source
EventSource之重连特性 学习
qq_44327851的博客
05-08 2562
需要注意的是，retry 字段是可选的，如果不设置 retry 字段，浏览器会使用默认的重新连接时间间隔。因此当在 onerror 事件处理程序中编写重连逻辑时，可能会导致浏览器和服务器之间的 EventSource 连接频繁断开和重连，从而在网络面板中出现大量的 SSE 连接。下面的示例中，我们将 eventSource 对象的 retry 字段设置为 3000，表示在连接中断后，浏览器会每隔 5 秒尝试重新连接服务器一次。当连接中断后，浏览器会根据 retry 字段的值来确定重新连接的时间间隔。
vue单项数据传输流式回复功能，post传值可关闭请求（@microsoft/fetch-event-source）
qq_34955596的博客
08-11 5440
vue实现单项传输流式答复功能
@microsoft/fetch-event-source EventSource相关示例文档
love and share
01-25 2655
【代码】@microsoft/fetch-event-source EventSource相关示例文档。
使用post请求建立长连接实现sse，接收后端主动发来的消息，实现chat-gpt的弹字效果，EventSource的应用
qq_17335549的博客
06-16 6972
在开发中遇到了一问题，我按照@microsoft/fetch-event-source的例子写好了代码，怎么都接收不到请求，还以为这个插件有问题，或者我写错了，结果研究半天才发现是后端代码写错了，他根本没有一个一个给我返回，而是等了好长时间所有数据准备完毕才返回，这样导致请求都超时了，自然就收不到数据。最近在做一个chat相关的功能，然后由于接口返回特别特别慢，所以需要搞一个慢慢等待的效果，就是接口一个单词一个单词的返回，然后前端收到一个展示一个，提升用户体验。就跟websocket一样。
关于 @microsoft/fetch-event-source 的 EventSource 反复重连的问题
sanye的博客
07-26 7151
小小的一个做了 AI 聊天功能，没想到突然发现一个对话被重复请求了很多次，资源都被弄没了！这对本就不富裕的家庭来了狠狠的一巴掌！它怎么重复请求了这么多次！本来今天高高兴兴，用 Server-sent events。请求没完成前切换页面。
eclipse SSE设置
well3216的专栏
05-19 867
1，需要在property->c/c++ Compiler->Miscellaneous的other flags的后面加上 -msse -msse2 -mssse3 2，需要在property->c/c++ General->Paths and Symbols->Symbols里加上SSE SSE2 SSE3 SSSE3. 需要点选Add to all configurations和Add to
eventsource:用于EventSource浏览器API的Rust客户端
05-19
EventSource是一个Rust库，用于从服务器发送的事件端点读取。 它透明地发送HTTP请求，并且仅向用户公开事件流。 它处理text/event-stream数据格式的自动重新连接和解析。 例子 use eventsource :: reqwest :: ...
event-source-stream:EventSource在节点和浏览器中以可读流的形式实现
05-16
log ( 'received event:' , data ) } ) 默认情况下，连接终止后，它将在3秒后重试。 通过设置retry选项来更改此设置 // no retriesess ( 'http://server-sent-events-demo.herokuapp.com/update' , { retry : false...
axios-fetch-adapter:提取适用于axios的适配器
05-10
因此，我必须切换到Fetch适配器； 但是，Axios目前没有用于提取API的适配器。 因此，我在等待Axios正式发布时编写了一个供使用。 安装及使用 您可以直接从此存储库URL安装适配器，也可以随时将其源代码复制到您的...
fetch-blob:Node.js 中的 Blob 实现，最初来自 node-fetch
07-23
获取-blob Node.js 中的 Blob 实现，最初来自 。安装npm install fetch-blob 从 2x 升级到 3x 从 2 更新到 3 应该是轻而易举的，因为 blob 规范没有太多变化。 主要版本的主要原因是编码标准。 - 内部 WeakMaps 被...
node-fetch-retry:使用节点获取执行重试的节点模块
05-12
节点获取重试 节点模块，用于对HTTP请求执行重试。 它是库的包装。 它具有如下所述的内置默认重试逻辑以及可配置的参数。 它还具有对Apache OpenWhisk操作的内置支持，可以调整超时以反映操作超时。 安装 npm ...
nodejs + vue3 模拟 fetchEventSouce进行sse流式请求
最新发布
IT博客技术分享
07-04 1087
在GPT爆发的时候，各项目都想给自己的产品加上AI，蹭上AI的风口，因此在最近的一个需求，就想要给项目加入Ai的功能，原本要求的效果是，查询到对应的数据后，完全展示出来，也就是常规的post请求，后来这种效果遇到了一个很现实的问题：长时间的等待。我们需要在GPT返回全部数据后，前端才能接受并展示，一旦询问的时间过长，就会让用户等待很久，这时候我们需要将前端的展示效果改为想ChatGPT那样的打字机效果。
sse实现post传值，使用（fetch-event-source）插件，使用vue3写法
qq_58946831的博客
04-24 1062
sse实现post传值，使用（fetch-event-source）插件，使用vue3写法。
解决sse接口切换浏览器tab后，接口重发问题
随便写写
11-27 1492
microsoft/fetch-event-source在切换浏览器标签后，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获取事件数据，并在控制台中记录每个事件的数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值