DEV Community

Sabir Sheikh
Sabir Sheikh

Posted on • Edited on

🔄 Real-Time Text Sharing Between LWC Components Using Lightning Message Service (LMS)

#salesforce #lwc #parentchildcomponents #webdev

In modern Lightning Web Component (LWC) development, you often deal with components that live on the same page but don't have a direct parent-child relationship. So how do they talk to each other?

That’s where Lightning Message Service (LMS) comes in.

In this blog post, we’ll walk through a practical example of using LMS to create a seamless communication channel between two separate components: a parent that sends messages, and a child that receives messages.

✅ What You'll Build

  • A message channel to carry messages.
  • A Parent component that publishes text input.
  • A Child component that subscribes and displays the input in real-time.

🛠 Step 1: Create the Message Channel
Create this file at:
📁force-app/main/default/messageChannels/TextMessageChannel.messageChannel-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
    <masterLabel>TextMessageChannel</masterLabel>
    <isExposed>true</isExposed>
    <description>Message channel for sharing text between components</description>
    <lightningMessageFields>
        <fieldName>text</fieldName>
    </lightningMessageFields>
</LightningMessageChannel>
Enter fullscreen mode Exit fullscreen mode

🔹 Ensure the file name is TextMessageChannel.messageChannel-meta.xml, and masterLabelmatches it exactly.

👨‍💻 Step 2: Parent Component (Publisher)

The ParentWirecomponent allows the user to input text and publishes it via the message channel.

📄parentWire.html

<template> 
    <lightning-card title="Parent Component">
        <lightning-input 
            label="Enter Text" 
            value={textInput} 
            onchange={handleChange}>
        </lightning-input>
    </lightning-card>
</template>
Enter fullscreen mode Exit fullscreen mode

📦 parentWire.js

import { LightningElement, wire } from 'lwc';
import { publish, MessageContext } from 'lightning/messageService';
import TEXT_MESSAGE_CHANNEL from '@salesforce/messageChannel/TextMessageChannel__c';

export default class ParentWire extends LightningElement {
    textInput = '';

    @wire(MessageContext)
    messageContext;

    handleChange(event) {
        this.textInput = event.target.value;

        publish(this.messageContext, TEXT_MESSAGE_CHANNEL, {
            text: this.textInput
        });
    }
}
Enter fullscreen mode Exit fullscreen mode

🧾 parentWire.js-meta.xml

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

👶 Step 3: Child Component (Subscriber)

The ChildWirecomponent listens for changes published through the message channel and displays the message.

📄 childWire.html

<template>
    <lightning-card title="Child Component">
        <p class="slds-p-around_medium">
            Message from ParentWire: <strong>{receivedText}</strong>
        </p>
    </lightning-card>
</template>
Enter fullscreen mode Exit fullscreen mode

📦 childWire.js

import { LightningElement, wire } from 'lwc';
import { subscribe, MessageContext } from 'lightning/messageService';
import TEXT_MESSAGE_CHANNEL from '@salesforce/messageChannel/TextMessageChannel__c';

export default class ChildWire extends LightningElement {
    receivedText = '';

    @wire(MessageContext)
    messageContext;

    connectedCallback() {
        subscribe(this.messageContext, TEXT_MESSAGE_CHANNEL, (message) => {
            this.receivedText = message.text;
        });
    }
}
Enter fullscreen mode Exit fullscreen mode

🧾 childWire.js-meta.xml

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

💡 How It Works

  • User types a message into the input field in ParentWire.
  • The component publishes the message using LMS.
  • The ChildWirecomponent has already subscribed to this message channel.
  • The new message is received and rendered instantly.

✅ This setup is especially useful when your components are placed independently on a Lightning Page or Home Page and need to stay in sync.

⚙ Use Cases for Lightning Message Service

  • Real-time sync between unrelated components.
  • Communication between Visualforce and LWC.
  • App-wide broadcast messaging.

📌 Final Words
Lightning Message Service is a must-have tool when building scalable and modular applications in Salesforce. It simplifies inter-component communication without messy workarounds like custom events or global state.

🔁 With LMS, your components can stay loosely coupled yet highly interactive.

Top comments (0)