What is Lightning Messaging Service?

Lightning Messaging Service (LMS) is a powerful feature introduced by Salesforce to facilitate communication between Lightning web components (LWC), Aura components, and Visualforce pages within a single Lightning Experience or Salesforce Mobile App session. By leveraging LMS, developers can publish messages and subscribe and unsubscribe to them across different components, allowing for real-time data sharing and a more interactive user interface.

How to Use Lightning Messaging Service?

Step 1: Create a Message Channel

First, you need to create a message channel. A message channel is a metadata type that defines the communication channel for your messages. You can create a message channel in Salesforce Setup.

Create the folder name of MessageChannels, folder path should be force-app\main\default in your salesforce Setup
Create xml file inside the folder name of SampleMessageChannel.messageChannel-meta.xml

SampleMessageChannel.messageChannel-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
    <masterLabel>SampleMessageChannel</masterLabel>
    <isExposed>true</isExposed>
    <description>Message Channel to pass data</description>
    <lightningMessageFields>
        <fieldName>lmsData</fieldName>
        <description>This is the field to pass data</description>
    </lightningMessageFields>
</LightningMessageChannel>

Step 2: Create LWC components

Create first LWC component lmsComponentA.
Create second LWC component lmsComponentX. ( you can create any name you want )
paste below code in both component files.

lmsComponentA.html

<template>
    <lightning-card title="Lwc lms Component A">
        <div class="slds-m-around_medium">
            <lightning-input type="text" label="Enter some text" onkeyup={inputHandler}></lightning-input>
        </div>
        <div class="slds-m-around_medium">
            <lightning-button variant="Brand" label="Publish" onclick={publishMessage}></lightning-button>
        </div>
    </lightning-card>
</template>

In this file we used Lighting card and inside that we added input field and button. So whatever you write inside the input field when user click on publish button it publish on the another component , in our case another component is lmsComponentX.

lmsComponentA.js

import { LightningElement, wire } from 'lwc';
import SAMPLEMC from "@salesforce/messageChannel/SampleMessageChannel__c";
import {MessageContext , publish} from 'lightning/messageService';

export default class LmsComponentA extends LightningElement {
    inputValue;

    @wire(MessageContext)
    context;

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

    publishMessage(){
        const message = {
            lmsData: {
                value: this.inputValue
            }
        }

        publish(this.context, SAMPLEMC, message);
    }
}

in here we imported messageChannel file which we created , and also imported the lightning messaging service.
we used MessageContext in wire adaptor so it will provided information of all components who are using lightning message service and store it in the context.

lmsComponentA.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>

    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

lmsComponentX.html

<template>
    <lightning-card title="Lwc lmc Component X">
        <div class="slds-m-around_medium">
            <lightning-button variant="brand" label={buttonLabel} onclick={handleUnsubscribe}>
			</lightning-button>
        </div>

        <div class="slds-m-around_medium">
            Message <strong> {recivedMessage} </strong>
        </div>
    </lightning-card>
</template>

lmsComponentX.js

import { LightningElement, wire } from 'lwc';
import SAMPLEMC from "@salesforce/messageChannel/SampleMessageChannel__c";
import {APPLICATION_SCOPE, MessageContext , subscribe, unsubscribe} from 'lightning/messageService';

export default class LmsComponentX extends LightningElement {
    buttonLabel = 'Unsubscribe';
    subscription;
    recivedMessage;
    @wire(MessageContext)
    context;

    connectedCallback(){
        this.handleSubscribe();
    }

    handleSubscribe(){
        this.subscription = subscribe(this.context, SAMPLEMC, (message)=>{this.handleMessage(message)}, 
		{scope:APPLICATION_SCOPE});
    }

    handleMessage(message){
        this.recivedMessage = message.lmsData.value ? message.lmsData.value : 'No Message recevied';
    }

    handleUnsubscribe(){
        if (this.subscription) {
            unsubscribe(this.subscription);
            this.subscription = null;
        } else {
            this.handleSubscribe();
        }
        this.buttonLabel = this.subscription ? 'Unsubscribe' : 'Subscribe';
    }
    
}

subscribe(this.context, SAMPLEMC, (message)=>{this.handleMessage(message)} this is the syntax of the subscribe method in LMS. and this is the method of Unsubscribe unsubscribe(this.subscription)

lmsComponentX.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>

    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

Preview

Lightning Messaging Service is a game-changer for developers working within the Salesforce ecosystem. Its ability to facilitate real-time, decoupled communication between components not only improves application performance but also enhances maintainability and scalability. By leveraging LMS, you can create more dynamic and interactive Salesforce applications that cater to the modern needs of businesses and users.
Happy Coding

Blogs

Lightning Messaging Service (LWC to LWC)