Handling PushTopic/Streaming Api Events in Lightning Component

Handling PushTopic/Streaming Api Events in Lightning Component

Streaming API is the best way to post events based on any changes to the data which matches your defined SOQL query. These events can be handled within Salesforce or outside Salesforce using Bayeux Protocol and CometD. It can listen to:

  • New Record (Created)
  • Updated
  • Deleted
  • Undeleted

Below are the generic steps that you need to follow to create a PushTopic which will have you streaming channel name where you can publish your events:

  • Create a PushTopic based on a SOQL query. This defines the channel.
  • Clients subscribe to the channel.
  • A record is created, updated, deleted, or undeleted (an event occurs). The changes to that record are evaluated.
  • If the record changes match the criteria of the PushTopic query, a notification is generated by the server and received by the subscribed clients.

In this post, we will learn how you can subscribe to a PushTopic and listen for the events using cometD js library We will be creating an account spy app which will listen to the changes on account records and display in the browser console.

Download the cometD js library version 3.1.4 from my Github repo here.

Create A PushTopic

Run below code snippet in your developer console anonymous window.

https://gist.github.com/6b3cab4f0e117a1de62c07a232c02fd9

Create StreamEvent.evt

Create this lighting event, which will be fired by your generic streaming api handler component and will pass the data to the parent component. It takes complete message payload as an attribute.

https://gist.github.com/f19be451248c29fddd31ba7a00977f23

Create StreamingApiHandler.cmp

This would be a generic component that you can use with any of your component where you want to listen for events. It accepts “channel name” as an attribute.

https://gist.github.com/4af02cf59b79b25a7b1ae6f572a89490

Create StreamingApiHandlerController.js

All your logic to connect, subscriber and unsubscriber to a channel will go here.

https://gist.github.com/8fc9d07894c9ed58217595a32c447b81

Create Server Controller StreamingApiController.apxc

This server controller will pass the current user’s session if to “StreamingApiHandler.cmp” generic component. The session id will be used to make a connection to Salesforce server using oAuth.

https://gist.github.com/4ffe0e7c8983cd0ecca2397886633637

Create AccountSpy.cmp

This would be the parent component, which will use the StreamingApiHandler.cmp component to listen for the events. You can replace this component with your own functionality or custom component.

https://gist.github.com/770ff25038c330cd2603ddbbfd53b0b1

Create AccountSpyController.js

https://gist.github.com/40c5838ad9c9a1cca16c3669cbbffb1a

Sample Payload

Below sample payload is an example of payload received from Streaming Api event which you can handle as per your requirement.

https://gist.github.com/5b6715780f1d9016fe9f319a29814d70

 

Once all the code is written, add your AccountSpy component somewhere(maybe using AppBuilder) and keep that page open. You will be below console logs whenever changes will happen in an Account record.

 

That’s it, now you have your own generic StreamingApiHandler component which you can use with any of your components to listen to Streaming Api events.

 

Please do comment on this post to share your review or feedback

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Salesforce.com Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

This Post Has 3 Comments

  1. Avatar

    Thank you so much, Very helpful

Leave a Reply

Close Menu