RxJs Cold vs Hot

by vintharas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script>

Babel + JSX

// A Cold observable
var cold$ = Rx.Observable
  .interval(500)
  .take(3);
  
cold$.subscribe(value => console.log(`cold 1: ${value}`))

setTimeout(_ => 
  cold$.subscribe(value => console.log(`cold 2: ${value}`)), 700);
  
// => cold 1: 0
// => cold 1: 1
// => cold 2: 0
// => cold 1: 2
// => cold 2: 1
// => cold 2: 2

// both subscribers get all values
// even when subscriber 2 was late to the party

// A hot observable
setTimeout(_ => {
  var hot$ = Rx.Observable
    .interval(500)
    .take(3)
    .share();

  hot$.subscribe(value => console.log(`hot 1: ${value}`))

  setTimeout(_ => 
    hot$.subscribe(value => console.log(`hot 2: ${value}`)), 700);
    
    // => hot 1: 0
    // => hot 1: 1
    // => hot 2: 1
    // => hot 1: 2
    // => hot 2: 2
    
    // => values are pushed regardless the number of subscribers
    // => the value 0 had already being emitted when
    // the subscriber 2 subscribed and therefore
    // it missed it
}, 2000);