在 Angular 5 中接收 Flux SSE

Question

我已经在我的应用程序中成功实现了这个机制： https://vividcode.io/Spring-5-WebFlux-with-Server-Sent-Events/ 我可以每秒接收一次 curl 事件，如示例所示。

我的问题是：我无法在 Angular 中收到这些事件 5. 我已经尝试了很多方法。目前我的服务代码如下所示：

public getMigrationProgress(processName: string): Observable<any> {
    let headers: HttpHeaders = new HttpHeaders();
    headers = headers.append('X-Authorization', this._sessionService.getAuthToken());
    headers = headers.append('accept', 'text/event-stream');

    let url = config.restApi.url + this.getResource() + '/' + processName;
    return Observable.create(observer => {
        let eventSource = new EventSourcePolyfill(url, { headers: headers });
        eventSource.onmessage = (event => {
            observer.next(event);
            this.zone.run(() => {
                console.log('prpprpr');
            });
        });
        eventSource.onopen = (event) => {
            observer.next(event);
        };
        eventSource.onerror = (error) => {
            if (eventSource.readyState === 0) {
                console.log('The stream has been closed by the server.');
                eventSource.close();
                observer.complete();
            } else {
                observer.error('EventSource error: ' + error);
            }
        };
    });
}

它只打开连接，不接收事件（方法 onopen 工作一次，onmessage - 从不）。服务器发送它们。

有什么解决办法吗？

Answer 1

结果发现，如果您在服务器上设置事件名称，则无法通过 onmessage 方法接收。

在示例中，事件名称设置为 "random"。要接收它，您必须这样做：

eventSource.addEventListener('random', function (event) {
    console.log(event);
});

在 Angular 5 中接收 Flux SSE

Receiving Flux SSE in Angular 5

spring

flux

server-sent-events

eventsource

angular