Bootstrap

fetchEventSource和EventSource流式请求

记录一次由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()
}


;