Support for EventSource

[cexbrayat]

Zone.js supports WebSocket, but it doesn't appear to support Server Sent Events (correct me if I'm wrong).

That forces us to wrap our code using NgZone in Angular 2 apps, whereas it works with no extra works if we use WebSockets.

Is the support for EventSource planned?

[shou1dwe]

Hi @cexbrayat , I suspect I am hitting the same problem as you. I am pretty new to javascript in general, do you mind sharing your workaround to make it work with SSE?

[cexbrayat]

@shou1dwe We wrapped the EventSource in an observable and used zone.run

private zone = new NgZone({ enableLongStackTrace: false });

getScoreUpdates(packVersion: number, exerciseId: number): Observable<number> {
    return Observable.create(observer => {
      const eventSource = new EventSource(`/api/packs/${packVersion}/exercises/${exerciseId}/updates`);
      eventSource.onmessage = score => this.zone.run(() => observer.next(score));
      eventSource.onerror = error => this.zone.run(() => observer.error(error));
      return () => eventSource.close();
    });
  }

[GeorgeKnap]

@cexbrayat When you wrap the eventSource like this into Observable, how do you manipulate the event source later? For example when you need to unsubscribe or close the eventSource itself.

[cexbrayat]

@GeorgeKnap you just subscribe and unsubscribe to the Observable:

this.scoreSubscription = this.scoreService.getScoreUpdates()
  .subscribe(score => this.score = score);

later:

this.scoreSubscription.unsubscribe();

This will call the unsubscribe function returned by getScoreUpdates and close the eventSource

[simdevmon]

@cexbrayat Thank you for this workaround.
How would you re-initialize the connection in Angular if the backend service was restarted and the connection was lost?

[nfourre]

@cexbrayat do you use a polyfill to support IE and Edge browser ?

[yankee42]

Actually there is a way simpler workaround:

const eventSource = new EventSource("someURL");
eventSource.onmessage = () => {
    console.log('ngZone? ' + NgZone.isInAngularZone()); // false
};
eventSource.addEventListener('message', () => {
    console.log('ngZone? ' + NgZone.isInAngularZone()); // true
});

So, just using addEventListener instead of the onmessage-shortcut will work correctly.

[sergiojoker11]

The problem I see with the EventSource approach is that these requests made using EventSource are not intercepted by Angular interceptor. On top of this, the native EventSource interface doesn't support additional http headers out-of-the-box. In order to set an Authorization header, for instance, it is necessary to use a custom polyfill.
Are there any plans to support HTTP of type 'eventsource' in the Angular HttpClient?