Step 4: Create a Visualforce Page

Create a Visualforce page to display the channel notifications.

From Setup, click Develop | Pages.
Click New.

Replace the code in the page with the following code:

1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<apex:page>
18    <apex:includeScript value="{!$Resource.cometd}"/>
19    <apex:includeScript value="{!$Resource.jquery}"/>
20    <apex:includeScript value="{!$Resource.json2}"/>
21    <apex:includeScript value="{!$Resource.jquery_cometd}"/>
22    <script type="text/javascript">
23    (function($){
24        $(document).ready(function() {
25            // Connect to the CometD endpoint
26            $.cometd.init({
27               url: window.location.protocol+'//'+window.location.hostname+'/cometd/24.0/',
28               requestHeaders: { Authorization: 'OAuth {!$Api.Session_ID}'}
29           });
30
31           // Subscribe to a topic. JSON-encoded update will be returned
32           // in the callback
33           $.cometd.subscribe('/topic/InvoiceStatementUpdates', function(message) {
34               $('#content').append('<p>Notification: ' +
35                    'Channel: ' + JSON.stringify(message.channel) + '<br>' +
36                    'Record name: ' + JSON.stringify(message.data.sobject.Name) +
37                    '<br>' + 'ID: ' + JSON.stringify(message.data.sobject.Id) + 
38                    '<br>' + 'Event type: ' + JSON.stringify(message.data.event.type)+
39                    '<br>' + 'Created: ' + JSON.stringify(message.data.event.createdDate) + 
40                    '</p>');
41            });
42        });
43   })(jQuery)
44   function disconnect() {
45       $.cometd.disconnect();
46   }
47   window.onbeforeunload = disconnect;
48   </script>
49    <body>
50    <div id="content">
51    <h1>Streaming API Test Page</h1>
52    <p>This is a demonstration page for Streaming API. Notifications from the 
53       InvoiceStatementUpdates channel will appear here...</p>
54    
55    </div>
56    </body>
57</apex:page>

Force.com Streaming API Developer's Guide

Step 4: Create a Visualforce Page