Periodically renew Subscription with Angular for http-get

Question

I would like to call periodically a method on my Angular Frontend from the Server. I just would like to receive the current time. My problem is that the memory usage from the browser is growing and growing!

I'm not sure whether the subscription is renewed every second or really only when it has fired. So that if the call takes several seconds, the subscription is not renewed ten times during this time - It is certainly possible that as a beginner I made several mistakes in the program...

My Service:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export interface timestamp {
    now: number;
}

@Injectable({
    providedIn: 'root'
})

export class FireCrewService {

    private api = 'api/';

    constructor(private http: HttpClient) { }

    getToday(): Observable<timestamp> {
        return this.http.get<any>(`${this.api}today`);
    }

}

And my Component:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FireCrewService, timestamp } from '..//shared/fire-crew.service';

import { interval, of, Subject } from 'rxjs';
import { catchError, mergeMap, takeUntil } from 'rxjs/operators'

@Component({
    selector: 'app-default',
    templateUrl: './default.component.html',
    styleUrls: ['./default.component.css']
})

export class DefaultComponent implements OnInit, OnDestroy {

    today: timestamp | undefined;
    destroy$ = new Subject();

    constructor(private fs: FireCrewService) {
    }

    ngOnDestroy(): void {
        this.destroy$.next();
    }


    ngOnInit(): void {

    const myObserver = {
        next: (value: timestamp) => this.onNext(value),
        error: (err: string) => this.onError(err),
        complete: () => this.onComplete(),
    };

    interval(1000).pipe(
        mergeMap(
            () => this.fs.getToday().pipe(
                    catchError((err) => {
                    this.onError(err);
                    return of(err);
                    })
                )
            ), takeUntil(this.destroy$)
        ).subscribe(myObserver);

    }


    onNext(value: timestamp): void {
        this.today = value;
    }

    onError(value: string): void {
        console.log('Observer got a onError notification', value);
    }

    onComplete(): void {
        console.log('Observer got a complete notification')
    }

}

You can check using timer operator : https://www.learnrxjs.io/learn-rxjs/operators/creation/timer maybe it's the right operator for your use-case — Rebai Ahmed, Apr 15 '21 at 08:27

MeerArtefakt · Accepted Answer · 2021-05-10T11:14:17.180

i could solve it for myself:

ngOnDestroy(): void {
  this.destroy$.next();
}

ngOnInit(): void {
  this.fs.getLast().pipe(takeUntil(this.destroy$)).subscribe(this.myObserver);
}

onNext(value: timestamp): void {
  this.timestamp = timestamp;
}

onError(value: string): void {
  setTimeout(() => this.fs.getLast()
  .pipe(takeUntil(this.destroy$)).subscribe(this.myObserver), 5000);
}

onComplete(): void {
  setTimeout(() => this.fs.getLast()
  .pipe(takeUntil(this.destroy$)).subscribe(this.myObserver), 1000);
}

Periodically renew Subscription with Angular for http-get

1 Answers1