📢 Attention Salesforce Certified Trailblazers! Maintain your credentials and link your Trailhead and Webassessor accounts by December 6th. Learn more.
close
Start tracking your progress
Trailhead Home
Trailhead Home

Subscribe to a Platform Event

What You’ll Do

In this step, you extend the Lightning console app and add the lightning:empApi Lightning component to subscribe to a platform event. This enables the app to receive instant notifications. Then you can test the application with a Heroku app.

You will:

  • Add the lightning:empApi Lightning component.

  • Update the instant notification app to make it dynamic.

  • Test the Lightning console app with a provided Heroku app.

Update the Component Markup

  1. In the Developer Console, click File > Open Lightning Resources.

  2. Expand the c:notificationConsole item and select Component.

  3. Click Open Selected.

  4. Add the following markup right under the aura:component root tag:

  <lightning:empApi aura:id="empApi"/>
  <aura:attribute name="channel" type="String" default="/event/Notification__e"/>
  <aura:attribute name="subscription" type="Map"/>

Code Highlights:

  • The first line embeds the lightning:empApi Lightning component in the notificationConsole component. The empApi component provides methods to subscribe and unsubscribe to a platform event channel using CometD.

  • The channel attribute defines the channel to be used for subscription to Notification__e events.

  • The subscription attribute holds the subscription object that is returned by the empApi.subscribe() method. This object is used to unsubscribe later.

  1. Save the file.

Update the Component Helper

  1. Click Helper on the right-hand side of the Developer Console.

  2. Replace all of the code with the following:

({
  // Client-side function that invokes the subscribe method on the
  // empApi component.
  subscribe: function (component, event, helper) {
    // Get the empApi component.
    const empApi = component.find('empApi');
    // Get the channel from the attribute.
    const channel = component.get('v.channel');
    // Subscription option to get only new events.
    const replayId = -1;
    // Callback function to be passed in the subscribe call.
    // After an event is received, this callback prints the event
    // payload to the console. A helper method displays the message
    // in the console app.
    const callback = function (message) {
      console.log('Event Received : ' + JSON.stringify(message));
      helper.onReceiveNotification(component, message);
    };
    // Subscribe to the channel and save the returned subscription object.
    empApi.subscribe(channel, replayId, $A.getCallback(callback)).then($A.getCallback(function (newSubscription) {
      console.log('Subscribed to channel ' + channel);
      component.set('v.subscription', newSubscription);
    }));
  },
  // Client-side function that invokes the unsubscribe method on the
  // empApi component.
  unsubscribe: function (component, event, helper) {
    // Get the empApi component.
    const empApi = component.find('empApi');
    // Get the channel from the component attribute.
    const channel = component.get('v.subscription').channel;
    // Callback function to be passed in the unsubscribe call.
    const callback = function (message) {
      console.log('Unsubscribed from channel ' + message.channel);
    };
    // Unsubscribe from the channel using the subscription object.        
    empApi.unsubscribe(component.get('v.subscription'), $A.getCallback(callback));
  },
  // Client-side function that displays the platform event message
  // in the console app and displays a toast if not muted.
  onReceiveNotification: function (component, message) {
    // Extract notification from platform event
    const newNotification = {
      time: $A.localizationService.formatDateTime(
        message.data.payload.CreatedDate, 'HH:mm'),
      message: message.data.payload.Message__c
    };
    // Save notification in history
    const notifications = component.get('v.notifications');
    notifications.push(newNotification);
    component.set('v.notifications', notifications);
    // Display notification in a toast
    this.displayToast(component, 'info', newNotification.message);
  },
  // Displays the given toast message.
  displayToast: function (component, type, message) {
    const toastEvent = $A.get('e.force:showToast');
    toastEvent.setParams({
      type: type,
      message: message
    });
    toastEvent.fire();
  }
})

Code Highlights:

You added three new functions:

  • subscribe — Subscribes to the platform event channel using a shared CometD connection.

  • unsubscribe — Unsubscribes from the platform event channel.

  • onReceiveNotification — This function is called when a platform event message is received. This function formats the platform event data, adds it to the notification history, and displays a toast if you have not muted notifications.

  1. Save the file.

Update the Component Controller

  1. Click Controller on the right-hand side of the Developer Console.

  2. Replace the entire content with the following:

({
  // Called when the component is initialized.
  // Subscribes to the channel and displays a toast message.
  // Specifies an error handler function for empApi   
  onInit: function (component, event, helper) {
    component.set('v.subscription', null);
    component.set('v.notifications', []);
    // Get empApi component.
    const empApi = component.find('empApi');
    // Define an error handler function that prints the error to the console.
    const errorHandler = function (message) {
      console.error('Received error ', JSON.stringify(message));
    };
    // Register empApi error listener and pass in the error handler function.
    empApi.onError($A.getCallback(errorHandler));
    helper.subscribe(component, event, helper);
    helper.displayToast(component, 'success', 'Ready to receive notifications.');
  },

  // Clear notifications in console app.
  onClear: function (component, event, helper) {
    component.set('v.notifications', []);
  },

  // Mute toast messages and unsubscribe/resubscribe to channel.
  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') + '.');
  }
})

Code Highlights:

  • The onInit function subscribes to the platform event channel by calling the helper subscribe() function. Next, the function displays a toast message indicating that the app is ready to receive notifications.

  • The onToggleMute() function stops the subscription when the app is muted and doesn't display any toasts. When the app is unmuted, subscription resumes and new messages display in the console and in toasts.

  1. Save the file and close the Developer Console.
  1. Back in the Sales app, refresh your browser window to load the updates you made to the notification console.

Test the Instant Notification App

To test the instant notification app, you use an external application, the Bear Watch Heroku app.

  1. Open the Bear Watch Heroku app.

  2. Click Log In.

  3. When you are prompted to allow access to the Bear Watch application, click Allow.

Access authorization prompt for the Bear Watch application

  1. Resize and position your browser windows so that you can see both your Salesforce Sales app and the Bear Watch app at the same time. You might have to refresh the home page of the Sales app to receive new notifications.
  2. Click Broadcast bear warning.

A "Watch out, bear spotted!" notification appears in the Salesforce window.

An image showing a notification being sent from the Bear Watch Heroku application and received in the notification console in Salesforce