Streaming API Using JQuery – Salesforce

Author posted by Jitendra on Posted on under category Categories Tech Tips and tagged as Tags , with 8 Comments on Streaming API Using JQuery – Salesforce

Tutorial of Streaming API in Salesforce with Source code and Demo Video – Implementation of Bayeux protocol and CometD using JQuery and JSON

Push technology is a model of Internet-based communication in which information transfer is initiated from a server to the client. Also called the publish/subscribe model, this type of communication is the opposite of pull technology in which a request for information is made from a client to the server. The information that’s sent by the server is typically specified in advance. When using Streaming API, you specify the information the client receives by creating a PushTopic. The client then subscribes to the PushTopic channel to be notified of events that match the PushTopic criteria.

In push technology, the server pushes out information to the client after the client has subscribed to a channel of information. In order for the client to receive the information, the client must maintain a connection to the server. Streaming API uses the Bayeux protocol and CometD, so the client to server connection is maintained through long polling.

The Bayeux protocol and CometD both use long polling.

  1. Bayeux is a protocol for transporting asynchronous messages, primarily over HTTP.
  2. CometD is a scalable HTTP-based event routing bus that uses an AJAX push technology pattern known as Comet. It implements the Bayeux protocol.

There is nice jQuery plugin available on web which implements Bayeux protocol and CometD.

Navigate here for Salesforce documentation for Streaming API.

Common Terms used in Streaming API:

  • Event : Either the creation of a record or the update of a record. Each event may trigger a notification.
  • Notification : A message in response to an event. The notification is sent to a channel to which one or more clients are subscribed.
  • PushTopic : A record that you create. The essential element of a PushTopic is the SOQL query. The PushTopic defines a Streaming API channel.

Example used in this article :

I want notifications about all opportunity whose status is won.
First step to implement any streaming API is to create the Push Topic, which is going to subscribed by all the clients.

Create PushTopic:

To create PushTopic, we will need the developer console of the Salesforce and assume that the name of the topic is “WonOpportunity”.

PushTopic pushTopic = new PushTopic();
pushTopic.ApiVersion = 23.0;
pushTopic.Name = 'WonOpportunity';
pushTopic.Description = 'Notify if the Opportunity won';
pushTopic.NotifyForOperations = 'All';
pushTopic.NotifyForFields = 'Referenced';
pushtopic.Query = 'Select o.OwnerId, o.Name, o.IsWon, o.Id, o.Amount From Opportunity o WHERE o.IsWon = true';
insert pushTopic;
System.debug('Created new PushTopic: '+ pushTopic.Id);
Salesforce Streaming API - Create Push topic
Salesforce Streaming API - Create Push topic

Step 2:
Download the CometD compressed archive (.tgz) file from http://download.cometd.org/cometd-2.2.0-distribution.tar.gz

Step 3:
In the extracted folder you will find the war file at location “cometd-2.2.0/cometd-javascript/common/target”.

Unpack that war file using below DOS command in Windows and same command will work on shell also

cd cometd-2.2.0/cometd-javascript/common/target
jar xvf cometd-javascript-common-2.2.0.war org/cometd.js
Salesforce UnPack war file - Streaming API
Salesforce UnPack war file - Streaming API

If you will not follow the above step and if use different “cometd.js” file then you may get error “Uncaught ReferenceError: org is not defined”

Step 4:
Extract the following JavaScript files from “cometd-2.2.0-distribution.tar.gz

  • cometd-2.2.0/cometd-javascript/common/target/org/cometd.js (This file must be from war file)
  • cometd-2.2.0/cometd-javascript/jquery/src/main/webapp/jquery/jquery-1.5.1.js
  • cometd-2.2.0/cometd-javascript/jquery/src/main/webapp/jquery/json2.js
  • cometd-2.2.0/cometd-javascript/jquery/src/main/webapp/jquery/jquery.cometd.js

Step 5:
Create a Visualforce page with following code :

<apex:page >

<apex:includeScript value="{!URLFOR($Resource.SteamingAPI, 'StreaminAPI/JQueryComet/Cometd.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.SteamingAPI, 'StreaminAPI/jquery_1.5.2.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.SteamingAPI, 'StreaminAPI/JQueryComet/json2.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.SteamingAPI, 'StreaminAPI/JQueryComet/jquery.cometd.js')}"/>

