Sending & receiving global events in Deno

Introduction

Being a supporter of browser compatible APIs, Deno offers numerous useful APIs, including sending & receiving global events. In browser world & in Deno, these popular APIs are: dispatchEvent, addEventListener, removeEventListener. These APIs are useful in decoupling publishers & consumers. In Deno, these APIs are used to post & receive events in the global scope. In other words, the event target is the global scope.

• addEventListener: Adds a listener in the global scope
• removeEventListener: Removes a listener from the global scope
• dispatchEvent: Fires an event to the listeners in the global scope

In this article, we’ll go over how to use these well-known APIs in Deno.

Basic Usage

Imports

No imports are required as this functionality is part of the core runtime.

Add listener

The addEventListener API can be used to register a global listener for a given event name. The signature of addEventListener API is:

function addEventListener(type, callback, options);

• Type: This is the event name (must be a string)
• Callback: This is the callback function that would be invoked when the event fires
• Options: Additional listening options (most useful one is the option once)

Here is an example of registering a callback for window load & unload events:

addEventListener("load", () => console.log('App is loaded'));
addEventListener("unload", () => console.log('App is exiting'));

The registration can be done for any event name, for example:

addEventListener("someEvent", () => console.log('Some event called'));

An additional useful option is once, that causes the callback to be invoked exactly once for that event type.

addEventListener("someEvent", () => console.log('Some event called'), {once: true});

Remove listener

The removeEventListener API can be used to remove a registered global listener for a given event name. The signature of addEventListener API is:

function removeEventListener(type, callback, options);

• Type: This is the event name (must be a string)
• Callback: This is the callback function that was provided during the event registration
• Options: Additional removal options (none of the options are commonly used)

Here is an example of removing a registration for window load event.

const cb = () => console.log('App is loaded');
addEventListener("load", cb);
/* do something */
removeEventListener("load", cb);

The registration can be removed for any event name, for example:

removeEventListener("someEvent", () => console.log('Some event called'));

Dispatch event

The dispatchEvent API can be used to send/fire an event that would synchronously call all the registered listeners. The signature of dispatchEvent API is:

function dispatchEvent(event: Event): boolean;

• Event: This is the event that would be fired. The web Event is a complex object with a number of options. A great documentation for the event is here. In the scope of this article, we’ll fire an event only with a name.

The dispatchEvent API returns true if the event has been successfully dispatched.

dispatchEvent(new Event('load')); //used by Deno internally
dispatchEvent(new Event('someEvent'));

An example

Now that we’ve seen the well-known browser/web APIs in Deno, let’s write a small app to see this in action. The main program would fire an event to the global scope, that would in turn call all listeners (could be other ES modules).

The main program is:

//app.ts
import {listenAndServe} from "https://deno.land/std/http/mod.ts";
import {someFunc} from "./appMod.ts";
someFunc();
listenAndServe(':8000', () => {
  dispatchEvent(new Event('httpRequestEvent'));
  return new Response();
});

The ES module appMod.ts receives the request event and updates stats:

//appMod.ts
let httpRequests=0;
addEventListener('httpRequestEvent', () => console.log('Total requests', ++httpRequests));
export function someFunc() {}

Here is the output of a sample run (Deno log starts with D):

D: deno run --allow-all app.ts
> curl http://localhost:8000
D: Total requests 1
> curl http://localhost:8000
D: Total requests 2