使用 HttpClient 创建 EventStream 请求答案

【问题标题】：Using HttpClient to create EventStream request使用 HttpClient 创建 EventStream 请求
【发布时间】：2021-12-30 12:24:21
【问题描述】：

我使用以下代码从服务器获取事件流：

getStream(): Observable<ResponseModel> {
    return new Observable(obs => {
      const source = new EventSource(`http://backend/api/stream`);
      source.onmessage = (ev): void => this.zone.run(() => obs.next(JSON.parse(ev.data)));
      source.onerror = (err): void => this.zone.run(() => obs.error(err));
    });
}

...按预期工作。但现在我需要像对待其他 HTTP 请求一样对待 EventStream ——我使用拦截器。拦截器不适用于EventSource。

所以我尝试了这样的方法：

constructor(
  private http: HttpClient,
  private zone: NgZone
) {}


getStream(): Observable<ResponseModel> {
    return new Observable(obs => {
        const req = new HttpRequest('GET', `http://backend/api/stream`, {
          observe: 'body',
          headers: new HttpHeaders({
            Accept: 'text/event-stream',
            'Cache-Control': 'no-cache'
          })
        });
        const source = this.http.request<ResponseModel>(req).subscribe(ev => this.zone.run(() => obs.next(ev)));
    });
}

似乎是正确的方向，因为请求在 Chrome 的网络选项卡上保持等待状态，直到触发某些内容（尽管数据为空）：

那么，我该怎么做呢？

谢谢

【问题讨论】：

你试过这个答案吗：stackoverflow.com/questions/36812714/… 看起来 Typescript 有一个 EventSource 对象，你可以将它转换为 observable。从它的外观来看，我不得不怀疑它是否甚至不能与 HostListener 结合使用
@Vinez 该问题的公认答案基本上是对我的问题的“否”答案。我正在寻找一种在 EventSource 上应用拦截器的方法，而不仅仅是“让它工作”。

标签： angular server-sent-events angular-httpclient event-stream

【解决方案1】：

您能否创建一个通用方法而不是拦截器，所有事件流都从其中启动并应用您想要的任何管道？

    createStream(verb, url): Observable<ResponseModel> {
          
        return new Observable(obs => {
            const req = new HttpRequest(verb, url, {
              observe: 'body',
              headers: new HttpHeaders({
                Accept: 'text/event-stream',
                'Cache-Control': 'no-cache'
              })
            }).pipe(
startWithTap(() => //do my pre request stuff here),
tap(() => // do my post request stuff here));
            const source = this.http.request<ResponseModel>(req).subscribe(ev => this.zone.run(() => obs.next(ev)));
        });
    }

【讨论】：