JSFiddle - React, Tailwind, and code Playground

by jhorvath

HTML

<button id="publish1">
Publish 1
</button>
<button id="publish2">
Publish 2
</button>
<button id="subscribe2">
Publish as subscriber
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.min.js"></script>

JavaScript

var eventAggregator = new Rx.Subject();
var p1 = Rx.Observable.fromEvent(document.getElementById("publish1"), "click");
var p2 = Rx.Observable.fromEvent(document.getElementById("publish2"), "click");
var s1 = Rx.Observable.fromEvent(document.getElementById("subscribe2"), "click");

p1.subscribe(next => {
	console.log("p1 click");
  eventAggregator.next({ event: "p1", data: "click" });
});

p2.subscribe(next => {
	console.log("p2 click");
  eventAggregator.next({ event: "p2", data: "click" });
});

s1.subscribe(next => {
	console.log("Publish as subscriber click");
  eventAggregator.next({ event: "s1", data: "click" });
});

eventAggregator.subscribe(next => {
	console.log("Subscriber 1 recieved: " + JSON.stringify(next));
});
eventAggregator.filter(next => {
	return next.event === "p2";
}).subscribe(next => {
	console.log("Subscriber 2 recieved: " + JSON.stringify(next));
});