开发智能问答时使用了fetchEventSource调用流式接口,以获取流式数据回显页面,但是遇到一个问题,在接口输出过程中,如果切换页面,会导致重复调用流式接口,用户在PC端使用的过程中就无法实现一边查看其他页面信息一边等待问答输出结果
原因:
当用户将包含SSE连接的标签页切换到后台时,现代浏览器为了优化性能和节省资源,会降低非活动标签页的优先级,就会导致用户切换页面后会中断连接,重新回到页面后就会自动重连
解决:
在初始化fetch-event-source时将openWhenHidden值设置为true
await fetchEventSource('/api/chat/query/executeStreaming', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': authHeader
},
body: JSON.stringify(requestBody),
signal: abortController.signal,
openWhenHidden: true,
openWhenHidden: true 是 @microsoft/fetch-event-source 库中的一个重要配置选项,它的作用是:
配置作用 :
当设置为 true 时,即使浏览器标签页处于不可见状态(用户切换到其他标签页或最小化窗口),fetchEventSource 仍然会尝试建立和维护与服务器的 SSE(Server-Sent Events)连接。
默认行为 :
如果不设置这个选项,当标签页不可见时,浏览器通常会暂停或限制后台连接以节省资源和网络带宽,这可能导致 SSE 连接断开。