Interact with Kaazing WebSocket Gateway Using the EventSource API
This section describes how you can use the EventSource API provided by the Kaazing JavaScript client library. This API allows you to take advantage of the Server-Sent Events standard as described in the HTML5 specification. For example, you can create a JavaScript client that uses the JavaScript HTML5 Communications client library to receive streaming data from a news feed or streaming financial data. The support for Server-Sent Events is provided by the EventSource class and its supporting classes.
The following steps show you how to use the EventSource API. This example highlights some of the most commonly used EventSource methods and is not meant to be an end-to-end tutorial. Refer to the EventSource API documentation for a complete description of all the available methods.
Before You Begin
This procedure is part of Checklist: Build JavaScript Clients Using Kaazing WebSocket Gateway:
- Interact with Kaazing WebSocket Gateway Using the WebSocket API
- Interact with Kaazing WebSocket Gateway Using the EventSource API
- Migrate JavaScript Applications to Kaazing WebSocket Gateway 4.x
- Secure Your JavaScript Client
- Display Logs for the JavaScript Client
Note: Learn about supported browsers, operating systems, and platform versions in the Release Notes.
To Use the EventSource API with the Gateway
- Copy the GATEWAY_HOME/web/extras/samples folder into GATEWAY_HOME/web/base/, so that you can modify the files. Note that files in the GATEWAY_HOME/web/extras/ folder are read only.
- Open the file sse.html in the GATEWAY_HOME/web/base/samples/html5-javascript directory in your favorite text editor.
- Add the required script reference. To do so, replace:
<!-- TODO1 -->
with:
<script src="javascript/ServerSentEvents.js"></script>
- Create a new eventSource object.
Replace:
<!-- TODO2 -->
with:
var eventSource = new EventSource(url.value);
- Add listeners to the eventSource object to listen for eventSource events, as shown in the following example. The eventSourceListener has three methods: the onopen method is called when a Server-Sent Events connection is established, the onmessage method is called when messages are received, and the onerror method is called when errors occur.
Replace:
<!-- TODO3 -->
with:
eventSource.onopen = updateStatus; eventSource.onerror = updateStatus eventSource.onmessage = function(event) { dataCell.innerHTML = event.data; }
- Configure the Gateway to accept Server Sent Events on port 8000 (sse://localhost:8000/sse), and add a cross-site contraint for the web page address (http://localhost:8000/):
<service> <accept>sse://localhost:8000/sse</accept> <type>broadcast</type> <properties> <accept>udp://localhost:50505</accept> </properties> <cross-site-constraint> <allow-origin>http://localhost:8000/</allow-origin> </cross-site-constraint> </service>
- Start the UDP data source for the demo (GATEWAY_HOME/bin/gateway.demos.start.bat on Windows or GATEWAY_HOME/bin/demo-services.start on Linux).
- Restart the Gateway (see the Setup Guide for instructions on how to stop and start the Gateway on different operating systems).
- Run the file in your browser by navigating to http://localhost:8000/samples/html5-javascript/sse.html.
Next Step
Migrate JavaScript Applications to Kaazing WebSocket Gateway 4.x