cold observable vs hot observable

cold observable vs hot observable.txt

Observables
Observables are lazy collections of multiple values over time.

Observables are lazy. Observables are lazy in the sense that they only execute values when something subscribes to it


When the data is produced by the Observable itself, we call it a cold Observable.
When the data is produced outside the Observable, we call it a hot Observable.

Cold Observables
So, we call an Observable “cold” when the data is produced inside the Observable.

import * as Rx from "rxjs";

const observable = Rx.Observable.create((observer) => {
    observer.next(Math.random());
});

// subscription 1
observable.subscribe((data) => {
  console.log(data); // 0.24957144215097515 (random number)
});

// subscription 2
observable.subscribe((data) => {
   console.log(data); // 0.004617340049055896 (random number)
});

As you see the data is produced inside the Observable, making it cold. 
We have two subscriptions which subscribe more or less at the same time. 
Since the Observable does a new execution for every subscriber and the Observable generates a random number, 
the data the subscriber receives is different. This is not a bad thing, you just have to be aware of this behaviour.


Hot Observables
Yes, it is that easy. the Observable is hot when the data is produced outside the Observable. 
As we just saw the hot Observable is able to share data between multiple subscribers. 
We call this behaviour “multicasting”.

import * as Rx from "rxjs";

const random = Math.random()

const observable = Rx.Observable.create((observer) => {
    observer.next(random);
});

// subscription 1
observable.subscribe((data) => {
  console.log(data); // 0.11208711666917925 (random number)
});

// subscription 2
observable.subscribe((data) => {
   console.log(data); // 0.11208711666917925 (random number)
});

Woah, that was easy! All we did was moving the data producer out of the Observable. 
We still have two subscribers and the Observable will still execute two times, 
but since the data is produced outside the Observable our subscriptions will receive the same data

Generating a random number is not a good real life usecase. A good usecase would be DOM events. Let’s say we’re tracking clicking behaviour and have multiple subscribers do something with the coordinates:

import * as Rx from "rxjs";

const observable = Rx.Observable.fromEvent(document, 'click');

// subscription 1
observable.subscribe((event) => {
  console.log(event.clientX); // x position of click
});

// subscription 2
observable.subscribe((event) => {
   console.log(event.clientY); // y position of click
});
---------------------------------------------------------------------------------------------------


Other way? 
--------------------------------------------------------------------------------------------------
Cold observables start running upon subscription, i.e., the observable sequence only starts pushing values to the observers when Subscribe is called. (…) This is different from hot observables such as mouse move events or stock tickers which are already producing values even before a subscription is active.


let obs = Rx.Observable.create(observer => observer.next(Date.now()));

obs.subscribe(v => console.log("1st subscriber: " + v)); //1st subscriber: 1465990942935


obs.subscribe(v => console.log("2nd subscriber: " + v) //2nd subscriber: 1465990942936

);



Hot


let obs = Rx.Observable
            .create(observer => observer.next(Date.now()))
            .publish();

obs.subscribe(v => console.log("1st subscriber: " + v)); //"1st subscriber: 1554058285155"
obs.subscribe(v => console.log("2nd subscriber: " + v));// "2nd subscriber: 1554058285155"
obs.connect();

We use publish to share the value producer across several subscriptions (one indicator of being hot!)

It’s the job of the connect operator to actually cause the ConnectableObservable to subscribe to the underlying source (the thing that produces values). In our case we’re using refCount which is an operator that builds up on connect and causes the 


A cold observable doesn't produce values until you subscribe to it. Most of your application observables are cold. All HttpClient methods return cold observables.

A hot observable is already producing values before you subscribe to it. The Router.events observable, which reports router activity, is a hot observable.