Checklist: Build JavaScript Clients Using Kaazing WebSocket Gateway

The following checklist provides the steps necessary to build clients to communicate with Kaazing WebSocket Gateway:

# Step Topic or Reference
1 Learn about supported browsers, operating systems, and platform versions. Release Notes
2 Learn how to use the common methods of the HTML5 WebSocket API in your client. Interact with Kaazing WebSocket Gateway Using the WebSocket API
3 Learn how to use the common methods of the HTML5 Server-Sent Events standard in your client. Interact with Kaazing WebSocket Gateway Using the EventSource API
4 Migrate your legacy Kaazing WebSocket Gateway WebSocket or ByteSocket-based client to the WebSocket API-compliant libraries in Kaazing WebSocket Gateway 4.x. Migrate JavaScript Applications to Kaazing WebSocket Gateway 4.x
5 Implement a challenge handler in your client to respond to authentication challenges from the Gateway. Secure Your JavaScript Client
6 Set up logging for your client. Display Logs for the JavaScript Client

Overview

Kaazing WebSocket Gateway provides support for its HTML5 Communication protocol libraries in JavaScript. Using the JavaScript client library, you can enable the HTML5 Communication protocols (for example, WebSocket and Server-Sent Events) in new or existing web applications. For example, you can create an application that uses WebSocket to get streaming financial data from a back-end server, or you can create a JavaScript client that receives streaming news data through Server-Sent Events. The following figure shows a high-level overview of the architecture:
 

JavaScript client architecture overview
Figure: JavaScript client architecture overview

Kaazing WebSocket Gateway Has Full WebSocket API Compliance

Clients built using the Kaazing WebSocket Gateway JavaScript libraries are fully-compliant with the WebSocket API standard. All of the standards and features of the API such as sending and receiving binary using an ArrayBuffer, ArrayBufferView, and Blob are supported.

Taking a Look at the JavaScript Client Demo

Before you start, take a look at an out of the box demo that was built with the JavaScript client library: the JavaScript that is part of the Kaazing WebSocket Gateway bundle. To see these JavaScript clients in action, perform the following steps:

  1. Start the Gateway as described in Setting Up Kaazing WebSocket Gateway.
  2. In a browser, navigate to the out of the box demos at http://localhost:8001/demo/ and try the JavaScript WebSocket Echo demo.
    You can find the out of the box demos for Server-Sent Events, PostMessage, and other platforms here:
    http://localhost:8001/demo/#javascript.

  3. Using the demo, connect to your Kaazing WebSocket Gateway, send messages to the Echo service running on the Gateway, and see an Echo reply message from the Gateway.

To view the WebSocket information on the network, do the following:

  1. Run Google Chrome with Chrome’s Developer Tools opened. To open the Developer Tools on Windows and Linux use Control+Shift+I. On a Mac, use ⌥⌘I.
  2. Open the Network panel. For more information, see Network panel on Google Developers.
  3. Click WebSockets at the bottom of the panel.
  4. Navigate to the out of the box Javascript WebSocket Echo demo at http://localhost:8001/demo/gateway/javascript/ws.html.
  5. In the demo, click Connect.
  6. The panel displays the new WebSocket connection.
  7. In the Name column, click the connection icon.
  8. The Headers and Frames tabs display the details of the connection. In the Headers tab you can see the request and response headers used to establish the WebSocket handshake and connection.
  9. Click the Frames tab and then click Send in the demo.
  10. In the Name column, click the connection icon again and the message is displayed in the Frames tab.
  11. You have now seen both the information used to establish the WebSocket connection and the contents of WebSocket frames (messages) sent over the connection.
TOP