[SalesForce] How to use PushTopics in Lightning Components

I have been through the Salesforce streaming API demo, and got that working.

For anyone wanting a reminder, the page looks like this

<apex:page >
    <apex:includeScript value="{!$Resource.cometd_js}"/>
    <apex:includeScript value="{!$Resource.jquery}"/>
    <apex:includeScript value="{!$Resource.json2_js}"/>
    <apex:includeScript value="{!$Resource.jquery_cometd}"/>

    <script type="text/javascript">
        (function($){
            $(document).ready(function() {
                // Connect to the CometD endpoint
                $.cometd.init({
                    url: window.location.protocol+'//'+window.location.hostname+'/cometd/24.0/',
                    requestHeaders: { Authorization: 'OAuth {!$Api.Session_ID}'}
                });

                // Subscribe to a topic. JSON-encoded update will be returned in the callback
                $.cometd.subscribe('/topic/InvoiceStatementUpdates', function(message) {
                    $('#content').append('<p>Notification: ' +
                        'Channel: ' + JSON.stringify(message.channel) + '<br>' +
                        'Record name: ' + JSON.stringify(message.data.sobject.Name) +
                        '<br>' + 'ID: ' + JSON.stringify(message.data.sobject.Id) + 
                        '<br>' + 'Event type: ' + JSON.stringify(message.data.event.type)+
                        '<br>' + 'Created: ' + JSON.stringify(message.data.event.createdDate) + 
                        '</p>');
                });
            });
        })(jQuery)
        function disconnect() {
           $.cometd.disconnect();
        }
        window.onbeforeunload = disconnect;
    </script>
    <body>
        <div id="content">
            <h1>Streaming API Test Page</h1>
            <p>This is a demonstration page for Streaming API. Notifications from the InvoiceStatementUpdates channel will appear here...</p>
        </div>
    </body>
</apex:page>

Now I wanted to use this in Lightning components. According to a reply by Skip Sauls here, it's supposedly doable.

This is what I have in my lightning app

<aura:application>
    <ltng:require styles=""
        scripts="/resource/cometd_js,/resource/jquery,/resource/json2_js,/resource/jquery_cometd"
        afterScriptsLoaded="{!c.setupJs}" 
    />

    <div aura:id="content">
        list:
    </div>
</aura:application>

And this is the associated controller:

({
    myAction: function(component, event, helper) {
    },

    setupJs: function() {
        // Connect to the CometD endpoint
        $.cometd.init({
            url: window.location.protocol+'//'+window.location.hostname+'/cometd/24.0/',
            requestHeaders: { Authorization: 'OAuth {!$Api.Session_ID}'}
        });

        // Subscribe to a topic. JSON-encoded update will be returned in the callback
        $.cometd.subscribe('/topic/InvoiceStatementUpdates', function(message) {
            $('.content').append('<p>Notification: ' +
                'Channel: ' + JSON.stringify(message.channel) + '<br>' +
                'Record name: ' + JSON.stringify(message.data.sobject.Name) +
                '<br>' + 'ID: ' + JSON.stringify(message.data.sobject.Id) + 
                '<br>' + 'Event type: ' + JSON.stringify(message.data.event.type)+
                '<br>' + 'Created: ' + JSON.stringify(message.data.event.createdDate) + 
                '</p>');
        });
    }
})

And lastly, this is the error I am receiving in the Chrome console log when the page loads:

POST https://smlt-dev-ed.lightning.force.com/cometd/24.0/ 401 (Unauthorized)

Now, I know that the cometd/24.0 endpoint in my VF page was preceded by a different base URL. My question is whether the Lightning supports using the streaming API, and if so, what changes do I make to my component to get it to work?

Best Answer

As per @mike-tetlow 's answer and link, there isn't currently a lightning way to get the session ID, so we have to resort to fetching it via an Apex controller.

Related Topic