Step 4: Create a Visualforce Page

Create a Visualforce page to display the channel notifications.

From Setup, click Develop | Pages.
Click New.
In the Label field, enter the name of the page StreamingAPIDemo.

Replace the code in the page with the code from the StreamingApiDemo file that you downloaded.

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.json2_js}"/>
19<apex:includeScript value="{!URLFOR($Resource.cometd, 'dojo/dojo.js')}"/>
20<apex:includeScript value="{!$Resource.demo_js}"/>
21<apex:stylesheet value="{!$Resource.demo_css}"/>
22    <script>var token = '{!$Api.Session_ID}';</script>
23        <div id="demo">
24            <div id="datastream"></div>
25            <div id="input">
26                <div id="join">
27                    <table>
28                        <tbody>
29                            <tr>
30                                <td>&nbsp;</td>
31                                <td> Enter Topic Name </td>
32                                <td>
33                                    <input id="topic" type="text" />
34                                </td>
35                                <td>
36                                    <button id="subscribeButton" 
37                                        class="button">Subscribe</button>
38                                </td>
39                            </tr>
40                        </tbody>
41                    </table>
42                </div>
43                <div id="joined">
44                    <table>
45                        <tbody>
46                            <tr>
47                                <td>
48                                    <button id="leaveButton" 
49                                        class="button">Unsubscribe</button>
50                                </td>
51                            </tr>
52                        </tbody>
53                    </table>
54                </div>
55            </div>
56        </div>
57</apex:page>

Click Save to save the page.

Force.com Streaming API Developer's Guide

Step 4: Create a Visualforce Page