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”.
Conclusioni
In questo articolo abbiamo analizzato dal punto di vista teorico e pratico le differenze tra gli Observables “Hot” e quelli “Cold” di RxJs.
Parte di questo articolo è stato scritto grazie alle informazioni contenute in questo post di Medium.
Nel caso fossi interessato ad altri contenuti relativi ad RxJS o Angular, puoi seguire i links proposti.