Using Lightning Message Service aka LMS in LWC

Hey, Welcome Folks !!

Let's talk about LMS. 

Before going to LMS, lets understand little bit about Lightning Message Channel.

Lightning Message Channel is a metadata that stores communication parameters or message. Use this message channel to publish/subscribe the message.

Lightning Message Service is unique salesforce feature that allows developers to communicate across the DOM within a Lightning Page (i.e. unrelated components) , using a secure message channel. See the LMS as Application Events in aura framework that allows communication between the components on an application.

Using LMS, we can communicate between Visualforce Pages embedded into lightning page, Aura Components, Lightning Web Components, Utility bar components.

There are three main steps to use LMS into you web components:

• Creating a Lightning Message Channel.
• Publishing the message to Message Channel.
• Subscribe/Unsubscribe from Message Channel.

Creating a Lightning Message Channel

Create a folder under force:app directory and name it "messageChannel".

Create a file under messageChannel folder and keep naming convention as below:

        DemoChannel.messageChannel-mets.xml, 

        where DemoChannel is the name of our message channel which we gonna import later. 

Message channel file structure should be like this.

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

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

    <description>This is a demo Lightning Message Channel description.

   </description>

    <isExposed>true</isExposed>

    <lightningMessageFields>

        <description>This is the record Id that changed</description>

        <fieldName>recordId</fieldName>

    </lightningMessageFields>

    <masterLabel>BoatMessageChannel</masterLabel>

</LightningMessageChannel>

Publishing the message to Message Channel

In order to publish message through message channel, first we have to import it. We also have to import publish method from messageService module.

Use @wire(MessageContext) in component js file, to create context object, which provides information about the lightning web components that are using message service.

import { publish, MessageContext } from 'lightning/messageService';

import DemoMC from '@salesforce/messageChannel/DemoChannel__c';

@wire(MessaeContext)

messageContext;

publishTheMessage(){

const payload = {recordId : event.accountId};

Publish(this.messageContext, DemoMC, payload);

}

Subscribe/Unsubscribe from Message Channel

To subscribe/unsubscribe message, lets import these methods from mesageService module. Also import the message channel to use in subscribe method.

import { 

    subscribe, 

    unsubscribe, MessageContext, APPLICATION_SCOPE } from 'lightning/messageService';

import DemoMC from '@salesforce/messageChannel/DemoChannel__c';

@wire(MessageContext)

messageContext;

subscription = null;

subscribeTheChannel(){

    if (!this.subscription) {

            this.subscription = subscribe(

                this.messageContext,

                DemoMC,

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

                { scope: APPLICATION_SCOPE }

            );

        }

}

handleMessage(message){

    //use the message for further processing into component.

    this.recordId = message.recordId;

}

unsubscribeToMessageChannel() {

        unsubscribe(this.subscription);

        this.subscription = null;

}