But what if the application doesn't provide callbacks for when the user logs in and out? Callbacks are messy and can quickly turn a program into spaghetti code. Instead, we can determine it ourselves by observing the user directly. If the user has the webpage in focus, then he/she must be active and available. We can use JavaScript's focus and blur events for this.

window.addEventListener('focus', function(event) {   me.available = true;   app.setReceptor(me.name, me.available); // just go with it   container.innerHTML = lazyReceptors.toArray().join(''); }); window.addEventListener('blur', function(event) {   me.available = false;   app.setReceptor(me.name, me.available);   container.innerHTML = lazyReceptors.toArray().join(''); });

Wait a second, aren't events reactive too? Can they be lazily computed as well? They can in the Lazy.js library, where there's even a handy method for this.

var focusedReceptors = Lazy.events(window, "focus").each(function(e){   me.available = true;   app.setReceptor(me.name, me.available);   container.innerHTML = lazyReceptors.toArray().join(''); }); var blurredReceptors = Lazy.events(window, "blur").each(function(e){   me.available = false;   app.setReceptor(me.name, me.available);   container.innerHTML = lazyReceptors.toArray().join(''); });

Easy as pie.

Our boss likes the application so far, but she points out that if an employee never logs out before leaving for the day without closing the page, then the application says the employee is still available.

To figure out if an employee is active on the website, we can monitor the keyboard and mouse events. Let's say they're considered to be unavailable after 30 minutes of no activity.

var timeout = null; var inputs = Lazy.events(window, "mousemove").each(function(e){   me.available = true;   container.innerHTML = lazyReceptors.toArray().join('');   clearTimeout(timeout);   timeout = setTimeout(function(){     me.available = false;     container.innerHTML = lazyReceptors.toArray().join('');   }, 1800000); // 30 minutes });

The Lazy.js library has made it very easy for us to handle events as an infinite stream that we can map over. It makes this possible because it uses function composition to take control of the order of execution.

But there's a little problem with all of this. What if there are no user input events that we can latch onto? What if, instead, there is a property value that changes all the time? In the next section, we'll investigate exactly this issue.