Display Real Time Notifications on Lightning Aura Component using Platform Events

Hi,

Here we are going to learn how can we subscribe to platform event and listen to platform events.

You can go through my YouTube channel "Salesforce Techbook" for practical session on the same.
The following has practical session from "Salesforce Techbook"
https://www.youtube.com/watch?v=i5XSf_uF9XI


We have to include "lightning:empApi " component in Lightning Component and use methods "subscribe" ,"unsubscribe" methods to subscribe to platform events or unsubscribe to platform event.

<lightning:empApi aura:id="empApi"/>

lightning:empApi :

provides access to methods for subscribing to a streaming channel and listening to event messages. All streaming channels are supported, including channels for platform events, PushTopic events, generic events, and Change Data Capture events. The lightning:empApi component uses a shared CometD connection.

Here Account_Creation_Event__e is Platform Event Name

AccountNotifications.cmp

<aura:component implements="force:appHostable" >
<lightning:empApi aura:id="empApi" />
     <aura:handler name="init" value="{!this}" action="{!c.subscribe}"/>
     <aura:attribute name="notifications" type="List"/>
     <aura:attribute name="evntRecieved" type="boolean"/>
    <lightning:card title="Account Notifications">
        <aura:if isTrue="{!v.evntRecieved}"> 
             <p class="slds-p-horizontal_small">
                <ui:message severity="info" closable="true">
                     <aura:iteration items="{!v.notifications}" var="val">
                        <p>{!val}</p>
                    </aura:iteration>
                 </ui:message>
            </p>
        </aura:if>
    </lightning:card>
</aura:component>

AccountNotificationsController.js:
({
subscribe : function(component, event, helper) {
component.set('v.notifications', []);
// Get the empApi component
const empApi = component.find('empApi');
// adding channel
         const channel = '/event/Account_Creation_Event__e';
         // Replay option to get new events
    const replayId = -1;
        // Subscribe to an platform event
        empApi.subscribe(channel, replayId, $A.getCallback(eventReceived => {
        // Process event (this is called each time we receive an event)
console.log('Received event ', JSON.stringify(eventReceived));
//Payload will have attribues(Fields) values from published plat form event
        console.log('Received event ', eventReceived.data.payload.Account_Name__c);
          const notifications = component.get('v.notifications');
          notifications.push(eventReceived.data.payload.Account_Name__c);
          component.set('v.notifications', notifications);
            component.set('v.evntRecieved',true);
    })).then(subscription => {
        // Confirm that we have subscribed to the event channel.
        // We haven't received an event yet.
            console.log('Subscribed to channel ', subscription.channel);
            // Save subscription to unsubscribe later
            //component.set('v.subscription', subscription);
    });
       
}
})


output:

Note: The lightning:empApi component is supported only in desktop browsers with web worker or shared worker support. For more information about web workers and browser support, see the Web Workers W3C specification and Using Web Workers in the Mozilla Developer Network documentation.

References:
https://www.youtube.com/watch?v=i5XSf_uF9XI
https://developer.salesforce.com/docs/atlas.en-us.platform_events.meta/platform_events/platform_events_intro.htm
https://developer.salesforce.com/docs/component-library/bundle/lightning:empApi/documentation
https://trailhead.salesforce.com/en/content/learn/modules/platform_events_basics