Salesforce Lightning Message Channel (LMC) communication

 *** Lightning Message Channel (LMC) ***

1. Vs Code: Create a folder with the name "messagechannels" (under main\default)

2. Vs Code: Create meta file with the name "ChannelName.messageChannel-meta.xml" -

    <?xml version="1.0" encoding="UTF-8"?>

    <LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">

        <masterLabel>ChannelName</masterLabel>

        <isExposed>true</isExposed>

        <description>Message Channel used for the communication.</description>

        <lightningMessageFields>

            <fieldName>fieldData</fieldName>

            <description>Variable used for lms data</description>

        </lightningMessageFields>

    </LightningMessageChannel>

3. Create a VS Page (lmcVfPage) -

    <script>

    let ChannelNameVar = "{!$MessageChannel.ChannelName__c}";

    let subscribedRef;

    

    function publish(){

        const payload = {

            fieldData: { //this name should be the channel field name

                value: 'some data to send'

            }

        };

        sforce.one.publish(ChannelNameVar, payload)

    }

    

    function subscribe(){

        if(!subscribedRef)

            subscribedRef = sforce.one.subscribe(ChannelNameVar, messageHandler, {scope:"APPLICATION"})

    }

    

    function unsubscribe(){

        if(subscribedRef) {

            sforce.one.unsubscribe(subscribedRef);

            subscribedRef = null;

        }

    }

    function messageHandler(message){

        console.log(`message: ${message.fieldData}`);

    }

    </script>

4. Create a Aura Component (lmcAura) -

    UI -

    <lightning:messageChannel type="ChannelName__c" aura:id="ChannelNameId" onMessage="{!c.handleMessage}" scope="APPLICATION"/>

    publish: function (cmp, event, helper) {

        let msg = cmp.get("v.message")

        let message ={

            fieldData:{

                value: msg

            }

        }

        cmp.find("ChannelNameId").publish(message)

    }

    

    handleMessage: function (cmp, message, helper) {

        if (message !=null && message.getParam("fieldData") !=null){

            console.log(message.getParam("fieldData").value);

        }

    }

5. Create a LWC Component (lmcLwc) -

    import { APPLICATION_SCOPE, publish, createMessageContext, releaseMessageContext, subscribe, unsubscribe } from 'lightning/messageService';

import ChannelNameVar from "@salesforce/messageChannel/ChannelName__c"

LightningElement {

    context = createMessageContext();

    

     publishMessage(){

        const message = {

            fieldData:{

                value: 'Some Value'

            }

        }

        publish(this.context, ChannelNameVar, message)

    }

    subscribeMessage(){

        if (this.subscription){

            return;

        }

        this.subscription = subscribe(this.context, ChannelNameVar, (message)=>{

            this.handleMessage(message)

        }, { scope: APPLICATION_SCOPE})

    }

    unsubscribeMessage(){

        unsubscribe(this.subscription)

        this.subscription = null

    }

    handleMessage(message){

        console.log(lmsData? message.lmsData.value : 'No Message');

    }

    

    disconnectedCallback() {

        releaseMessageContext(this.context)

    }

}

5. Create an App Page and add all vf, aura and lwc components.