Communicate Between Unrelated LWC Components- Lightning Message Service (LMS)

contactCheck.html

<template>
    <lightning-card  title="Subscriber Component">
        <div style="background-color:#a3ce98;border-style: solid;margin:5%;padding:2%;">
            <p>This component is using LMS framework to subscribe message</p>
            <div style="background-color:#7ff6f6;border-style: solid;padding:2%;">
                <p>Email-<b>{conEmail}</b></p>
            </div>
            <div style="background-color:#7ff6f6;border-style: solid;padding:2%;">
                <p>Phone-<b>{conPhone}</b></p>
            </div>
            
        </div>
</lightning-card>
    
</template>

contactCheck.js

import { LightningElement,wire,track } from 'lwc';
import { subscribe, MessageContext } from 'lightning/messageService';
import SEND_ENQUIRY_CHANNEL from '@salesforce/messageChannel/Enquiry_Sender__c';
export default class ContactCheck extends LightningElement {
    @track conEmail;
    @track conPhone;
    @wire(MessageContext)
    messageContext;
    subscribeToLMS() {
        this.subscription = subscribe(
        this.messageContext,
        SEND_ENQUIRY_CHANNEL,
        (message) => this.handleMessage(message)
        );
    }
    handleMessage(message) {
        console.log('**message:'+JSON.stringify(message));
        this.conEmail=message.email;
        this.conPhone=message.phone;
    }

    connectedCallback() {
        this.subscribeToLMS();
    }
}

contactCheck.js-meta.xml

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

enquiry_sender.messageChannel-meta.xml

<?xml version="1.0" encoding="UTF-8" ?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
    <masterLabel>EnquirySender</masterLabel>
    <isExposed>true</isExposed>
    <description>Message Channel to pass user email Id</description>
     <lightningMessageFields>
        <fieldName>email</fieldName>
        <description>Specify the email</description>
    </lightningMessageFields>
    <lightningMessageFields>
         <fieldName>phone</fieldName>
        <description>Specify the user email</description>
     </lightningMessageFields>
</LightningMessageChannel>

userEnquiry.html

<template>
    <lightning-card  title="Publisher Component">
        <div style="background-color:#E6E6FA;border-style: solid;margin:5%;padding:2%;">
            <p>This component is using LMS framework to publish message</p>
            <div style="padding:2%;">
                <lightning-input name="uEmail" type="email" label="Enter Email" value={userEmail} 
                    required=true onchange={onChangeHandler} variant="label-inline"></lightning-input>
                <lightning-input name="uPhone" type="tel" label="Enter Phone" value={userPhone} 
                    required=true onchange={onChangeHandler} variant="label-inline"></lightning-input>
                <lightning-button label="Send" onclick={sendUserInputToSubscriber}></lightning-button>
            </div>
        </div>
</lightning-card>
    
</template>

userEnquiry.js

import { LightningElement,wire,track } from 'lwc';
import { publish, MessageContext } from 'lightning/messageService';
import SEND_ENQUIRY_CHANNEL from '@salesforce/messageChannel/Enquiry_Sender__c';
export default class UserEnquiry extends LightningElement {
    @track userEmail;
    @track userPhone;
    @wire(MessageContext)
    messageContext;
    //syntax to publish 
    sendUserInputToSubscriber(){
        const payload = { 
            email: this.userEmail,
            phone: this.userPhone
          };
          console.log('***payload:'+JSON.stringify(payload));
          publish(this.messageContext, SEND_ENQUIRY_CHANNEL, payload);
    }
    onChangeHandler(event){
        const inputValue = event.target.value;
        const inputTarget = event.target.name;
        console.log('****onChangeHandler called**inputTarget-inputValue:'+inputTarget+'-'+inputValue);
        if(inputTarget=='uEmail'){
            this.userEmail= inputValue;
        }if(inputTarget=='uPhone'){
            this.userPhone= inputValue;
        }
        
    }
}

userEnquiry.js-meta.xml

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