Lightning Web Component

Lightning Message Service in LWC

To establish communication between two sibling components that are not in a Parent-Child relationship, you need to use Lightning Message Service.

This feature enables you to create a communication channel between Lightning Web Components, allowing them to exchange messages with each other.

Using Lightning Message Service, you can send and receive messages between components, regardless of their location in the component hierarchy.

LMS in LWC Example

Lightning Message Service LWC Example

Let's create a simple Lightning Message Service example to demonstrate how two sibling Lightning Web Components can communicate with each other by sharing a message. In this example, we'll create a button in one component that, when clicked, sends a message to another component to update a counter.

1. Create a Message Channel

First, you need to create a Lightning Message Service Channel. Message channels act as a bridge between components. In your project folder, go to force-app > main > default and create a new folder called messageChannels. Then, inside that folder, create a new file: CounterChannel.messageChannel-meta.xml

Visual studio code new folder for Lightning Message Service (LMS)

Here is the code for the CounterChannel:

file_type_xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
    <description>This is a Lightning Message Service Channel to increment a counter.</description>
    <isExposed>true</isExposed>
    <lightningMessageFields>
        <description>The counter of the LMS</description>
        <fieldName>counter</fieldName>
    </lightningMessageFields>
    <masterLabel>CounterChannel</masterLabel>
</LightningMessageChannel>

2. Create the Publisher Component

Let's create a component that publishes a message when clicking a button. The component increments a count every time the button is clicked.

<template>
    <main>
        <h1>Publisher Component</h1>
        <lightning-button label="Increment Counter" onclick={handleFireEvent}></lightning-button>
    </main>
</template>
import { LightningElement, wire } from 'lwc';
import CounterChannel from '@salesforce/messageChannel/CounterChannel__c';
import {publish, MessageContext} from 'lightning/messageService'
 
export default class PublisherComponent extends LightningElement {
    @wire(MessageContext)
    messageContext;
    currentCounter = 0;
 
    handleFireEvent() {
        this.currentCounter++;
        let counter = { counter: this.currentCounter };
        publish(this.messageContext, CounterChannel, counter);
    }
}

3. Create the Subscriber Component

Now, let's create the second component that will receive the message and update a counter when the message is received.

<template>
    <main>
        <h1>Subscriber Component</h1>
        {counter}
    </main>
</template>
import { LightningElement, wire } from 'lwc';
import CounterChannel from '@salesforce/messageChannel/CounterChannel__c';
import { subscribe, MessageContext } from 'lightning/messageService';
 
export default class SubscriberComponent extends LightningElement {
    @wire(MessageContext)
    messageContext;
    counter = 0;
    subscription = null;
 
    // SUBSCRIBE TO THE EVENT WHEN THE COMPONENT IT'S ON THE DOM
    connectedCallback() {
        if (this.subscription) return;
        
        this.subscription = subscribe(this.messageContext, CounterChannel, (message) => {
            this.counter = message.counter;
        });
    }   
}
Publisher and Subscriber Lightning web components using LMS in Salesforce

Here are some key details about Lightning Message Service in LWC: