Platform Events in Lightning Component

Platform Events are used to deliver secure, scalable, and customizable notification within Salesforce or external app. Platform Event is based on Event-Driven Architecture. This is built in real time integration patterns in the Salesforce Platform which helps to reduce point-to-point integration.

When to use platform events?

1. Platform events are very useful when you want to communicate Salesforce with any external system.
2. Platform events are also used to communicate between two lightning applications.
3. Platform events are very useful when you want to communicate between two visualforce pages.

Subscription in Platform Event: 

1. Apex triggers receive event notifications.
2. write an “after insert” Apex trigger on the event object to subscribe to incoming events.
3. Triggers receive event notifications from various sources—whether they’re published through Apex or APIs.
4. Visualforce and Lightning component apps receive events through CometD.
5. CometD is a scalable HTTP-based event routing bus that uses an AJAX push technology pattern known as Comet.
6. In an external app, you subscribe to events using CometD as well.

Creating Platform event object

Setup —-> Platform Event —-> New

Create Notification__e Platform event

Create a Lightning Component to display toast based on Platform event Creation

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
  <aura:attribute name="notifications" type="List"/>
  <aura:attribute name="isMuted" type="Boolean" default="false"/>
  <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
  <aura:registerEvent name="toastEvent" type="force:showToast"/>
  <div class="container">
    <!-- Header -->
    <div class="slds-p-around_x-small slds-border_bottom slds-theme_shade">
      <div class="slds-grid slds-grid_align-spread slds-grid_vertical-align-center">
        <div>
          <span class="slds-badge">{!v.notifications.length}</span>
        </div>
        <div>
          <lightning:buttonIcon onclick="{!c.onClear}" iconName="utility:delete" title="Clear notifications"
            alternativeText="Clear notifications" variant="border-filled"/>
          <lightning:buttonIcon onclick="{!c.onToggleMute}"
            iconName="{!v.isMuted ? 'utility:volume_off' : 'utility:volume_high'}"
            title="{!v.isMuted ? 'Unmute notifications' : 'Mute notifications'}"
            alternativeText="Toggle mute" variant="border-filled"/>
        </div>
      </div>
    </div>
    <!-- Notification list -->
    <div class="slds-container_fluid slds-scrollable_y content">
      <aura:iteration items="{!v.notifications}" var="notification">
        <div class="slds-p-around_small slds-border_top">
          <div class="slds-grid slds-grid_align-spread slds-has-flexi-truncate">
            <p>{!notification.message}</p>
            <p class="slds-text-color_weak slds-p-left_x-small">{!notification.time}</p>
          </div>
        </div>
      </aura:iteration>
    </div>
  </div>
      <lightning:empApi aura:id="empApi"/>
  <aura:attribute name="channel" type="String" default="/event/Notification__e"/>
  <aura:attribute name="subscription" type="Map"/>

</aura:component>

Controller

({
  
  onInit: function (component, event, helper) {
    component.set('v.subscription', null);
    component.set('v.notifications', []);
    
    const empApi = component.find('empApi');
        const errorHandler = function (message) {
      console.error('Received error ', JSON.stringify(message));
    };
    
    empApi.onError($A.getCallback(errorHandler));
    helper.subscribe(component, event, helper);
   // helper.displayToast(component, 'success', 'Ready to receive notifications.');
  },
  
  onClear: function (component, event, helper) {
    component.set('v.notifications', []);
  },
  
  onToggleMute: function (component, event, helper) {
    const isMuted = !(component.get('v.isMuted'));
    component.set('v.isMuted', isMuted);
    if (isMuted) {
      helper.unsubscribe(component, event, helper);
    } else {
      helper.subscribe(component, event, helper);
    }
    helper.displayToast(component, 'success', 'Notifications ' +
      ((isMuted) ? 'muted' : 'unmuted') + '.');
  }
})

Helper

({
  
  subscribe: function (component, event, helper) {
   
    const empApi = component.find('empApi');
    
    const channel = component.get('v.channel');
    
    const replayId = -1;
    const callback = function (message) {
      console.log('Event Received : ' + JSON.stringify(message));
      helper.onReceiveNotification(component, message);
    };
    empApi.subscribe(channel, replayId, $A.getCallback(callback)).then($A.getCallback(function (newSubscription) {
      console.log('Subscribed to channel ' + channel);
      component.set('v.subscription', newSubscription);
    }));
  },
  
  unsubscribe: function (component, event, helper) {
    
    const empApi = component.find('empApi');
    
    const channel = component.get('v.subscription').channel;
    
    const callback = function (message) {
      console.log('Unsubscribed from channel ' + message.channel);
    };
        
    empApi.unsubscribe(component.get('v.subscription'), $A.getCallback(callback));
  },
  
  onReceiveNotification: function (component, message) {
    
    const newNotification = {
      time: $A.localizationService.formatDateTime(
        message.data.payload.CreatedDate, 'HH:mm'),
      message: message.data.payload.Message__c
    };
    
    const notifications = component.get('v.notifications');
    notifications.push(newNotification);
    component.set('v.notifications', notifications);
   
    this.displayToast(component, 'ERROR', newNotification.message);
  },
  
  displayToast: function (component, type, message) {
    const toastEvent = $A.get('e.force:showToast');
    toastEvent.setParams({
      type: type,
      message: message
    });
    toastEvent.fire();
  }
})

The lightning:empApi component 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.

To call the component’s methods, add the lightning:empApi component inside your custom component and assign an aura:id attribute to it.

Add this lightning component in lightning app utiliy bar

Once Platform event record get Created, A toast message is displayed