Winter '19 Platform Events and the new Lightning Emp API Component

With the Winter '19 release there are a number of lightning updates to help make working with lightning components a little bit easier. For this post, I thought that I'd focus on the new Lightning Emp Api component.

lightning:empApi

Embed the lightning:empApi component in your custom Lightning component to subscribe to a streaming event channel and receive event notifications. You can subscribe to any type of event channel on the Lightning Platform, including channels for platform events, PushTopic and generic events, and Change Data Capture (Developer Preview) events. The lightning:empApicomponent uses a shared CometD-based Streaming API connection, enabling you to run multiple streaming apps in the browser.

One of the nicest things about this new component, is that it greatly reduces the amount of code that I need to copy and paste each time I want to consume a Platform Event. In the past, we had to use the cometd library which required a fair bit of work to setup and initialize. This included downloading the library, creating a static resource, initializing the resource, configuring the endpoint, etc... I'm getting tired just thinking about it. With the new lightning:empApi component, it's just a matter of adding the lightning:empApi component to your custom lightning component, creating a error handler to catch any issues, and subscribing to the event. Pretty easy huh? Now that that's all out of the way, let's take a look at some code.

Let's start off by creating a new Platform Event called "Demo_EmpApi_Event__e"...

...and add a new custom field called "Message__c".

Next, we need to add the reference to Emp API to our lightning component:

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

The bulk of the logic is handled by the init method in the controller class. The first thing that we need to do is to get a reference the Emp API component:

  var empApi = cmp.find("empApi");

Once we have a reference to the Emp API component we can subscribe to the event:

  var replayId=-1; //use -1 for new events

  empApi.subscribe(channel, replayId, callback).then(function(value) {
      console.log("Subscribed to channel " + channel);
      sub = value;
      cmp.set("v.sub", sub);
  });

When we receive a message we need to handle is somehow. In this case I've created a callback function to popup an alert.

  var callback = function (message) {
      alert('Event Received!');        
  }.bind(this);

The final piece of this is to publish the event. In order to do so, I've created an Apex class that instantiates the Demo_EmpApi_Event__e and then uses the EventBus Class to publish it.

  Demo_EmpApi_Event__e event = new Demo_EmpApi_Event__e(Message__c=message);      
  Database.SaveResult result = EventBus.publish(event);

That's pretty much it! Now when we publish an event we get an alert.

I've posted the complete code examples below. Happy coding!

EmpApi_example.cmp

	<aura:component controller="EmpApi_exampleController" implements="force:appHostable">
	<lightning:empApi aura:id="empApi" />
	<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
	<lightning:card title="Emp API Example">
	<lightning:button variant="brand" label="Publish Event" onclick="{!c.doPublishEvent}" />
	</lightning:card>
	</aura:component>

view raw EmpApi_example.cmp hosted with ❤ by GitHub

EmpApi_exampleController.js 

	({
	doInit : function(cmp, event, helper, isinit) {
	var empApi = cmp.find("empApi");
	// Handle any errors and print them to the console.
	var errorHandler = function (message) {
	console.log("Received error ", message);
	}.bind(this);
	// Register the error listener
	empApi.onError(errorHandler);
	var channel='/event/Demo_EmpApi_Event__e';
	var sub;
	// use -1 for new events
	var replayId=-1;
	var callback = function (message) {
	alert(message);
	}.bind(this);
	empApi.subscribe(channel, replayId, callback).then(function(value) {
	console.log("Subscribed to channel " + channel);
	sub = value;
	cmp.set("v.sub", sub);
	});
	},
	doPublishEvent : function(cmp, event){
	var action = cmp.get("c.publishEvent");
	action.setCallback(this, function(response) {
	var state = response.getState();
	if (cmp.isValid() && state === "SUCCESS") {
	console.log("Event published successfully!");
	}
	else {
	console.log("Failed with state: " + state);
	}
	});
	$A.enqueueAction(action);
	}
	})

view raw EmpApi_exampleController.js hosted with ❤ by GitHub

EmpApi_exampleController.cls

	public class EmpApi_exampleController {
	@AuraEnabled
	public static void publishEvent()
	{
	System.debug('Published Event!');
	Demo_EmpApi_Event__e event = new Demo_EmpApi_Event__e(Message__c=message);
	Database.SaveResult result = EventBus.publish(event);
	if (!result.isSuccess()) {
	for (Database.Error error : result.getErrors()) {
	System.debug('Error returned: ' + error.getStatusCode() +' - '+ error.getMessage());
	}
	}
	}
	}

view raw EmpApi_exampleController.cls hosted with ❤ by GitHub