RxJS Playground

A blank canvas to play / experiment with RxJS: https://github.com/Reactive-Extensions/RxJS

by slphd

HTML

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>
<button id="myButton">Click me</button>
<input id="input" type="text">

JavaScript

console.clear();

const { range, Observable, Subject } = rxjs;
const { shareReplay } = rxjs.operators;


const observable = new Observable((observer) => {
	
  let counter = 0;
  
  const intervalId = setInterval(() => {
  	observer.next(counter);
    counter++;
  }, 1000)
  
  setTimeout(() => {
  	observer.error('ERROR');
  }, 10000);
  
  return () => {
  	clearInterval(intervalId);
  }
});
 
/* const source = observable.pipe(
	shareReplay(1)
);
 */
 
const source = new Subject();
 let counter = 0;
  
  const intervalId = setInterval(() => {
  	source.next(counter);
    counter++;
  }, 1000);
  
  setTimeout(() => {
  	source.error('ERROR');
  }, 10000);
 

 
source.subscribe(
	(v) => console.log(`observerA: ${v}`),
	(v) => console.error(`observerA: ${v}`),
);
 
source.subscribe(
	(v) => console.log(`observerB: ${v}`),
	(v) => console.error(`observerB: ${v}`),
);
 
setTimeout(() => {
  source.subscribe(
    (v) => console.log(`observerC: ${v}`),
    (v) => console.error(`observerC: ${v}`),
  );
}, 11000) 
 

setTimeout(() => {
  source.subscribe(
    (v) => console.log(`observerD: ${v}`),
    (v) => console.error(`observerD: ${v}`),
  );
}, 15000)