Messaging

Messaging

In order for plugins to be able to communicate to the parent app and other plugins, and for the parent app to be able to communicate to the plugins, there needs to be a messaging system in place. The DAaaS frontend makes use of browser CustomEvents as the common API for these seperate apps to communicate with one another.

Sending messaging

In brief, in order to send an message, one needs to dispatch a custom event on the document like so

document.dispatchEvent(
    new CustomEvent('my-custom-event', { detail: "my-detail"})
);

The initial argument is a string representing the name of the event. In our use case, all events are named daaas-frontend and instead any information about the event itself is contained in the event detail. Because the parent app makes use of Redux, the event detail must follow the contract of an action: it contains a type describing the type of action and any data is contained in a property named payload. So, events sent should look like so:

document.dispatchEvent(
    new CustomEvent('daaas-frontend', { detail: { type: "daaas:api:event", payload: {data1: "x", data2: "y"} } })
);

For information on how actions should be named, see ADR decision 6.

Recieving messages

In order to be able to listen for events, you should add an event listener that listens to daaas-frontend events and perform some check on what the type of the event is and perform the relevant action needed when a message of that typ is recieved. e.g.

document.addEventListener('daaas-frontend', e => {
  const action = (e as CustomEvent).detail;
  if (action.type === 'daaas:api:plugin_rerender') {
    render();
  }
});

Redux integration

If your plugin makes use of Redux, it may be of use to look at how the parent application handles converting Redux actions to browser events in src/state/middleware/daaas.middleware.tsx. In brief, the middleware watches for any actions that contain a broadcast property and if it is true then it automatically dispatches a CustomEvent. It also attaches a listener for daaas-frontend and handles any messages it expects to recieve from plugins and dispatches matching Redux actions for them.