PubSub event in Lightning Web Component
Description : Event is used when we have to send some data from one component/LWC to the other.
When the relationship between two components is Parent-Child, we can send data directly using regular events, discussed in the post. But when we have the Sibling-relationships, i.e. the two components are not linked with each-other but one of them needs inputs from the other for some operations, we need the Pub-Sub (Publisher-Subscriber) event-model.
For pub-sub model to be executed, make sure both the components are on the same DOM.
--------------- pubSub.js (a stand-alone LWC) ---------------
/**
* A basic pub-sub mechanism for sibling component communication
*
* TODO - adopt standard flexipage sibling communication mechanism
when it's available.
*
* Temporarily removing all the pageRef checking in pubsub - not
supported in communities
* https://salesforce.stackexchange.com/questions/252021/
lightning-web-component-use-publish-subscribe-event-in-community-cloud
* https://gist.github.com/kmesic/262887799fb70be94707cb0b87936e7b
*/
const events = {};
/**
* Registers a callback for an event
* @param {string} eventName - Name of the event to listen for.
* @param {function} callback - Function to invoke when said event is fired.
* @param {object} thisArg - The value to be passed as the this parameter to the
callback function is bound.
*/
const registerListener = (eventName, callback, thisArg) => {
if (!events[eventName]) {
events[eventName] = [];
}
const duplicate = events[eventName].find(listener => {
return listener.callback === callback &&
listener.thisArg === thisArg;
});
if (!duplicate) {
events[eventName].push({ callback, thisArg });
}
};
/**
* Unregisters a callback for an event
* @param {string} eventName - Name of the event to unregister from.
* @param {function} callback - Function to unregister.
* @param {object} thisArg - The value to be passed as the this parameter
to the callback function is bound.
*/
const unregisterListener = (eventName, callback, thisArg) => {
if (events[eventName]) {
events[eventName] = events[eventName].filter(
listener =>
listener.callback !== callback || listener.thisArg !== thisArg
);
}
};
/**
* Unregisters all event listeners bound to an object.
* @param {object} thisArg - All the callbacks bound to this object will
be removed.
*/
const unregisterAllListeners = thisArg => {
Object.keys(events).forEach(eventName => {
events[eventName] = events[eventName].filter(
listener => listener.thisArg !== thisArg
);
});
};
/**
* Fires an event to listeners.
* @param {object} pageRef - Reference of the page that represents the
event scope.
* @param {string} eventName - Name of the event to fire.
* @param {*} payload - Payload of the event to fire.
*/
const fireEvent = (eventName, payload) => {
if (events[eventName]) {
const listeners = events[eventName];
listeners.forEach(listener => {
try {
listener.callback.call(listener.thisArg, payload);
} catch (error) {
// fail silently
}
});
}
};
const utility = {
navigateToPage: (pageName, urlParams = "") => {
window.open(`/er/s/${pageName}?${urlParams}`, '_self');
}
};
var sharedDataForLeads = {};
export {
registerListener,
unregisterListener,
unregisterAllListeners,
fireEvent,
utility,
sharedDataForLeads
};
--------------- Sibling 1 (firing the Event) ---------------
.html -->>
<!--firing the event at some onclick/onchange event : -->
<template>
<lightning-card>
<lightning-input value={datVal} onchange={setInputVal}
label="The msg\">
</lightning-input>
</lightning-card>
</template>
.js -->>
import { LightningElement } from 'lwc';
import { fireEvent } from 'c/pubSub';
export default class PubsubFireCmp extends LightningElement {
datVal = '';
setInputVal(event){
this.datVal = event.detail.value;
fireEvent('msg', this.datVal);
//msg -> an arbitary event name
console.log(" ->> event fired ");
}
}
--------------- Sibling 2 (subscribing the Event) ---------------
.html -->>
<template>
<lightning-card>
The message is : {myMsg}
</lightning-card>
</template>
.js -->>
import { LightningElement, wire } from 'lwc';
import { CurrentPageReference, NavigationMixin } from
'lightning/navigation';
import { registerListener } from 'c/pubSub';
export default class PubsubHandleCmp extends
NavigationMixin(LightningElement) {
@wire(CurrentPageReference) pageRef;
connectedCallback() //the subscriber method to be added
inside connectedCallback method
{
registerListener('msg',this.getVal,this);
//'msg' is the same event name being fired
//getval is the method using the event data for business operations
}
myMsg = '';
getVal(val) //val is the data sent during the event
component
{
this.myMsg= val;
console.log('message '+this.myMsg);
}
}
