Understanding RxJS/ Observables

Understand Observables and how to use them

by Shital Agarwal

HTML

<script src="https://unpkg.com/@reactivex/[email protected]/dist/global/Rx.js"></script>

<button>Click me</button>

JavaScript

var button = document.querySelector('button');

var observer = {
	next: function(value) {
  	console.log(value);
  },
  error: function(error) {
  	console.log(error);
  },
  complete: function() {
  	console.log('Completed');
  }
};

//Rx.Observable.fromEvent(button, 'click')
var subscription = Rx.Observable.create(function(obs) {
	//obs.next('A value');
  //obs.error('Error');
  //setTimeout(function() {
  //	obs.complete();
  //  obs.next('A second value');
  //}, 2000);
  button.onclick = function(event) {
  	obs.next(event);
  }
})
	.subscribe(observer);
  
setTimeout(function() {
	subscription.unsubscribe();
}, 5000);