Platform Events in Lightning Component | Details : https://www.mhamzas.com/blog/2020/04/21/platform-events-in-lightning-component/

Platform_Events.cmp

<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>

Platform_Events.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();
  }
})

Platform_Events.js

({
  
  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') + '.');
  }
})