ELEVATE Extra Credit: jQuery and the Streaming API

1: Create Streaming Topics

/* 
The Streaming API allows clients to get updates on data changes in near real-time.  
This is done by keeping an open connection instead repeatedly polling the server, which is much more lightweight.
To accomplish this connection, you need a cometD capable client.  Luckily, there is a jQuery plugin for this -
which makes jQuery in Visualforce an easy way to test out the API.

To complete this extra credit:
1. Create a Streaming Topic with the following code.
2. Include jQuery, the cometD and iCanHas libraries in a Visualforce page.
3. Add the necessary JavaScript to connect to the Streaming API
4. Add the included HTML as an iCanHas template
5. Trigger an update to a VF page while manipulating merchandise data in a different browser or tab
*/

/* Run the following code as Anonymous Apex to create a new push topic

// Delete existing Merchandise PushTopics
List<PushTopic> pts = [SELECT ID, Name From PushTopic WHERE Name = 'Merchandise'];
delete pts;

// Create the new PushTopic
PushTopic pushTopic = new PushTopic();
pushTopic.Name = 'Merchandise';
pushTopic.Description = 'All records for the Merchandise object';
pushtopic.Query = 
    'SELECT Id, Name, Quantity__c FROM Merchandise__c WHERE Quantity__c < 50';
pushTopic.ApiVersion = 26.0;
pushTopic.NotifyForOperations = 'All';
pushTopic.NotifyForFields = 'Referenced';
insert pushTopic;

System.debug('Created new PushTopic: ' + pushTopic.Id);

2: Create the Visualforce Page

<apex:page>
<!-- You can find the required files for these static resources here:
 https://github.com/joshbirk/workshop2013/raw/master/files/jQueryCometD.zip
 https://raw.github.com/joshbirk/workshop2013/master/files/ICanHaz.js
-->
    <apex:includeScript value="{!URLFOR($Resource.jQueryCometD, 'cometd.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryCometD, 'json2.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryCometD, 'jquery-1.5.1.js')}" />
    <apex:includeScript value="{!URLFOR($Resource.jQueryCometD, 'jquery.cometd.js')}"/>
    <apex:includeScript value="{!$Resource.ICanHaz}"/>

</apex:page>

3: Add the JavaScript

<script type="text/javascript"> 
    j$ = jQuery.noConflict();
 
    j$(document).ready(function() {
        configuration = {url:'https://'+window.location.hostname+'/cometd/26.0/',
                 requestHeaders: {"Authorization": "OAuth {!$Api.Session_ID}"},
                             appendMessageTypeToURL : false};
        j$.cometd.configure(configuration); 
        j$.cometd.handshake();
        j$.cometd.subscribe('/topic/Merchandise', function(message) {
            console.log(message);
            alert(message.data.sobject.Name + ' has only '+message.data.sobject.Quantity__c+' units.');
        }); 
    
    });
 
</script>

4: Add the iCanHas template

<H1>Recent Warehouse Activity</H1>
<table id="warehouse">
  <tr><td><strong>Merchandise Item</strong></td><td><strong>Quantity</strong></td></tr>
  <script type="text/html" id="merch_tmpl">
    <tr><td><a href="/{{Id}}" target="_new">{{Name}}</a></td><td>({{Quantity__c}})</td></tr>   </script>
</table>


<!-- To make this template work with jQuery:

merch = ich.merch_tmpl(message.data.sobject);
j$('#warehouse').append(merch);

-->

5: Test with Workbench

You can also test Streming Topics using Workbench.  Workbench is a PHP based utility for testing and configuring Salesforce instances.  You can try a demo by logging in here:

https://workbench.developerforce.com/login.php .

And then:

1. Next to Jump To, select Streaming Push Topics.
2. Click Select.
3. Wait for the “Connection Established” message to appear.
4. Select Merchandise from the topics drop-down list.
5. Click Subscribe.
6. In another window, go to a Merchandise record.
7. For Quantity, enter in any value less than 50.
8. Return to the Workbench screen to see the updated message with the record.