< Table of Contents

Checklist: Build JavaScript WebSocket Clients

The following checklist provides the steps necessary to build JavaScript clients to communicate with a RFC-6455 compliant server such as 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 Gateway Using the WebSocket API
3 Migrate your legacy Kaazing Gateway WebSocket or ByteSocket-based client to the WebSocket API-compliant libraries in Kaazing Gateway 4.x. Migrate JavaScript Applications to Kaazing Gateway 4.x
4 Implement a challenge handler in your client to respond to authentication challenges from the Gateway. Secure Your JavaScript Client
5 Set up logging for your client. Display Logs for the JavaScript Client

Overview

Kaazing 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 Gateway Has Full WebSocket API Compliance

Clients built using the Kaazing 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 a demo that was built with the JavaScript client library, available on Github at https://github.com/kaazing/javascript.client.tutorials. To see these JavaScript clients in action, perform the following steps:

  1. Clone or download the WebSocket demo from https://github.com/kaazing/javascript.client.tutorials.
  2. In a terminal, navigate to the folder for the WebSocket tutorial, javascript.client.tutorials/ws.
  3. Enter npm install to build the tutorial. You might need to execute the command with admin credentials. If you need to install Node.js® and update npm, see https://docs.npmjs.com/getting-started/installing-node.
  4. Enter node server.js to run the included Node.js® server component (server.js).
  5. In a browser, enter the URL http://localhost:3000/.
  6. Send messages to the Echo service running at the public Kaazing WebSocket Gateway address ws://sandbox.kaazing.net/echo, 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 WS in the panel.
  4. Navigate to the Javascript WebSocket Echo demo as described above, and use the public Kaazing WebSocket Gateway address ws://sandbox.kaazing.net/echo.
  5. In the demo, click Connect.
  6. The panel displays the new WebSocket connection.
  7. In the Name column, click the name.
  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.