Understanding PubSub Module

To communicate across the DOM in LWC

4 min readJan 25, 2021

Introduction

You can use a JS module (pubsub) that follows the publish-subscribe pattern to communicate between components that aren’t in the same DOM tree. In the publish-subscribe pattern, an event publishes the event and other components subscribe to it.

The pubsub module restricts events to a single page.

In this article, we’ll try to understand the pubsub module and how to create a very simple and basic LWC application using this module for a better understanding.

PubSub Module

PubSub module is nothing, just a JavaScript file that contains different methods that are exported so that the other components can make use of it.
It is not provided to you by default, so you have to add it by yourself. It can be simply created by creating a new lightning web component with only JavaScript and meta.xml file.
Let’s take a look over the pubsub.js file. You can also get it from here.

pubsub.js

The publish-subscribe pattern makes use of four functions :

registerListener() :
This method is used to subscribe to the event and store the information related to it in the events property. It takes three parameters. The first one is the eventName which it has to subscribe to. The second one is the callback, one which has to be run when the event has listened. And third is the this argument. This method makes an entry to the events property if it is not a duplicate entry, which holds the information of pageRef and callback for the eventName.
unregisterListener() :
This method takes three parameters as input, same as the registerListener(). Here it searches for the listeners with the same information as provided in the arguments and removes it.
unregisterAllListeners() :
This method removes all the listeners, available for the given pageRef as an argument.
fireEvent() :
This method takes three arguments. The first one is pageRef of the page on which component lies. The second is the eventName as a string that will be used by the subscriber component. And the third one is the payload or the data which have to be passed with the event.
It checks first if there is any listener registered in the events property.
If yes then it traverses every listener in the events property and the callback method of the listeners with the same pageRef is called. The payload is passed as an argument to that callback method. To check if pageRef of the fired event and the listener are the same, it uses the samePageRef(pageRef1, pageRef2) to compare page references of both.

You have to import these methods in the LWC component in order to use them.

import pubsub from ‘c/pubSub’;
OR
import {fireEvent(), registerListener(), unregisterListener(), unregisterAllListeners()} from 'c/pubSub'

Example :

Scenario->

Let’s say that there are two independent components named as publisher and subscriber. The publisher has an input field where we pass the message and a publish button to fire the event. When the publisher publishes the message subscriber component displays that message.
To establish the communication between both the components we’ll use the JavaScript module called pubSub.

Implementation->

Create a PubSub Lightning Component and use the above JS code for the same.
Now create a new lightning component named ‘publisher’ and use the following code for its HTML, Js, and meta.xml file.

publisher.html

publisher.js

publisher.js-meta.xml

Explanation ->
line 2: imported CurrentPageReference from navigation.
line 3: imported our pubsub module to use its function.
line 7: used @wire property to get the output of CurrentPageReference in pageRef.
line 16: fires the event sendmessage, and any other component subscribed to it can access the payload and can call its callback method.

Now we’ll create another component ‘subscriber’, which will receive the message from the event. Use the following code for its HTML, Js and meta.xml file.

subscriber.html

subscriber.js

subscriber.js-meta.xml

Explanation ->
line 2: imported our pubsub module to use its function.
line 3: imported CurrentPageReference from the navigation.
line 7: used @wire property to get the output of CurrentPageReference in pageRef.
line 11: in connectedCallback() subscribes to the event sendmessage by mentioning its callback method.
line 17: in disconnectedCallback() unregisters to all the events the component was subscribed to.
line 20: handleIncomingMessage() is the callback method that must be described by a subscriber component. This method is called whenever the components listen to the fired event.