How Pub-Sub works in Lightning Web Component?

Dear #Trailblazers,

Welcome back 🙂 to new blog post. In this blog post we are going to talk about Publish Subscribe model in Lightning Web component. Before We start let’s learn about what Pub ( Publish ) – Sub ( Subscribe ) model is.

Pub-Sub Model

Is used to transfer the information between the component which are not in the same DOM hierarchy what does this meant that the components are not connected/related with each other using parent-child relationship.

Below is the simple diagram to illustrate the Pub-Sub.

In the above image, one component is acting as the publisher component and there are three different components acting as subscriber components. Between the Publisher & Subscribers component, there is a change and this channel is known as the Pub-Sub model.

Key Points to Remember

• Pub-Sub is nothing it is a JavaScript file containing multiple methods
• Pub-Sub is like an Application event in Aura Component

Now, Let’s start with the implementation part

Use Case

We are going to take a very simple example, There are two components and both components do not have any relation. As a Developer, we need to make them talk & transfer the data from one component to another component.

P.S. You can have as many components as per business requirements.

Step1 – Create a PubSub Lightning Component and use the below JS code for the same.

Step2 – Create a Publisher Component named “pubsubPublisher” and use the below code for both JS and HTML file

Code Explanation

import pubsub from ‘c/pubsub’; in this line, we are importing the pubsub component into our publisher component

pubsub.fire(‘simplevt‘, message ); This line executes the event names simplevt so any component which has subscribed simplevt event will be able to get the message.

Step3 – Create a Subscriber Component named “pubsubSubscriber” and use code from the below gist file for all three ( template, JS & XML file )

Code Explanation

#1 import pubsub from “c/pubsub”; We are importing the pubsub file so that we can access all the methods that we created in pubsub file and export those functions.

#2 As this is a Subscriber Component, so we are registering the event

pubsub.register(“simplevt”, this.handleEvent.bind(this));

#3 This subscriber component must have a JS function that will execute when the component receives an event that we have created below method

handleEvent(messageFromEvt) {
    window.console.log("event handled ", messageFromEvt);
    this.message = messageFromEvt
      ? JSON.stringify(messageFromEvt, null, "\t")
      : "no message payload";
  }

Step4 – Test the Publish-Subscribe Component

As we have developed the required Component, we can add both the component either inside any Record Page, Home Page or App Page and do the Testing.

Check out the YouTube video with the explanation of each and every single detail.

https://youtu.be/rH5KiFfvFog

Keep Learning. Sharing is Caring 🙂 #KeepBlazing #LearnShareRepeat #AskPanther #SfdcPanther

Please do provide your valuable feedback to use. You can fill in the feedback Here.

Resource:-

• Bind method in JS