This page describes how to send messages on the client side from an add-on running in the side-panel iframe to an add-on running in the main stage iframe. Frame-to-frame messaging only occurs on the client side, so message delivery is near instantaneous.
To send a message:
- From the side panel to the main stage, use the
notifyMainStage()method.
await sidePanelClient.notifyMainStage("YOUR_MESSAGE");
- From the main stage to the side panel, use the
notifySidePanel()method.
await mainStageClient.notifySidePanel("YOUR_MESSAGE");
The payload
length must conform to its specified size limit.
To receive the message, the add-on must subscribe to
the
frameToFrameMessage
callback. The following code sample shows how to subscribe to a
frameToFrameMessage callback:
sidePanelClient.on('frameToFrameMessage', (arg: FrameToFrameMessage) => {
// YOUR_CODE
});
The "Animation" sample add-on on GitHub
includes a full example of frame-to-frame messaging. After the activity starts,
the side panel notifies the main stage whenever the user changes an input.
The main stage also subscribes to the frameToFrameMessage callback
to receive updated state.
Notes
Frame-to-frame messages sent by a given participant are only visible by that same participant. To send messages or state to other participants, learn how to share add-on state.
Message delivery is only attempted once. To receive messages, the receiving panel must be open and the app must subscribe to the callback before the message is sent.