Observable http service

Question

I'm 9 hours a day on Angular trying to make some little projects mainly with services. Today, I'm trying to make a service that loops on data's fetching and the components update themselves according to new data. I've like 6 components using the service and the standard way to do it makes 6 times more requests that only one component does.

I heard about IntervalObservable but I don't know how to implement it on the component side. (And maybe I failed in the service too ...)

Here is some code.

app.module.ts :

import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule }    from '@angular/http';

import { AppComponent } from './app.component';


import { ROUTING } from './app.routes';
import {HardwareService} from "./services/hardware.service";
import {AfficheurComponent} from "./components/hardware/afficheur.component";
import {HardwareListComponent} from "./views/hardwarelist/hardwarelist.component";


@NgModule({
    imports: [ BrowserModule, ROUTING, HttpModule, FormsModule],
    declarations: [
        AppComponent,
        AfficheurComponent,
        HardwareListComponent
    ],
    bootstrap: [ AppComponent ],
    providers: [ HardwareService ]
})
export class AppModule { }

hardware.service.ts :

import { Injectable }              from '@angular/core';
import { Headers, Http, Response }          from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/interval'

@Injectable()
export class HardwareService{
    private apiUrl = 'http://10.72.23.11:5000';  // URL to web API

    constructor (private http: Http) {}

    getHardware(){
        return Observable.interval(5000)
            .flatMap(() => {
                return this.http.get(this.apiUrl)
                    .map(this.extractData)
                    .catch(this.handleError);
        });
    }

    private extractData(res: Response) {
        let body = res.json();
        return body || { };
    }
    private handleError (error: Response | any) {
        // In a real-world app, you might use a remote logging infrastructure
        let errMsg: string;
        if (error instanceof Response) {
            const body = error.json() || '';
            const err = body.error || JSON.stringify(body);
            errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
        } else {
            errMsg = error.message ? error.message : error.toString();
        }
        console.error(errMsg);
        return Observable.throw(errMsg);
    }
}

afficheur.component.ts :

import { Component } from '@angular/core';
import {HardwareService} from "../../services/hardware.service";

@Component({
    selector: 'afficheur',
    templateUrl: 'app/components/hardware/afficheur.component.html'
})
export class AfficheurComponent{
    public state: Boolean;
    constructor(private service: HardwareService){
        this.service
            .getHardware()
            .subscribe(data => (console.log(data), this.state = data.afficheur),
                error => console.log(error),
                () => console.log('Get etat afficheur complete'))
    }
}

I took the information about IntervalObservable here (SO thread)

As always, I hope you'll be able to help me find my way through this problem :).

ERROR TypeError: Observable_1.Observable.interval is not a function

Regards, Jérémy.

(PS: English is not my mother language, don't hesitate to tell me if i told something you don't understand)

Answer 1

The solution would look something like:

// create an observable which fetch the data at intervals of 1 second
this._data$ = Observable
  .timer(0, 1000)
  .switchMap(() => this.getData())
  // if an error is encountered then retry after 3 seconds
  .retryWhen(errors$ => {
    errors$.subscribe(error => this.logError(error));
    return errors$.delay(3000);
  })
  .share();

• timer(0, 1000) - produce the first value after 0ms and then at intervals of 1 second. Using interval(1000) instead is ok but the first value will come with a delay of 1 second.
• switchMap(() => this.getData()) - switch to the observable provided by the callback which queries the actual resource
• retryWhen(...) - if an error is encountered then logs the error and then retries
• share() - shares a single subscription among the subscribers. This has the effect of calling getData() only once, instead of calling it for as many subscribers we might have.

Example - emit current dates, when getData() is called 5th time in a row then an error is thrown in order to test also the error situation.

Here is the working Plunker.

HardwareService

import { Injectable } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/timer';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/retry';
import 'rxjs/add/operator/retryWhen';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/switchMap';
import {Subject} from 'rxjs/Subject';

@Injectable()
export class HardwareService {

  private _fetchCount = 0;
  private _fetchCount$ = new Subject<number>();
  private _data$: Observable<Date>;

  public get data$(): Observable<Date> {
    return this._data$;
  }

  public get fetchCount$(): Observable<number> {
    return this._fetchCount$;
  }

  constructor() {
    // create an observable which fetch the data at intervals of 1 second
    this._data$ = Observable
      .timer(0, 1000)
      .switchMap(() => this.getData())
      // if an error is encountered then retry after 3 seconds
      .retryWhen(errors$ => {
        errors$.subscribe(error => this.logError(error));
        return errors$.delay(3000);
      })
      .share();
  }

  private logError(error) {
    console.warn(new Date().toISOString() + ' :: ' + error.message);
  }

  private getData(): Observable<Date> {

    this._fetchCount++;
    this._fetchCount$.next(this._fetchCount);

    // from time to time create an error, after 300ms
    if (this._fetchCount % 5 === 0) {
      return Observable.timer(300).switchMap(() => Observable.throw(new Error('Error happens once in a while')));
    }

    // this will return current Date after 300ms
    return Observable.timer(300).switchMap(() => Observable.of(new Date()));
  }
}

AfficheurComponent

import {Component, Input, OnInit} from '@angular/core';
import {HardwareService} from '../services/hardware.service';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-afficheur',
  templateUrl: './afficheur.component.html',
  styleUrls: ['./afficheur.component.css']
})
export class AfficheurComponent implements OnInit {

  @Input()
  public label: string;

  public data$: Observable<string>;

  constructor(private hardwareService: HardwareService) {
    this.data$ = hardwareService.data$.map(item => this.label + ' - ' + item.toISOString());
  }

  ngOnInit() {
  }
}

AfficheurComponent template

<div style="margin-top: 10px;">{{ data$ | async }}</div>

Usage

<app-afficheur label="afficheur 1"></app-afficheur>
<app-afficheur label="afficheur 2"></app-afficheur>
<app-afficheur label="afficheur 3"></app-afficheur>
<app-afficheur label="afficheur 4"></app-afficheur>
<app-afficheur label="afficheur 5"></app-afficheur>
<app-afficheur label="afficheur 6"></app-afficheur>

<div style="margin-top: 10px">
  Times called: {{ hardwareService.fetchCount$ | async }}
</div>