我在我的应用程序中使用SSE事件.为此,我编写了运行良好的代码.

我面临的问题是,我需要关闭连接后,一定时间手动让一些用户操作.我没有任何这样做的 Select .

虽然EventSource.Close()仍在使用中,但在Component中取消订阅它并不起作用.

下面是我的代码:

**服务业**

public getServerSentEventsForTokenDisplay(url: string): Observable<any> {
      return Observable.create(observer => {
        const eventSource: EventSourcePolyfill = this.getEventSource(url);
  
        
        eventSource.addEventListener('XXX', (event: any) => {
          observer.next(event);
        });
  
        eventSource.addEventListener('YYY', (event: any) => {
          observer.next(event);
        });
        eventSource.addEventListener('Ack', (event: any) => {
          observer.next(event);
        });
        eventSource.onerror = (error) => {
          eventSource.close()
          this.ngZone.run(() => observer.next(error));
        };
        eventSource.onopen = (event) => {
          this.ngZone.run(() => observer.next(event));
        };
      });
    }

加入时间:清华2007年01月25日下午3:33 这没什么不对的.

private getTokenDisplay(url) {
    let url = url;

    this.isWaitingTokensLoading = true;
    this.isTokenDisplayLoading = true;
    this.tokenDisplaySubscription = this.qmsService.getServerSentEventsForTokenDisplay(url).pipe(takeUntil(this.ngUnsubscribe)).subscribe((response: MessageEvent) => {
      if (response && response.type === 'open') {
        console.log(response)
      }
      if (response && response.type.toLowerCase() === 'ack') {
        console.log(response)
      }
      if (response && response.type === 'XXX') {JSON.parse(response.data));
        let parsedData = JSON.parse(response.data);
        this.tokenDisplayList = parsedData.data;
        this.isTokenDisplayLoading = false;
      }

      if (response && response.type === 'YYY') {
        let parsedData = JSON.parse(response.data);
        this.waitingTokens = parsedData.data;
        this.isWaitingTokensLoading = false;
      }

      if (response && response.type === 'error') {
        console.log(response);
      }
    }, (error) => {
      this.isWaitingTokensLoading = false;
      this.isTokenDisplayLoading = false;
      console.log(error)
    })
  }

ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.unsubscribe();
    if(this.tokenDisplaySubscription)
    this.tokenDisplaySubscription.unsubscribe();
  }`

我需要手动关闭SSE连接.

推荐答案

您可以从不再使用过时的Observable.create方法开始,而使用Observable构造函数本身.The recommended way在不再需要某个可观察对象所使用的资源时(该可观察对象没有更多订阅者)处理这些资源就是返回一个函数,您可以在该函数中进行清理.大概是这样的:

return new Observable(observer => {
  const eventSource: EventSourcePolyfill = this.getEventSource(url);

    
  eventSource.addEventListener('Token-Display', (event: any) => {
    observer.next(event);
  });

  eventSource.addEventListener('Token-Waiting', (event: any) => {
    observer.next(event);
  });
  eventSource.addEventListener('Ack', (event: any) => {
    observer.next(event);
  });
  eventSource.onerror = (error) => {
    eventSource.close()
    this.ngZone.run(() => observer.next(error));
  };
  eventSource.onopen = (event) => {
    this.ngZone.run(() => observer.next(event));
  };

  return () => {
    console.log('Closing event source...');
    eventSource.close();
  }
});

Angular相关问答推荐

将Angular 17中的http服务与独立组件一起使用

父母和子元素在17号角不保持同步

未在ng bootstrap 模式中设置表单输入

P-DropDown不会使用react 式表单手动设置Value

Angular Mat Select 显示键盘焦点和鼠标悬停焦点的问题

Angular 9表单构建器 - 日期验证器问题

相同的 Angular 代码在生产环境中停止工作

从具有特定 node 值的现有数组创建新数组

无法在 Angular 中使用 CryptoJS 正确加密

Aws 代码部署在 BeforeBlockTraffic 步骤失败,即使在更新策略后也会超时

Angular 从 13.3.8 恢复到 13.3.7

即使 withCredentials 为真,Angular 也不会发送在 Set-Cookie 中收到的 Cookie

如何在 Angular 2 中正确设置 Http 请求标头

Angular7 中的 CORS 策略已阻止源http://localhost:4200

Angular 2 可用的 yeoman 生成器

Angular 4 错误:没有 HttpClient 的provider提供者

如何对 *ngFor 应用数量限制?

Angular2:将数组转换为 Observable

'ng' 不是内部或外部命令、可运行程序或批处理文件

Angular2/4 中的ng-reflect-*属性有什么作用?