Step 4: Create a Visualforce Page

Create a Visualforce page to display the channel notifications.

From Setup, enter Visualforce Pages in the Quick Find box, then select Visualforce Pages.
Click New.

Replace the code in the page with the following code:

1<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   function disconnect() {
29       $.cometd.disconnect();
30   }
31   window.onbeforeunload = disconnect;
32   </script>
33    <body>
34    <div id="content">
35    <h1>Streaming API Test Page</h1>
36    <p>This is a demonstration page for Streaming API. Notifications from the 
37       InvoiceStatementUpdates channel will appear here...</p>
38    
39    </div>
40    </body>
41</apex:page>

Force.com Streaming API Developer Guide

Step 4: Create a Visualforce Page