Lightning Message Service – Communication Made Easy

In Winter 20 , Salesforce introduced Lightning Message Service which enables communication between Visualforce and Lightning Component(Aura & LWC) on any lightning page

Lightning Message Service API allows you to publish a message through out the lightning page and subscribe the same message anywhere in that lightning page

For Lightning Web Components Use @salesforce/messageChannel , For Aura Components Use lightning:messageChannel, For Visualforce page , Use global variable $MessageChannel

LMS Implementation

Lets take an example where we created a message channel called lightningMessageChannel__c using METADATA API , Lets see how this message channel published in LWC and subscribed by Visualforce page

Create a Lightning Web Component that publishes on message channel we created , This Component Uses @salesforce/messageChannel, we need to import from @salesforce/messageChannel/lightningMessageChannel__c

import { LightningElement } from 'lwc';
import { publish,createMessageContext,releaseMessageContext } from 'lightning/messageService';
import SAMPLEMC from "@salesforce/messageChannel/lightningMessageChannel__c";

export default class MyLwcPublisher extends LightningElement {
    context = createMessageContext();
    constructor() {
        super();
    }
    handleClick() {
        const message = {
            recordId: "sample Id ",
            recordData: {
                value: "Information"
            }
        };
		// Publishing Lightning Message Service 
        publish(this.context, SAMPLEMC, message);
    }
    disconnectedCallback() {
        releaseMessageContext(this.context);
    }
}

<template>
    <lightning-card title="MyLwcPublisher" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <p>MessageChannel: lightningMessageChannel</p>
            <br>
            <lightning-button label="Publish" onclick={handleClick}></lightning-button>
        </div>
    </lightning-card>
</template>

VISUALFORCE PAGE

We can subscribe or unsubscribe messaging channel on which LWC publishes

<apex:page>
    <div>
        <p>Subscribe to lightningMessageChannel__c</p>
        <button onclick="subscribeMC()">Subscribe</button>
        <p>Unsubscribe from lightningMessageChannel__c</p>
        <button onclick="unsubscribeMC()">Unsubscribe</button>
        <br/>
        <br/>
        <p>Received message:</p>
        <textarea id="MCMessageTextArea" rows="10" style="disabled:true;resize:none;width:100%;"/>
    </div>
    <script>
        // Load the MessageChannel token in a variable
        var SAMPLEMC = "{!$MessageChannel.lightningMessageChannel__c__c}";
        var subscriptionToMC;
        // Display message in the textarea field
        function onMCPublished(message) {
            var textArea = document.querySelector("#MCMessageTextArea");
            textArea.innerHTML = message ? JSON.stringify(message, null, '\t') : 'no message payload';
        }

        function subscribeMC() {
            if (!subscriptionToMC) {
                subscriptionToMC = sforce.one.subscribe(SAMPLEMC, onMCPublished);
            }
        }

        function unsubscribeMC() {
            if (subscriptionToMC) {
                sforce.one.unsubscribe(subscriptionToMC);
                subscriptionToMC = null;
            }
        }
    </script>

</apex:page>