[rxjs] Demystifying Cold and Hot Observables in RxJS

Cold:

console.clear();
var Observable = Rx.Observable;
var clock = Observable.interval(1000).take(10).map((i) => `${i}!`);
clock.subscribe((x) => {
  console.log(` a  ${x}`);
});

setTimeout(function(){
  clock.subscribe((x) => {
    console.log(`         b    ${x}`);
  });
}, 3500);

Results:

/*
" a  0!"
" a  1!"
" a  2!"
" a  3!"
"         b    0!"
" a  4!"
"         b    1!"
" a  5!"
"         b    2!"
" a  6!"
"         b    3!"
" a  7!"
"         b    4!"
" a  8!"
"         b    5!"
" a  9!"
"         b    6!"
"         b    7!"
"         b    8!"
"         b    9!"
*/

As you can see, 'a' and 'b' all start from '0'. They are independent. As youtube vedio, you can open the same vedio in tow tabs. When you click play, those two vedio will play independently. 

 

Hot: publish().refCount();

Hot Observables are like 'live' youtube video, everyone watch the same vedio at the same pace. 

As I wrote in previous article about publish(); you can use this with connect() funciton, but there is problem, we will miss the very first event.

RefCount and a hot observable is analogous to a live video of a band playing at a concert, but the band doesn't start playing if there isn't anyone in the audience. That would be a waste, right? So, why play if there is no one watching?

RefCount tells the band to play when there is at least one person in the audience, in other words, when the number of observers goes from zero to one.

console.clear();
var Observable = Rx.Observable;
var clock = Observable.interval(1000).take(10).map((i) => `${i}!`).publish().refCount();
clock.subscribe((x) => {
  console.log(` a  ${x}`);
});

setTimeout(function(){
  clock.subscribe((x) => {
    console.log(`         b    ${x}`);
  });
}, 3500);

Results:

/*" a  0!"
" a  1!"
" a  2!"
" a  3!"
"         b    3!"
" a  4!"
"         b    4!"
" a  5!"
"         b    5!"
" a  6!"
"         b    6!"
" a  7!"
"         b    7!"
" a  8!"
"         b    8!"
" a  9!"
"         b    9!"
*/