Subscribe to a Server Sent Event

getTeams.ts

import {Injectable, NgZone} from '@angular/core';
import {environment} from '../../environments/environment';
import {BehaviorSubject, Observable} from "rxjs";
import {TeamModel} from "../models/team.model";

@Injectable({
  providedIn: 'root'
})
export class TeamService {
  private teamsWatchUrl = environment.backendUrl + environment.watchTeamsPath;
  constructor(private zone: NgZone){}

  /**
   * Subscribe to the teams update Server Sent Event stream
   */
  getTeamsStream(): Observable<TeamModel> {
    return new Observable((observer) => {
      let url = this.teamsWatchUrl;
      let eventSource = new EventSource(url);

      eventSource.onmessage = (event) => {
        let json = JSON.parse(event.data);
        if (json !== undefined && json !== '') {
          this.zone.run(() => observer.next(json));
        }
      };

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