Andy in the Cloud

From BBC Basic to Force.com and beyond…

Platform Events and Lightning Components

3 Comments

Over the past few weeks i have been working with Platform Events in a number of my Lightning projects, such as the Custom Metadata Services and Event Logging. This component allows you to receive Platform Events in your own components.
streamingcmp
This component can be deployed from this repository here. I have been working on this for a while and I have yet to highlight this component on my blog. I wanted to rectify that now and I also wanted to take some time to explain lessons learned along the way and if anyone else has any thoughts on improving it even further!

Using the Component

Firstly using the component is very easy, you just need two attributes as you can see above. The channel defines the event and the onMessage attribute the handler for the event. I learnt along the way that if you define a registerEvent in your component it automatically exposes an attribute that takes a callback handler, much nicer for users of your component! The payload event parameter contains the platform event fields.
handleevent

Wrapping CometD in a Component World

The component uses the CometD JavaScript library internally. This library does require a certain amount of configuration and authentication tweaks to initialise (such as disabling WebSockets, since LEX does not currently support it). Also, as i found out eventually, code to unsubscribe from events is also needed.

In the Visualforce page examples this was less of a concern in a page centric world. In the world of components this becomes very important! Without it, i was finding that when i navigated around Lightning Experience and back to components using this component i would accumulate handlers, that would effectively appear to be repeating events, not good.

In order to find the correct moment to unsubscribe and disconnect, the component listens to the aura:valueDestroy event. This does not fire immediately however, so some additional defensive work in the internal handler is needed. I am certainly open to further comments on how to make this component more robust.

This Trialhead module also includes example code on how to use the CometD library in Lightning, though the result is not a generic component like the one in this blog. I am also less sure about its design in terms of unsubscribing only on page unload.

Summary

Access to creating, sending and receiving Platform Events are available in Apex, REST API’s, Process Builder and Flow. Hopefully one day we will see a platform provided Lightning Base Component to replace the one i have created here. Meanwhile have fun!

3 thoughts on “Platform Events and Lightning Components

  1. Slick library, glad you made it and shared it with folks!

    We use the same cometD library in our Lightning Components when we want to stream Platform Events.

    A word to the wise: there was a change in recent versions of that library that Lockerservice does NOT like. I believe it’s 2.9.3 and later (you’re using 2.9.1 it seems).

    Here’s the commit that makes LockerService blow up. You can safely revert this commit in your own version of the library if you choose to use a later version number than 2.9.1.

    https://github.com/cometd/cometd/commit/f2ce6e490d5d6be06387ce2e29969aa1fdf8e041

    Banged my head on the wall on this one for a good half day a while back.

    • Thanks for sharing! Appreciated! How did you do then unsubscribe btw?

      • We don’t have the same unsubscribe challenges you had to deal with building your library, as we have a singleton component at the top level that listens for PlatformEvents (and re-emits them as Application events in Lightning). Individual components that get built and destroyed (and may be interested in these Application Events) don’t affect the Platform Event subscription.

        The singleton is always live if the application is open.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s