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

背景🙄

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

复现😵‍💫

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

解决👌

  • 那不得先问一波 ChatGPT ？？？然而问了，没有得到有效方案
  • 在网上查阅一大波资料，有的说是 EventSource 本身的机制导致的，需要服务端做无限重连什么的，很复杂也很乱，没找到有效信息
  • 看官方 Github 上的文档，也没有说这种情况需要这么解决，只是看到它示例里有一个说在 onerror 里返回重试什么的，但是其实并没有用，如下图
    在这里插入图片描述
  • 于是直接拉官方源码阅读看看能不能解决，然后就发现了 openWhenHidden ，直接设置为 true 就可以了！！！
    在这里插入图片描述