Platform Event in Lightning Web Components

Platform events enable us to deliver secure, scalable, and customizable event notifications within Salesforce or from external sources. So today we will check how we can use Platform Event in Lightning Web Components. Many time we run Asynchronous process but we don’t have direct way to notify users. We can solve this issue by using Platform Event, as they allow us to get Notification and we can display it on UI to users.
We can follow same flow to use Push Notification and Steaming API to display notification to users. Below is the list of all supported Salesforce event and difference between them.

So in our scenario we are sending a company wide notification to team once we close an opportunity successfully.
Firstly we will create Platform Event. For demo purpose we will create only one field: User Message.

Secondly we will create an Process Builder which will fire the Platform Event.

Finally we are ready to create our Lightning Web Component (LWC).

lwc_PlatFormEvent.html

<template>
    <lightning-card title="Opportunity Notification" icon-name="custom:custom14">
    </lightning-card>
</template>

lwc_PlatFormEvent.js

import { LightningElement, api } from 'lwc';
import { subscribe, unsubscribe, onError, setDebugFlag, isEmpEnabled }  from 'lightning/empApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class Lwc_PlatformEvent extends LightningElement {
    
    subscription = {};
    @api channelName = '/event/User_Message__e';


    // Initializes the component
    connectedCallback() {       
        // Register error listener     
        this.registerErrorListener();
        this.handleSubscribe();
    }

    // Handles subscribe button click
    handleSubscribe() {
        // Callback invoked whenever a new event message is received
        const thisReference = this;
        const messageCallback = function(response) {
            console.log('New message received 1: ', JSON.stringify(response));
            console.log('New message received 2: ', response);
            
            var obj = JSON.parse(JSON.stringify(response));
            console.log('New message received 4: ', obj.data.payload.Message__c);
            console.log('New message received 5: ', this.channelName);
            const evt = new ShowToastEvent({
                title: 'Congrats!!',
                message: obj.data.payload.Message__c,
                variant: 'success',
            });

            thisReference.dispatchEvent(evt);
            // Response contains the payload of the new message received
        };

        // Invoke subscribe method of empApi. Pass reference to messageCallback
        subscribe(this.channelName, -1, messageCallback).then(response => {
            // Response contains the subscription information on subscribe call
            console.log('Subscription request sent to: ', JSON.stringify(response.channel));
            this.subscription = response;
        });
    }

    /* In case you want to unsubscribe use this
    // Handles unsubscribe button click
    handleUnsubscribe() {

        // Invoke unsubscribe method of empApi
        unsubscribe(this.subscription, response => {
            console.log('unsubscribe() response: ', JSON.stringify(response));
            // Response is true for successful unsubscribe
        });
    }
    */
   
    registerErrorListener() {
        // Invoke onError empApi method
        onError(error => {
            console.log('Received error from server: ', JSON.stringify(error));
            // Error contains the server-side error
        });
    }
}

lwc_PlatFormEvent.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage, lightning__AppPage, lightning__HomePage">
            <property name="channelName" type="String" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Firstly we need to import empApi component to use Platform Event in Lightning Web Components (LWC). Then we need to pass channel name. We can use the same component to use the Push topic channel name.
Finally, once the component loads we call the handleSubscribe() method to subscribe the channel. Then in the callback method we get the response. We got the response in JSON form. So we parse the JSON response and display the message as Toast notifcation.
This is how our final UI will look like:

So we are displaying global notification and giving everyone moment of celebration. We can enhance the message with record link or other parameters as well.

If we get error dispatchEvent is not defined, it may be related to "this". As "this" should refer to class but in callback this refer to local element. So we have to store "this" reference and used that to shoe notification.

Check here how we can create Toast notification in Lightning Web Components.

So did you like the post or do you have any questions, Let me know in comments. Happy Programming 🙂