在 Angular 5 中接收通量 SSE

Posted 2023-02-22

【中文标题】在 Angular 5 中接收通量 SSE

【英文标题】：Receiving Flux SSE in Angular 5

【发布时间】：2018-12-21 20:22:39

【问题描述】：

我已经在我的应用程序中成功实现了这个机制： 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 - 从不）。但是服务器会发送它们。

任何想法如何解决这个问题？

【参考方案1】：

原来，如果你在服务器上设置了事件名称，你就无法通过onmessage方法接收它。

在示例中，事件名称设置为“随机”。为了收到它，您必须这样做：

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

【讨论】：

非常感谢您发布此内容，正是我的问题花了数小时的时间才弄清楚为什么 curl 有效而 Angular 无效。