Handling Platform Events in Lightning Components

SK_PlatformEventHandlerCmp.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <!--The empApi component Exposes the EmpJs Streaming API library which provides methods to subscribe and unsubscribe to a platform event channel using CometD(available in API version 44.0 or above)-->
    <lightning:empApi aura:id="empApi"/>
    <!-- Attribute to store platform event channel name -->
    <aura:attribute name="channel" type="String" default="/event/Demo_Event__e"/>
    <!--Displays messages via notices and toasts. This component requires API version 41.0 and later.-->
    <lightning:notificationsLibrary aura:id="notifLib"/>
    <!--Attribute to store object that is returned by the empApi.subscribe() method-->
    <aura:attribute name="subscription" type="Map"/>
    <!--attribute to show/ hide platform event message-->
    <aura:attribute name="ltngShowEventMessage" type="boolean" default="false"/>
    <aura:attribute name="ltngEventMessage" type="String" default=""/>
    <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
    
    
    <!-- Display Messages recieved from Platform events -->
    <aura:if isTrue="{!v.ltngShowEventMessage}">
        <div style="background-color:#E6E6FA;border-style: solid;margin:5%;padding:2%;">
            Platform Event Recieved-  {!v.ltngEventMessage}
        </div>
    </aura:if>
    <aura:if isTrue="{!not(v.ltngShowEventMessage)}">
        <div style="background-color:#E6E6FA;border-style: solid;margin:5%;padding:2%;">
            Waiting for Platform Event message
        </div>
    </aura:if>
</aura:component>

SK_PlatformEventHandlerCmpController.js

({
    onInit : function(component, event, helper) {
        var empApi = component.find("empApi");
        var channel=component.get("v.channel");
        var replayId=-1; // subscribe to next event published
        console.log('***channel:'+channel);
        //whenever event is recieved, below callback function will be called
        var callback = function (message) {
            console.log('Event Received : ' + JSON.stringify(message));
            var eventFireTime =$A.localizationService.formatDateTime(message.data.payload.CreatedDate, 'MMM DD YYYY, hh:mm:ss a');
            var eventMessage = message.data.payload.Event_Info__c;
            var eventMessageForUI = 'Platform event fired at '+ eventFireTime + '. Event Info is-'+eventMessage;
            console.log('*******eventMessageForUI:'+eventMessageForUI);
            component.set("v.ltngEventMessage",eventMessageForUI);
            component.set("v.ltngShowEventMessage","true");
        };
        var errorHandler = function (message) {
            console.error('Received error ', JSON.stringify(message));
        };
        // Register empApi error listener and pass in the error handler function.
        empApi.onError(errorHandler);
        // Subscribe to the channel,specify the callback function and save the returned subscription object.
        console.log('*****now subscribing to channel');
        empApi.subscribe(channel, replayId, callback).then(function(newSubscription){
            console.log('Subscribed to channel12 ' + channel);
            component.set('v.subscription', newSubscription);
            console.log('newSubscription ' + JSON.stringify(newSubscription));
        });
    }
})