手动关闭SSE连接:Angular

Question

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

我面临的问题是我需要在一定时间后手动关闭连接，让一些用户操作说。我没有任何选择来这样做。

eventSource.close()存在，但它在服务中，并且在组件中取消订阅不起作用。

下面是我的代码:

* * * * * service.ts * * * * *

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));
};
});
}

* * * *组件。ts * * * * *'

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连接。

Answer 1

您可以从不再使用弃用的Observable.create方法开始，而是使用Observable构造函数本身。当一个可观察对象不再需要使用资源时(该可观察对象不再有订阅者)，推荐的处理方法是返回一个可以清理的函数。像这样:

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();
}
});