Message Channel

lightning:messageChannel provides access to the Lightning Message Service API. Lightning Message Service lets you publish and subscribe to messages across the DOM and between Aura, Visualforce, and Lightning Web Components. The lightning:messageChannel component works in Lightning Experience.

To use lightning:messageChannel, add it to your Aura component. The component has a required type attribute. The type is the name of the LightningMessageChannel that the lightning:messageChannel component references. To reference a custom instance of the LightningMessageChannel metadata type, use the __c suffix. Note that this is not a custom object, it just uses the same suffix. Here, we reference SampleMessage__c. Check out Create a Message Channel to learn more.

This example shows how to publish a message to the SampleMessageChannel__c channel when a button is clicked. To access the publish method from your component, assign an aura:id to lightning:messageChannel.

1<!-- publisherComponent.cmp -->
2<aura:component>
3    <lightning:button label="Send Payload" onclick="{! c.handleClick }">
4    <lightning:messageChannel type="SampleMessageChannel__c"
5            aura:id="sampleMessageChannel"/>
6</aura:component>

Pass in a payload in your client-side controller.

1// publisherController.js
2({
3  handleClick: function (cmp, event, helper) {
4    var payload = {
5      recordId: "some string",
6      recordData: {
7        value: "some value",
8      },
9    };
10
11    cmp.find("sampleMessageChannel").publish(payload);
12  },
13});

This example shows how to subscribe to a message channel by creating a handler method that runs when messages are published on the SampleMessageChannel__c message channel.

1<-- subscriberComponent.cmp -->
2<aura:component>
3  <aura:attribute name="recordValue" type="String" />
4  <lightning:formattedText value="{!v.recordValue}" />
5  <lightning:messageChannel
6    type="SampleMessageChannel__c"
7    onMessage="{!c.handleChanged}"
8    scope="APPLICATION"
9  />
10</aura:component>

Subscriber components are responsible for updating the view in their onMessage handler each time they receive a new message. Components that call $A.enqueueAction in their onMessage handler must wrap it with $A.getCallback if the callback on the enqueued action is meant to trigger a re-render.

1// subscriberController.js
2({
3  handleChanged: function (cmp, message, helper) {
4    // Read the message argument to get the values in the message payload
5    if (message != null && message.getParam("recordData") != null) {
6      cmp.set("v.recordValue", message.getParam("recordData").value);
7    }
8  },
9});