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.
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.

1<apex:page >
2<apex:includeScript value="{!$Resource.json2_js}"/>
3<script type="text/javascript" src="{!URLFOR($Resource.cometd_zip, 'dojo/dojo.js')}" data-dojo-config="async: 1"></script>
4<apex:stylesheet value="{!$Resource.demo_css}"/>
5<script>var token = '{!$Api.Session_ID}';</script>
6        <div id="demo">
7            <div id="datastream"></div>
8        <script type="text/javascript" src="{!$Resource.demo_js}">
9</script>
10
11            <div id="input">
12                <div id="join">
13                    <table>
14                        <tbody>
15                            <tr>
16                                <td>&nbsp;</td>
17                                <td> Enter Topic Name </td>
18                                <td>
19                                    <input id="topic" type="text" />
20                                </td>
21                                <td>
22                                    <button id="subscribeButton" 
23                                        class="button">Subscribe</button>
24                                </td>
25                            </tr>
26                        </tbody>
27                    </table>
28                </div>
29                <div id="joined">
30                    <table>
31                        <tbody>
32                            <tr>
33                                <td>
34                                    <button id="leaveButton" 
35                                        class="button">Unsubscribe</button>
36                                </td>
37                            </tr>
38                        </tbody>
39                    </table>
40                </div>
41            </div>
42        </div>
43</apex:page>

Click Save to save the page.

Streaming API Developer Guide

Step 4: Create a Visualforce Page