Communication through Lightning Message Service in LWC

In this article we will learn about Lightning Message Service which is used to build communication between 2 unrelated components. These components can be written in Visualforce, Aura or LWC. But in this article we will learn about building communication between 2 unrelated lightning web components. So lets start with understanding what is Lightning Message Service (Message Channel).

What is Lightning Message Service (Message Channel)?

LMS or Lightning Message Service is a mechanism which allows us to establish communication between Visualforce and Lightning components (Aura or LWC).

LMS Key Concepts

There are 3 things involved which will help us pass message between the components. First one is Publisher component which will publish the message to the message channel. Second is Subscriber component which will monitor the message channel for the messages. And last one is Message Channel because this is the place where publisher will publish the message and subscriber will listen and respond to the messages.

Steps to Create Message Channel

Create a folder named messageChannels inside force-app/main/default. The name of the folder is case sensitive so please make sure you create the folder with exact same name.

Now create a file named SampleMessageChannel.messageChannel-meta.xml. Here SampleMessageChannel is the name of the message channel you can choose any name but the extension should be same. Paste the following content in the file. If you have changed the file name then replace the content of masterLabel tag with the file name. In this file we have declared a field named Data which will be used to pass information from publisher to subscriber component.

<?xml version="1.0" encoding="UTF-8" ?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
    <masterLabel>SampleMessageChannel</masterLabel>
    <isExposed>true</isExposed>
    <description>Sample Message Channel to learn LMS</description>
    <lightningMessageFields>
        <fieldName>Data</fieldName>
        <description>This is a field which help in passing data</description>
    </lightningMessageFields>
</LightningMessageChannel>

Paste below code in the file named package.xml which will be availabe in folder named manifest.

<types>
       <members>*</members>
       <name>LightningMessageChannel</name>
</types>

Now you have to create 2 components. The first will publish the message that is why we are calling it Publisher Component and the second will receive the message and we will call it Subscriber Component. Have a look at the code below.

Code Time

Publisher Component (HTML)

<template>
    <lightning-card title="LMS Publisher">
        <div class="slds-m-around_medium">
            <lightning-input type="text" label="Enter Message" onkeyup={inputHandler}></lightning-input>
        </div>
        <div class="slds-m-around_medium">
            <lightning-button label="Send Message" onclick={publishMessage}></lightning-button>
        </div>
    </lightning-card>
</template>

Publisher Component (JavaScript)

import { LightningElement, wire } from 'lwc';
import messageChannel from "@salesforce/messageChannel/SampleMessageChannel__c"
import {MessageContext, publish} from 'lightning/messageService'
export default class LmsPublisherWebComponent extends LightningElement {

    @wire(MessageContext)
    messageContext

    textInput;
   inputHandler(event){
       this.textInput = event.target.value;
   }

   publishMessage(){
    const message = {
        Data:{
            'textInput':this.textInput
        }
    }
    publish(this.messageContext,messageChannel,message)
}

}

Subscriber Component (HTML)

<template>
    <lightning-card title="LMS Subscriber">
        <div class="slds-m-around_medium">
            <h1>{receivedData}</h1>
        </div>
    </lightning-card>
</template>

Subscriber Component (JavaScript)

import { LightningElement,wire } from 'lwc';
import messageChannel from "@salesforce/messageChannel/SampleMessageChannel__c"
import {MessageContext, subscribe,APPLICATION_SCOPE} from 'lightning/messageService'
export default class LmsSubscriberWebComponent extends LightningElement {

    @wire(MessageContext)
    messageContext


    receivedData


   connectedCallback(){
       this.subscribeMessage();
   }


   subscribeMessage(){
       subscribe(this.messageContext,messageChannel, (message)=>{this.handleMessage(message)},{scope:APPLICATION_SCOPE});
   }


   handleMessage(message){
       this.receivedData = message.Data.textInput?message.Data.textInput:"No Data Shared"
   }


}

Also check out the below video on Communication through Lightning Message Service in LWC?

We hope now you know How to build Communication through Lightning Message Service in LWC? If you have any doubts then let us know in the comment box below.