Communication Between Unrelated Components Using Publisher -Subscriber pattern(LWC)

To communicate between components which are not within same DOM tree, we use a library that follows the publish-subscribe pattern in lightning web component.
Visit knowledgepredator.com for more posts on Salesforce.

[@bomanbomre1461]

you have explained this communication using pub-sub in very easy to understand way. thank you again

[@bilalbilalbilal7]

/**
* A basic pub-sub mechanism for sibling component communication
*
* TODO - adopt standard flexipage sibling communication mechanism when it's available.
*/
const events = {};
/**
* Confirm that two page references have the same attributes
* @param {object} pageRef1 - The first page reference
* @param {object} pageRef2 - The second page reference
*/
const samePageRef = (pageRef1, pageRef2) => {
const obj1 = pageRef1.attributes;
const obj2 = pageRef2.attributes;
return Object.keys(obj1)
.concat(Object.keys(obj2))
.every((key) => {
return obj1[key] === obj2[key];
});
};
/**
* 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) => {
// Checking that the listener has a pageRef property. We rely on that property for filtering purpose in fireEvent()
if (!thisArg.pageRef) {
throw new Error(
'pubsub listeners need a "@wire(CurrentPageReference) pageRef" property'
);
}
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 = (pageRef, eventName, payload) => {
if (events[eventName]) {
const listeners = events[eventName];
listeners.forEach((listener) => {
if (samePageRef(pageRef, listener.thisArg.pageRef)) {
try {
listener.callback.call(listener.thisArg, payload);
} catch (error) {
// fail silently
}
}
});
}
};
export {
registerListener,
unregisterListener,
unregisterAllListeners,
fireEvent
};

[@gopikachoudha9301]

I have learned so much from these videos. Keep uploading. These are very helpful.

[@AkhilKumar]

This is simply the best video on salesforce pubsub topic. Thank you so much for you time bro ;)

[@SALESFORCEPREDATOR]

Thanks @Akhil. I am glad you liked it :)

[@sachinpradhan7519]

Thanks bro for this video, this video gave me the clarity about pub sub mechanism, keep adding such videos.

[@dhanushgunda5732]

Thanks for the video buddy.. The viewers would increase in coming months..

[@SALESFORCEPREDATOR]

@Dhanush Thank you :)

[@12veer]

This is a great explanation.

[@mahendranadig9376]

Thanks for sharing this knowledge.

[@AjaySharma-cf5yf]

thank you for in depth explanation.

[@SALESFORCEPREDATOR]

Thank you :)

[@sangeeraj6307]

Excellent and really useful

[@SALESFORCEPREDATOR]

Thank you

[@manishshaw2393]

Nice explanation thanks for yr time and effort

[@SALESFORCEPREDATOR]

thank you :)

[@sakshisaini8186]

Two sub component can subscribe to one pub comp ?. or it can only one sub component and one pub component always?

[@dikshasinghal2468]

Suppose I need to connect another lwc component abc to sub component how will i connect that component and get data of that component in sub component

[@rajmalotra1]

where i will get the content of PubSub file, all the 4 mtds

[@tushikagupta7190]

after fireevent, my code is not getting inside calevent(event). I have been struggling a lot. any idea what could be the reason?

[@nehajamdade2983]

Can you tell me how to decide which communication to use between components

[@SALESFORCEPREDATOR]

When you want to communicate from child component to parent, use custom events.
To communicate from child to parent, you can either use Lightning message service(LMS) or
You can also call child components method if it is annoted with @api decorator.

[@muskanhuria4716]

Hi can I get this ppt?
or this code some where in github?

[@SALESFORCEPREDATOR]

@Muskan
I will add it on website and share the link soon.

[@PodcastOnlyForYou]

can you plss provide code

[@nagarajsunda]

very unclear