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.