In Winter 20 , Salesforce introduced Lightning Message Service which enables communication between Visualforce and Lightning Component(Aura & LWC) on any lightning page
Lightning Message Service API allows you to publish a message through out the lightning page and subscribe the same message anywhere in that lightning page
For Lightning Web Components Use @salesforce/messageChannel , For Aura Components Use lightning:messageChannel, For Visualforce page , Use global variable $MessageChannel
LMS Implementation
Lets take an example where we created a message channel called lightningMessageChannel__c using METADATA API , Lets see how this message channel published in LWC and subscribed by Visualforce page
Create a Lightning Web Component that publishes on message channel we created , This Component Uses @salesforce/messageChannel, we need to import from @salesforce/messageChannel/lightningMessageChannel__c
import { LightningElement } from 'lwc';
import { publish,createMessageContext,releaseMessageContext } from 'lightning/messageService';
import SAMPLEMC from "@salesforce/messageChannel/lightningMessageChannel__c";
export default class MyLwcPublisher extends LightningElement {
context = createMessageContext();
constructor() {
super();
}
handleClick() {
const message = {
recordId: "sample Id ",
recordData: {
value: "Information"
}
};
// Publishing Lightning Message Service
publish(this.context, SAMPLEMC, message);
}
disconnectedCallback() {
releaseMessageContext(this.context);
}
}
<template>
<lightning-card title="MyLwcPublisher" icon-name="custom:custom14">
<div class="slds-m-around_medium">
<p>MessageChannel: lightningMessageChannel</p>
<br>
<lightning-button label="Publish" onclick={handleClick}></lightning-button>
</div>
</lightning-card>
</template>
VISUALFORCE PAGE
We can subscribe or unsubscribe messaging channel on which LWC publishes
<apex:page>
<div>
<p>Subscribe to lightningMessageChannel__c</p>
<button onclick="subscribeMC()">Subscribe</button>
<p>Unsubscribe from lightningMessageChannel__c</p>
<button onclick="unsubscribeMC()">Unsubscribe</button>
<br/>
<br/>
<p>Received message:</p>
<textarea id="MCMessageTextArea" rows="10" style="disabled:true;resize:none;width:100%;"/>
</div>
<script>
// Load the MessageChannel token in a variable
var SAMPLEMC = "{!$MessageChannel.lightningMessageChannel__c__c}";
var subscriptionToMC;
// Display message in the textarea field
function onMCPublished(message) {
var textArea = document.querySelector("#MCMessageTextArea");
textArea.innerHTML = message ? JSON.stringify(message, null, '\t') : 'no message payload';
}
function subscribeMC() {
if (!subscriptionToMC) {
subscriptionToMC = sforce.one.subscribe(SAMPLEMC, onMCPublished);
}
}
function unsubscribeMC() {
if (subscriptionToMC) {
sforce.one.unsubscribe(subscriptionToMC);
subscriptionToMC = null;
}
}
</script>
</apex:page>