RxJS Playground

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

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.8.1/rxjs.umd.min.js"></script>
<button id="boton">
lanzar evento a rxjs
</button>
<br>
<textarea id="textArea" cols="42" rows="16">
  
</textarea>

JavaScript

console.clear();
const boton = document.getElementById('boton');
const textArea = document.getElementById('textArea');

const myObservable$ = rxjs.fromEvent(boton, 'click'); //PREDEFINIDO
let cont = 0;
const subscription = myObservable$.subscribe(event =>{
 cont++;
 textArea.value += `Ob1 pos:${event.x}  cont=${cont}\n`;
 if(cont >= 3){
   textArea.value += `Ob1 Nos dessubscribimos tras ${cont} eventos!\n`;
   subscription.unsubscribe();
 }
});

//MANUAL 
const fromEvent = (node, name) => rxjs.Observable.create((observer) => {
  console.log("SUBSCRIPCION")
  function handler(event) {
    console.log("Evento!") //No se ejecuta hasta que nos subscribimos!!
    observer.next(event)
  }
  node.addEventListener(name, handler);
  return () => {
    node.removeEventListener(name, handler);
  };
});

const myObservable2$ = fromEvent(boton, 'click');
let cont2 = 0;

const subscription2 = myObservable2$.subscribe(event =>{
 cont2++;
 textArea.value += `Ob2 pos:${event.x} cont=${cont2}\n`;
 if(cont2 >= 5){
   textArea.value += `Ob2  Nos dessubscribimos tras ${cont2} eventos!`;
   subscription2.unsubscribe();
 }
});

///OFF
rxjs.of(3, 2, 1).subscribe({
  next: v => console.log(v + " ..."),
  error: e => console.log("error", e),
  complete: () => console.log("We have lift off")
});

//PIPE, FILTER, SCAN , MAP, TAKEUNTIL
const timer$ = rxjs.timer(5000);
const number$ = rxjs.interval(500).pipe(
  rxjs.filter(v => v % 2 === 0),
  rxjs.scan((acc, v) => acc + v),
 rxjs. map(v => `n${v}`),
 //rxjs.take(4),
 rxjs.takeUntil(timer$)
);
number$.subscribe({
  next: data => console.log(data),
  error: error => console.log("onError", error),
  complete: () => console.log("onComplete")
});