Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

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