记录一次由websocket流式请求改为sse流式请求(项目为Angular)
一、遇到的问题
1,EventSource无法调整请求头入参
2,切换网页会重新发起链接请求
3,用户主动关闭当前请求问题
解决:
由于EventSource无法在请求头防止token验证码,后使用fetchEventSource
对于切换网页重新发起请求问题,fetchEventSource提供api即: openWhenHidden: true,
关于用户关闭sse请求流,在请求中直接抛出异常中断请求,ok达到目的,
注意:div标签无法识别换行 <br -/> 和 \n 时 加样式 :white-space: pre-line; 就可以啦
二、使用步骤
1.引入
正常安装 模块包,不再赘述
2.具体代码示例
import { fetchEventSource } from '@microsoft/fetch-event-source';
// rxjs 订阅,将数据发送至功能调用模块
private onmessage$ = new Subject<any>();
// 关闭当前sse请求 参数
eventSourceStatus = true
this.eventSource = fetchEventSource(url, {
method: 'POST',
openWhenHidden: true,
headers: {
'Content-Type': 'application/json',
Accept: 'text/event-stream',
Authorization: `${token}`,
},
// params 请求入参
body: JSON.stringify(params),
onmessage(event: any) {
that.onmessage$.next(event.data)
if(!that.eventSourceStatus) {
that.sseMethodBody$.next('close')
throw new error(event)
}
},
onclose() {
console.log('close',)
that.onmessage$.next('close')
},
onerror(error) {
//关闭流
that.onmessage$.next(false)
throw new error(error)
},
}).catch ((error => {
console.info(error);
}));
## 2.开始调用
/**
* @description 开始请求see,处理参数
* @return
*/
openEventSource(url, params) {
//
this.sseMethodBody$ = new Subject<any>();
//
this.sseMethodBody(url, param);
}
## 3.关闭请求
/**
* @description 关闭sse请求
* @return
*/
closeEventSource() {
// 关闭
console.log(this.eventSourceStatus);
this.eventSourceStatus = false
this.eventSource = null;
// 销毁
this.sseMethodBody$.unsubscribe()
}