Lightning Message Service in LWC

ByPashtek Admin Sales Cloud

Lightning Message Service in LWC with Pashtek– The Lightning Message Service (LMS) allows communication between Visualforce and Lightning Components (Aura and LWC both) on any Lightning page. No need to call any references in the component page.

We can receive the data by subscribing the LMS service. We can create Lightning Message Channel.

Step1: Create a Message Channel by using below code:

LMSChannel.messageChannel-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
   <LightningMessageChannel  
  xmlns="http://soap.sforce.com/2006/04/metadata">
    <description>This is a channel which is used by LWC component to   
            send data</description>
      <isExposed>true</isExposed>
      <lightningMessageFields>
        <description>This is the Id of the record</description>
        <fieldName>recordId</fieldName>
      </lightningMessageFields>
      <lightningMessageFields>
        <description>This is the  of the record</description>
        <fieldName>name</fieldName>
      </lightningMessageFields>
      <masterLabel>AccountData</masterLabel>
   </LightningMessageChannel>

Step2: After creating the message channel, we need to create a source component for sending the data. We gonna use this file in receiver component.

lightningMessagingService.html

 <template>
    <div class="Test">
        <h1 style='font-size:15px'> Sender!</h1>
        <template if:true={chatStarted}>
 
            <h1>Message From Client!</h1>
            <template for:each={recievedMessage} for:item="message">
                <strong key={message}   
  style="display:inline-block;margin-left:4cm">{message}</strong><br   
  key={message}>
 
            </template>
        </template>
 
        <textarea rows="2" cols="33" class="inputbox" value={inputValue2}   
  style='display:inline-block'
            label="Enter message to publish" 
  onkeyup={inputHandler}></textarea><button label="Publish" class="icon"
            onclick={publishMessage}>
            <span>-></span>
        </button><br>
 
    </div>
  </template>

lightningMessagingService.js

 
  import { LightningElement,wire,api,track } from 'lwc';
  import { NavigationMixin } from 'lightning/navigation';
  import SAMPLEMC from "@salesforce/messageChannel/LMSChannel__c"
  import {subscribe, MessageContext, APPLICATION_SCOPE, unsubscribe,   
  publish} from 'lightning/messageService'
  export default class LightningMessagingService extends    
  NavigationMixin(LightningElement) {
    inputValue;
    
   publishMessage(){
             const message={
            lmsData:{
                value:this.inputValue
            }
        }
          publish(this.context, SAMPLEMC, message);
          this.senderMsg.push(this.inputValue);
        this.chatStarted=true;
 
    }
 
  }

LightningMessagingService.css(Optional)

 .Test{
 
    color:rgb(0, 51, 255);
    background-color:white;
    border:1px solid rgb(209, 194, 194);
    border-radius:5px;
   
    box-shadow: inset 0px 0px 5px 1px #DBA632;
    text-align: center;
    padding:50px;
   
    width:9cm;
   
   
  }
 
  .icon{
   
    background-color:rgb(0, 250, 125);
    padding:8px;
    border-radius:50%;
    font-weight: bolder;
    font-size: large;
    color:white;
    border:2px solid yellow;
    display:inline;
   
    margin-left:5cm;
   
  }
  .icon:hover{
 
    background-color:blue;
 
  }
 
  .inputbox{
    margin-top: 4cm;
   display:inline;
  }

LightningMessagingService.js-meta.xml

 <?xml version="1.0" encoding="UTF-8"?>
  <LightningComponentBundle 
     xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
 
    <targets>
 
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
    </targets>
  </LightningComponentBundle>

Step3: To create a receiver component for receiving the data.

lmsReceiver.html

 <template>
     <div class="Test">
        <div>
            <h1 style='font-size:15px'>Message From Sender!</h1>
            <template for:each={recievedMessage} for:item="message">
                <strong key={message}  
    style="display:inline-block;">{message}</strong><br key={message}>
 
            </template>
            <template for:each={senderMsg} for:item="msg">
                <strong key={msg} 
   style="display:inline-block;margin-left:4cm">{msg}</strong><br   
   key={msg}>
 
            </template>
       </div>
    </div>
  </template>

lmsReceiver.js

 import { LightningElement,wire,track  } from 'lwc';
  import SAMPLEMC from "@salesforce/messageChannel/LMSChannel__c"
 
  import {subscribe, MessageContext, APPLICATION_SCOPE,   
          unsubscribe,publish} from 'lightning/messageService';
  export default class LmsReceiver extends LightningElement {
    @track recievedMessage=[];
      
    
    subscription
    
    @wire(MessageContext)
    context
 
    connectedCallback(){
        this.subscribeMessage()
    }
 
    subscribeMessage(){
        console.log('subscribeMessage');
        //I get above Console Log but handleMessage is not executing
        subscribe(this.context, SAMPLEMC,   
                 (message)=>{this.handleMessage(message)},  
                                         {scope:APPLICATION_SCOPE})
    }
 
    handleMessage(message){
        console.log('handleMessage');
        this.recievedMessage.push(message.lmsData.value?  
                message.lmsData.value :'NO Message published');
       
    }

lmsReceiver.css(optional)

.Test{
 
    color:rgb(0, 17, 255);
    background-color:white;
    border:1px solid rgb(209, 194, 194);
    border-radius:5px;
    box-shadow: inset 0px 0px 5px 1px #DBA632;
   
    padding:50px;
   
    width:9cm;
   height: 10cm;
   
  }

lmsReceiver.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
  <LightningComponentBundle   
   xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
 
    <targets>
 
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
    </targets>
   </LightningComponentBundle>

Output: