Lightning Message Service (LWC + AURA + Visualforce)

Lightning Message Service is used to communicate across the DOM between Visualforce, LWC and AURA. it's used to communicate over a Lightning message channel. we need to import messageService and import the created message channel @salesforce/messageChannel.

Example, 

• If we can publish message from LWC, Then subscribed to AURA and  Visualforce.

• If  we can publish message from AURA, Then subscribed to LWC and Visualforce.

• If  we can publish message from Visualforce, Then subscribed to LWC and AURA.

Github URL : Lightning Message Service (LWC + AURA + Visualforce)

Steps to achieve : 

• Create messageChannel.
• Create publish message from LWC, AURA and Visualforce
• Create Subscribed to LWC, AURA and Visualforce.

Create messageChannel : 

Message Channel is a medium to transfer info from one component to another.

Name : messageMedium.messageChannel-meta.xml

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

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

    <description>Message Medium Lightning Message Channel.</description>

    <isExposed>true</isExposed>

    <lightningMessageFields>

        <description>Message Content</description>

        <fieldName>message</fieldName>

    </lightningMessageFields>

    <lightningMessageFields>

        <description>Source System Info</description>

        <fieldName>messageFrom</fieldName>

    </lightningMessageFields>

    <masterLabel>Message Medium</masterLabel>

</LightningMessageChannel>

• masterLabel - Required. The label for a Lightning Message Channel.
• isExposed - If isExpose is true, Lightning Message Channel is exposed to other namespaces. If not, not exposed to other namespaces.
• description - Description of Lightning Message Channel.
• lightningMessageFields - It’s payload fields for a given Lightning Message Channel.

Create Publish message from LWC, AURA and Visualforce :

In LWC,

We want three info to publish message from LWC.

• Message Context - it's object. Provide about lightning web component info that is using in lightning message service. 

//import scoped message service

import { publish,

        MessageContext,

        unsubscribe,

        APPLICATION_SCOPE,

        subscribe} from 'lightning/messageService';

 @wire(MessageContext)

    messageContext;

• Message Channel - Message Channel is a medium to transfer info from one component to another.

import messageMedium from '@salesforce/messageChannel/messageMedium__c';

• Payload - Data Info based on messageChannel.

const payload = {

    message : this.messageText,

    messageFrom : 'LWC'

};

 

Finally, we publish it

publish(this.messageContext, messageMedium, payload);

In AURA,

We want two info to publish message from AURA.

• Message Channel Type - To reference a respective message channel.
• Scope - Scope Definition.

<lightning:messageChannel type="messageMedium__c" scope="APPLICATION" aura:id="messageMedium"/>

Finally, we publish it

component.find("messageMedium").publish(payload);

In Visualforce,

We can use sforce.one with two parameter.

• Message Channel 

var messageMedium = "{!$MessageChannel.messageMedium__c}";

• Payload

const payload = {

                        message : message,

                        messageFrom : 'VF'

                    }

Finally, we publish it.

sforce.one.publish(messageMedium, payload);

Create Subscribe to LWC, AURA and Visualforce :

In LWC,

We want four parameter to subscribe a message.

• Message Context - it's object. Provide about lightning web component info that is using in lightning message service.

@wire(MessageContext)

    messageContext;

• Message Channel Type - To reference a respective message channel.

import messageMedium from '@salesforce/messageChannel/messageMedium__c';

• Message Handle - To handle message from publisher.

handleMessage(message) {

}

• Scope - We need to mention the scope.

{ scope: APPLICATION_SCOPE }

Finally, 

we can subscribe it using below code.

this.subscription = subscribe(

                this.messageContext,

                messageMedium,

                (message) => this.handleMessage(message),

                { scope: APPLICATION_SCOPE }

            );

we can unsubscribe it using below code.

unsubscribe(this.subscription);

In AURA,

We want two info to subscribe message.

• Message Channel Type - To reference a respective message channel.
• Message Handle - used to handle message Parameter.

<lightning:messageChannel type="messageMedium__c" onMessage="{!c.handleMessage}" scope="APPLICATION"/>

Finally, 

we can subscribe it using below code.

handleMessage : function(component, message, helper) {

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

        && message.getParam("messageFrom") != 'AURA') {

             //Logic Here.

     }

}

In Visualforce,

We want two info to subscribe message.

• Message Channel Type - To reference a respective message channel.

var messageMedium = "{!$MessageChannel.messageMedium__c}";

• Message Handle - used to handle message Parameter.

function onMCPublished(message) {

   if(message.messageFrom != 'VF') {

      //Logic Here.. 

  }

}

Finally, we can subscribe it.

subscriptionToMC = sforce.one.subscribe(messageMedium, onMCPublished);

Thanks,

Priyananth