Sending Login request message

Next, the application sends the OMM Login request message to Real-Time Advanced Distribution Server in JSON format. In TypeScript, you can create JSON message with JSON object directly (like standard JavaScript) or via TypeScript's Interface and Class approaches. This application uses TypeScript's Interface and Class approach for creating the OMM JSON Login, Item request and Close request messages.

We define the Login interfaces for the OMM Login Request message in json_msg_interface.ts file. We use export keyword to export each JSON object into TypeScript module.

Then we define the Login classes for the OMM Login Request message in json_msg_classes.ts file. The Login classes implement the Login interfaces based on json_msg_interface.ts file.

The web_app.ts file initiates the LoginMsg object and then sends it to Real-Time Advanced Distribution Server 3.2 via WebSocket.send() function. This login object will be compiled to the standard Login JSON message in the compiled JavaScript we_app.js file.

Handling Login Refresh response message

All messages (Refresh, Update, Status, etc) from the Real-Time Advanced Distribution Server will be available via WebSocket.onMessage() callback function. We implement this onMessage() callback function in web_app.ts file to print out incoming messages from Real-Time Advanced Distribution Server in the web browser's inMessagePre <pre> element tag.

Sending Item request message

Next, we implement the application source code to send the OMM Market Price request message to the Real-Time Advanced Distribution Server when users click the Subscribe button in the web UI.

We define the Item Request interfaces for the OMM Market Price Request message in json_msg_interface.ts file. We use export keyword to export each JSON object into TypeScript module. We set the Real-Time Advanced Distribution Server Service information as optional information in the JSONItemRequestKey interface because it is an optional parameter in the OMM Request message.

Next we define the Item Request classes for the OMM Market Price request message in json_msg_classes.ts file. The Item Request classes implement the Item Request interfaces based on json_msg_interface.ts file.

The web_app.ts file initiates the ItemRequestMsg object based on user input from the web UI and sends it to Real-Time Advanced Distribution Server via WebSocket.send() function. This item request message object will be compiled to a standard Item Request JSON message in the compiled JavaScript we_app.js file.

Handling incoming Item response message

All messages (Refresh, Update, Status, etc) for all Domains from the Real-Time Advanced Distribution Server will be available in WebSocket.onMessage() callback function. We will modify the onMessage() callback function in web_app.ts file to support incoming Market Price data from Real-Time Advanced Distribution Server.

The onMessage() callback function verifies if an incoming message is an incoming Market Price Refresh Response message or not by checking the data type and data.Key.Name property. If it is the Market Price Refresh message, it calls the pushIDstoDropDownMenu() function to add this item name and subscription id to the web UI list box. These item names and subscription id information will be used for unsubscribing items.

The onMessage() callback function also prints out incoming Market Price messages from Real-Time Advanced Distribution Server in the web browser's inMessagePre <pre> element tag.

Unsubscribe Market Price Item

Next, we implement the application source code to send the OMM Market Price close request message to Real-Time Advanced Distribution Server (version 3.2.1 and above). We define the Close Request interfaces for the Close Request message in json_msg_interface.ts file. We use export keyword to export each JSON object into TypeScript module. We set the Domain information as an optional In the JSONClose interface because it is an optional parameter in the OMM Close message (Market Price by defaulted).

Next we define the Close Message classe in json_msg_classes.ts file. The Close Message class implements the JSONClose interface based on json_msg_interface.ts file.

When unsubscribing item, users must choose the item name and subscription id that users want to unsubscribe from the web UI list box, then click the Unsubscribe button. We implement this UI interaction in web_app.ts file.

The web_app.ts file initiates the closeitemrequestMsg object, receives user input from the web UI, and then sends it to Real-Time Advanced Distribution Server via WebSocket.send() standard function. This item close request message object will be compiled to a standard Item Close Request JSON message in the compiled JavaScript we_app.js file.

Handling Ping Pong messages

The last step is handling the Ping and Pong messages. The Ping and Pong messages are the handshake message in JSON format ({ "Type": "Ping" } and { "Type": "Pong" }) between the Real-Time Advanced Distribution Server WebSocket server and client for monitoring connection health. The Real-Time Advanced Distribution Server periodically sends Ping messages to applications and applications must be prepared to send Pong messages as a response to any Ping message they receive.

The application will receive the Ping message via WebSocket.onMessage() callback function. We will modify this function to detect an incoming Ping message, then sends the Pong message back to Real-Time Advanced Distribution Server.

Application Setup

The application source code is available at GitHub. You can get it via the following git command

This example requires the following dependencies software and runtime

1. Node.js runtime - version 8.9.3 or higher.
2. npm package manager (included in Node.js)
3. TypeScript compiler (will be installed via npm install command)
4. Express.js web framework (will be installed via npm install command)

This example also uses the following 3rd party libraries for UI presentation only.

1. jQuery 3.2.1 JavaScript library
2. Bootstrap 3.3.7 CSS library

please check the README.md in the source code project for more detail.

How to run this example

1. Get the project via the above git command
2. Run $> npm install command in the command prompt to install all the required dependencies to run the sample in a subdirectory called node_modules/.

3.    If the machine is behind a proxy server, you need to configure Node.js uses proxy instead of a direct HTTP connection via the following command in command prompt: 

4.    Run $> npx webpack command in the command prompt to build and compile all TypeScript files in src folder into JavaScript source file (/web/dist/ folder)

5.    Run $> node server.js command in the command prompt to start the webserver at HTTP port 8080

6.    Open a web browser (IE11, Chrome/Microsoft Edge (Chrome-based version), and Firefox), then navigate to index.html of the webserver at http://localhost:8080/index.html

References

For further details, please check out the following resources:

• Real-Time & Distribution Family page on the LSEG Developers Community web site.
• WebSocket API page.
• TypeScript programming language: Documentation.
• Mozilla Developer Network: WebSocket API page
• WebSocket technology web site.
• Developer Article: Consume Realtime data with Data Platform
• Developer Article: How to implement WebSocket API JavaScript application with HTML Web Workers
• Developer Article: How to implement WebSocket API JavaScript application with TypeScript
• Developer Article: Consuming Order Book Level 2 data with Websocket API

For any questions related to this article or the WebSocket API page, please use the Developer Community Q&A Forum.

DOWNLOADS

Example.EWA.TypeScript.WebApplication