Skip to content

MessageHub

In order to maximize extensibility and isolation, all perspectives, views, editors, windows, etc are loaded inside iframes. Those UI modules must comunicate between eachother and that is what MessageHub is for. It's a library based on the postMessage API and it uses the observer pattern.

Basic Usage

If you are using the standard Dirigible view configuration, Message Hub support is automatically enabled.

If you are making a custom view, you can include the API using the web link above.

To initialize it:

const messageHub = new MessageHubApi();
// or
const messageHub = new MessageHubApi({
    hubWindow = window,
    targetOrigin = location.origin,
    allowedOrigins = [location.origin],
});

Functions

Function Description Returns
triggerEvent(topic) Sends an empty message to a topic -
postMessage(PostObject) Sends a message/data to a topic -
addMessageListener(ListenerObject) Registers a listener. Triggered when a message is posted. Returns a function to unregister the listener. function
removeMessageListener(handlerReference) Unregisters a listener -

Typedefs

InitObject : Object
PostObject : Object
ListenerObject : Object

Note

Params in square brackets are optional.

InitObject : Object

Properties

Param Type Description
hubWindow window The top level browser window object.
targetOrigin string Origin the sender.
allowedOrigins array. List of allowed origins who can send a message.

PostObject : Object

Properties

Param Type Description
topic string The topic to listen to.
data Message/data that will be transmitted.

ListenerObject : Object

Properties

Param Type Description
topic string The topic to listen to.
handler Callback function that will handle the incomming message/data.

Example

messageHub.triggerEvent('some-topic');

messageHub.postMessage({
    topic: 'some-topic',
    data: 'some-data'
});

const topicListener = messageHub.addMessageListener({
    topic: 'some-topic',
    handler: (data) => {
        if (data) {
            console.log(data);
            messageHub.removeMessageListener(topicListener);
        }
    }
});