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

Force.com Streaming API Developer's Guide

No Results

Step 4: Create a Visualforce Page