RxJS: Hot Observables vs Cold Observables

Uno dei primi concetti che è necessario comprendere per utilizzare efficacemente RxJs è la differenza di comportamento tra Hot Observables e Cold Observables.

In questo articolo vedrai cosa si intende per “Hot Observable” e “Cold Observable”.

Inoltre, tramite esempi, avrai modo di analizzare e comprendere le caratteristiche dei comportamenti di ciascuna delle due categorie di Observables.

Indice

RxJS: comprendere se un Observable è hot o cold

La differenza tra le categorie di Observables può essere riassunta nella seguente frase:

Quando il dato emesso dall’Observable è generato all’interno dell’Observable stesso, tale Observable è definito ‘cold’.
Se invece il dato viene generato al di fuori dell’Observable, lo stesso viene definito ‘hot’.

Nel seguito dell’articolo potrai comprendere facilmente la differenza tra i due tipi di Observable.

RxJs: Cold Observables

Un Observable viene definito ‘Cold’ quando il dato che emette alla sottoscrizione viene prodotto internamente all’Observable stesso.

Per capire perché sia necessaria questa classificazione, è opportuno sapere che gli Observables sono considerati ‘Lazy’ (pigri), ovvero producono un’esecuzione solamente quando viene effettuata una sottoscrizione.

Per ogni sottoscrittore, l’Observable avvia una nuova esecuzione. Questo implica che i dati non vengono condivisi tra le diverse esecuzioni.

Questo implica che due sottoscrittori dello stesso Observable possono ricevere due valori differenti.

Per aiutarti a comprendere questo concetto, puoi far riferimento all’esempio proposto qui sotto.

Nell’esempio, implementato tramite una semplice applicazione costruita con Angular, ho utilizzato il seguente codice:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  output: string[];
  observablesToInstantiate: number;
  observable: Observable<number>;
  constructor() {
    this.output = [];
    this.observablesToInstantiate = 5;
    // we create an Observable
    this.observable = new Observable((observer: Subscriber<number>) => {
      observer.next(Math.random());
    });
    // we create this.observablesToInstantiate subscribers
    for (
      let observableIndex = 0;
      observableIndex < this.observablesToInstantiate;
      observableIndex++
    ) {
      this.observable.subscribe((receivedNumber: number) => {
        this.output.push(
          `subscription number ${
            observableIndex + 1
          } received ${receivedNumber}`
        );
      });
    }
  }
}

Come puoi notare, il dato emesso da this.observable è creato al suo interno.

In questo modo, ogni Subscriber riceverà un valore generato in maniera pseudocasuale da Math.random(), diverso per ciascuno di essi.

Questo comportamento è spesso definito “Unicasting”.

RxJs: Hot Observables

Quando il dato che emetterà un Observable viene prodotto esternamente ad esso, lo stesso sarà definito “Hot”.

Analogamente a quanto fatto per i “Cold Observables”, ecco un esempio di Hot Observables.

Il codice sorgente per implementare l’esempio è disponibile qui sotto.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  output: string[];
  observablesToInstantiate: number;
  observable: Observable<number>;
  constructor() {
    this.output = [];
    this.observablesToInstantiate = 5;
    const aNumber: number = 21.21212121;
    // we create an Observable
    this.observable = new Observable((observer: Subscriber<number>) => {
      observer.next(aNumber);
    });
    // we create this.observablesToInstantiate subscribers
    for (
      let observableIndex = 0;
      observableIndex < this.observablesToInstantiate;
      observableIndex++
    ) {
      this.observable.subscribe((receivedNumber: number) => {
        this.output.push(
          `subscription number ${
            observableIndex + 1
          } received ${receivedNumber}`
        );
      });
    }
  }
}

Come puoi notare, in questo esempio il valore che l’Observable emetterà (aNumber) è generato all’esterno di Observable.

Per questo motivo, tutti i Subscribers riceveranno lo stesso valore, ovvero quello contenuto in aNumber.

Questo comportamento viene definito “Multicasting”.