Convert DOM and Node.js Streams to RxJS Observables with fromEvent
Besides converting arrays and promises to Observables, we can also convert other structures to Observables.
This lesson teaches how we can convert any addEventHandler or removeEventHandler API to Observables. We will see how fromEvent does just that.
[00:00] We just saw how to convert arrays and promises to observables using the from operator. There are other things we can convert to observables as well.
[00:08] Whenever you have an API that looks like this, add event handler and remove event handler, these are quite common in the DOM and also in node.js -- you can convert that to an observable using the operator from event pattern, which is available under rx.observable.. That is a function that takes two arguments. It takes add event handler and remove event handler, and then it will return an observable.
[00:38] Let's see how this works in practice. Let's listen to click events, for instance. Let's make this function as it takes a handler as an argument, handler function. Then it registers on the DOM that we are interested in listening to click events using this handler. Symmetrically for removing, we'll remove that event listener.
[01:04] OK, so now when we call this we get an observable, which we can call foo. When foo is subscribed, it will attach that event handler to the DOM here to listen to clicks. When clicks happen, they will be delivered to the observer, which will put them in console log. If we run this and click on the DOM here, we see those events being delivered to the observer, which is putting them on console.
[01:32] How does from event pattern happen or work under the hood? Let's try to use create as we had in previous lessons, rx.observable.create. If you see a from event pattern as a function that takes add and remove, what that returns is an observable, such that for each observer that subscribes, it will add that event handler. What is that handler, actually? That's a good question.
[02:07] As you can see here, this API doesn't take the actual handler in. It just takes the function that knows how to add that handler, but it doesn't take the handler. That's because a handler in this case will be a function that takes that event, and just forwards that event to the observer. That's what the handler is in this case. It forwards the events that it listens to the observer.
[02:34] This is a really simplified version of from event pattern. Now if we use that, if we say var foo = from event pattern and we use these two functions, we will see it working as it was before. Of course, from event pattern is more complex than this, it also handles removing. We didn't use that, but the idea is pretty much this.
[03:02] Because it's quite common to handle DOM events such as click and et cetera, there is also another operator which is a specialized version of from event pattern, which is called just from event. That takes a target and an event type, and this is mainly for the DOM.
[03:17] What from event allows us to do is to forget about adding and removing event handlers. We just think about the target, which is the document, and what type of events we want, which are clicks. We can just say var foo equals that. Once we click here on the DOM, we see the same thing.
[03:37] That is basically how you convert from event streams on the DOM and in node.js to observables if you have an API that looks like add event handler or remove event handler.