<apex:includeScript value="{!URLFOR($Resource.SteamingAPI, 'StreaminAPI/Style/jquery-animate-css-rotate-scale.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.SteamingAPI, 'StreaminAPI/Style/jquery-css-transform.js')}"/>

<apex:stylesheet value="{!URLFOR($Resource.SteamingAPI, 'StreaminAPI/Style/style.css')}"/>

<div class="menu">
<!-- Place holder for notifications -->
</div>

	 <script type="text/javascript">
	    var $jq = jQuery.noConflict();

            $jq('.item').click(
                function(){
                    var $this = $jq(this);
                    expand($this);
                }
            );
            function expand($elem){
                var angle = 0;
                var t = setInterval(function () {
                    if(angle == 1440){
                        clearInterval(t);
                        return;
                    }
                    angle += 40;
                    $jq('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
                },10);
                $elem.stop().animate({width:'500px'}, 1000)
                .find('.item_content').fadeIn(400);
            }

           function createEle(data)
           {
	           	var $itemDiv = $jq(document.createElement('div'));
	           	$itemDiv.addClass('item');

	           	var $anch =  $jq(document.createElement('a'));
	           	$anch.addClass('link');
	           	$anch.addClass('icon_alert');

	           	var $contentDiv = $jq(document.createElement('div'));
	           	$contentDiv.addClass('item_content');

	           	var $h2 = $jq(document.createElement('h2'));
	           	$h2.html('Won New Opportunity');
	           	$contentDiv.append($h2);

	           	$contentDiv.append('<br />Name : '+data.Name+' <br />	Amount : '+data.Amount+' <br /><a href="#"> Navigate to Opportunity </a>');

	           	$itemDiv.append($anch);
	           	$itemDiv.append($contentDiv);
	           	$jq(".menu").append($itemDiv);
	           	expand($itemDiv);
           }

           $jq(function() {
			 	 // Connect to the CometD endpoint

	            $jq.cometd.init({
	               url: window.location.protocol+'//'+window.location.hostname+'/cometd/23.0/',
	               requestHeaders: { Authorization: 'OAuth {!$Api.Session_ID}'}
	           });

	          $jq.cometd.subscribe('/topic/WonOpportunity', function(message) {
	          		createEle(message.data.sobject);
	            });

			});

        </script>
</apex:page>

After saving this page, open same salesforce instance in other browser or tab and make change to any opportunity with status “won”, it will display an alert that opportunity is won.
Output:

Salesforce Streaming API Example
Salesforce Streaming API Example

JSON Reponse:
following JSON response we gets from Streaming API. The Rows returned in Object depends upon the Push topic create earlier.

[
   {
      "channel":"/topic/WonOpportunity",
      "data":{
         "event":{
            "type":"created",
            "createdDate":"2012-05-05T10:06:45.000+0000"
         },
         "sobject":{
            "Name":"om",
            "IsWon":true,
            "Amount":null,
            "OwnerId":"00590000000Gl5VAAS",
            "Id":"00690000006C8yFAAS"
         }
      }
   },
   {
      "channel":"/meta/connect",
      "advice":{
         "reconnect":"retry",
         "interval":0,
         "timeout":110000
      },
      "successful":true,
      "id":"3"
   }
]

Debugging Streaming API:
We can use “firebug” plugin of Mozilla to check whether the http request is made or not from JQuery (comet). Following screen can give you little idea about the http (XHR) requests made from JQuery .

Firebug Tool - Debugging Streaming API of Salesforce
Firebug Tool - Debugging Streaming API of Salesforce

Download Static Resource used in this article for Streaming API example of salesforce

Output Video of Streaming API:

Related posts

  • Rojalinpdp

     Nice post…Thanks 4 sharing

  • Pawan

    Awesome yaara !!!!

    • JitendraZaa

      Thanks Pawan

  • Abishekh

    Hi, Excellent blog. The code works fine in a visual force page, but it does not work in visual force TAB. Do I need to make some specific changes to make it work in visual force TAB?

  • Grace Patiño

    Hi, do you think this work in salesforce1 to made a notification like puch notification? if not, do you know something to do that?

    • Yeah, It should work but user needs to stay on that VF page.

      • Anugraha B

        What will happen if user navigates to a different page? Will the connection timeout? If yes, can I capture the timeout and reconnect again when the user comes back?

        • If navigation is changed and next page also implements streaming API then it will work normally but if next page does not implement streaming API then no one will be subscribing API so it will be ignored.