Realtime Events

Methods

broadcast(...)

(event: string, payload?: title="Json">Json) => Promise<void>

🚦 Rate limit: Level 1

Send real-time broadcasted collaborative event to all other users and browser instances (tabs) except the current.

Example:

// Send broadcasted event to all users on the board and also to all opened browsers/tabs of current user and the same board.
await miro.board.events.broadcast('message', 'hello');

// For other users this event handler will show notification with text 'hello'
miro.board.events.on('message', async (message) => {
  await miro.board.notifications.showInfo(message);
});

on(...)

(event: string, handler: (payload: T) => void) => Promise<void>

If you want your app to react to an event by executing a function, you can use the on property to subscribe to events.
The on property subscribes the app to listen to an event. When the event fires, the event handler executes a function to perform an action.

To subscribe to an event and its handler, pass to the on property:

• The event that your app should listen to.
• The event handler that the app needs to call when the event fires.

Dispatching events

In general, when an app subscribes to an event, the event is dispatched to all iframes:

• Headless (main iframe)
• Panel
• Modal

This behavior makes it easy to subscribe to an event from any of these iframes, without worrying about which iframe the event is dispatched to.

Note:

You can subscribe to any event, but it should be sent by your app somewhere, for example by using miro.board.events.broadcast(event, data) method.

Example:

// Listen to the 'message' event emitted by the same app and show notification message.
miro.board.events.on('message', async (message) => {
  await miro.board.notifications.showInfo(message);
});

off(...)

(event: string, handler: (payload: T) => void) => Promise<void>

When an app no longer needs to listen to an event to trigger an event handler, it can use the off property to unsubscribe from it.
To unsubscribe from an event and its handler, pass to the off property:

• The event whose handler you want your app to unsubscribe from.
• The event handler that you previously registered with the on property, and that your app no longer needs to listen to.

Example:

// Create an 'onEvent' event handler to show broadcasted message.
const onEvent = async (message: string) => {
  await miro.board.notifications.showInfo(message);
};

// Register the 'message' event so that the app listens to it.
miro.board.events.on('message', handler);

// Unsubscribe from the 'message' event handler.
// The app no longer shows notification to user.
miro.board.events.off('message', handler);

All properties

(event: string, payload?: title="Json">Json) => Promise<void>

(event: string, handler: (payload: T) => void) => Promise<void>

(event: string, handler: (payload: T) => void) => Promise<void>