Merge branch 'b3_handleIDs'

1. Support subscription IDs handler
2. Fix UI confusion

Author: Wasin Waeosri

README.md

@@ -14,19 +14,21 @@ The example supports Chrome, Firefox and IE11 (based on the WebSocket and Web Wo
 
 ## Prerequisite
 This example requires the following dependencies softwares.
-1. [Node.js](https://nodejs.org/en/) - version 6.10 or higher.
+1. [Node.js](https://nodejs.org/en/) runtime - version 8.9.3 or higher.
 2. [npm](https://www.npmjs.com/) package manager (included in Node.js)
-3. [TypeScript](https://www.typescriptlang.org) compiler
-4. [Express.js](https://expressjs.com/) web framework
+3. [TypeScript](https://www.typescriptlang.org) compiler (will be installed via ```npm install``` command)
+4. [Express.js](https://expressjs.com/) web framework (will be installed via ```npm install``` command)
 
 This example also uses the following 3rd party libraries for UI presentation.
-1. [jQuery 3.2.1](https://jquery.com/) 
-2. [Bootstrap 3.3.7](https://getbootstrap.com/docs/3.3/)
+1. [jQuery 3.2.1](https://jquery.com/) JavaScript library
+2. [Bootstrap 3.3.7](https://getbootstrap.com/docs/3.3/) CSS library
 
 jQuery,Bootstrap and Express.js are distributed under the [MIT license](https://opensource.org/licenses/MIT). Please see more detail in the LICENSE.md file.
 
+*Note: This example uses jQuery and Bootstrap for Web UI theme and color only, not for HTML DOM interaction. 
+
 ## Package
-The project includes complete TypeScript source codes, a simple Express.js web server applciation file, CSS files and all required static dependencies. The dynamic dependencies for compiling and building JavaScript source file are defined in *package.json* file which can be installed via ```npm install``` command.
+The project includes complete TypeScript source codes, a simple Express.js web server applciation file, CSS files and all required static dependencies. All dynamic dependencies for compiling and building JavaScript source file are defined in *package.json* file which can be installed via ```npm install``` command.
 
 The project includes the following files and folder
 - *src/* folder: The folder that contains all TypeScript source files
@@ -63,7 +65,12 @@ The project includes the following files and folder
 ## References
 For further details, please check out the following resources:
 * [Thomson Reuters Elektron WebSocket API page](https://developers.thomsonreuters.com/websocket-api) on the [Thomson Reuters Developer Community](https://developers.thomsonreuters.com/) web site.
+* [Developer Webinar Recording: Introduction to Electron Websocket API](https://www.youtube.com/watch?v=CDKWMsIQfaw)
 * [TypeScript programming language: Documentation](https://www.typescriptlang.org/docs/home.html).
 * [Mozilla Developer Network: Web Workers API page](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)
 
 For any question related to this article or Elektron WebSocket API page, please use the Developer Community [Q&A Forum](https://community.developers.thomsonreuters.com/).
+
+### Change logs
+- 21 December 2017: Fixed UI, change service name to be optional parameter, Add README.md content
+- 11 January 2018: Now the application can handle subscription IDs.

images/application_screen.png

@@ -61,11 +61,14 @@ class ItemRequestMsg implements JSONItemRequestMsg {
 
 class ItemRequestMsgKey implements JSONItemRequestKey {
   Name: string;
-  Service: string;
+  Service?: string;
 
-  constructor(Name: string, Service: string) {
+  constructor(Name: string, Service?: string) {
     this.Name = Name;
-    this.Service = Service;
+    if (Service !==''){
+      this.Service = Service;
+    }
+    
   }
 }
 

src/json_msg_classes.ts

@@ -23,10 +23,10 @@ export interface JSONItemRequestMsg {
     Key: JSONItemRequestKey;
 }
 
-//Interface for Market Price domain item request's key attribute JSON message
+//Interface for Market Price domain item request's key attribute JSON message, service name is an optional 
 export interface JSONItemRequestKey {
     Name: string;
-    Service: string;
+    Service?: string;
 }
 
 //Interface for close JSON message

src/json_msg_interface.ts

@@ -8,6 +8,7 @@ const protocol: string = "tr_json2";
 const loginID: number = 1;
 const loginDomain: string = "Login";
 let itemID: number = 0;
+let itemname:string = "";
 
 let btnConnect: any;
 let inMessagePre: any;
@@ -39,13 +40,19 @@ function onOpen(event: any): void {
 
 //An event listener to be called when a message is received from the server
 function onMessage(event: any): void {
-  console.log(JSON.stringify(event.data));
+  //console.log(JSON.stringify(event.data));
 
   let incomingdata = JSON.parse(event.data.toString());
 
   //Iterate each JSON message and send it to market_price_app.js
+  let data:any = null;
   for (let index = 0; index < incomingdata.length; index++) {
-   
+    data = incomingdata[index];
+    //console.log(`incoming msgtype is ${data.Type} domain is ${data.Domain} itemname = ${itemname}`);
+    if(data.Type === 'Refresh' && data.Key.Name === itemname){
+      //Push subscription item name and ID to selection box
+      pushIDstoDropDownMenu(data.Key.Name, data.ID);
+    }
     display(inMessagePre,JSON.stringify(incomingdata[index], undefined, 2));
     //If incoming message is PING (server ping)
     if (incomingdata[index].Type === "Ping") {
@@ -98,11 +105,24 @@ window.onload = () => {
   btnSubscribe.addEventListener("click", function() {
     let txtServiceName:any = document.getElementById("txtServiceName");
     let txtItemName:any = document.getElementById("txtItemName");
-    sendItemrequest(txtServiceName.value, txtItemName.value);
+    itemname = txtItemName.value;
+    sendItemrequest(txtServiceName.value, itemname);
   });
 
   btnUnSubscribe.addEventListener("click", function() {
-    sendItemCloserequest();
+    //get Selected ID to unsubscribe
+    let cb:any = document.getElementById("listenerCombo");
+    if(cb.selectedIndex === -1){ //If user does not select any ID, alert user
+      window.alert("Select ID first");
+      return;
+    }
+    //get unsubscribe ID from HTML select element
+    let unsubID:number = parseInt(cb.options[cb.selectedIndex].value);
+    //Unsubscribe 
+    sendItemCloserequest(unsubID);
+
+    //remove unsubscribe ID from HTML select element
+    cb.removeChild(cb.options[cb.selectedIndex]);
   });
 
 
@@ -129,7 +149,7 @@ function sendPong(): void {
 }
 
 //Create the Item Request JSON message from ItemRequestMsg class and send it to ADS WebSocket
-function sendItemrequest(service: string, itemname: string): void {
+function sendItemrequest(service: string, item_name: string): void {
   //set Item ID value
   if (itemID === 0) {
     itemID = loginID + 1;
@@ -139,19 +159,22 @@ function sendItemrequest(service: string, itemname: string): void {
 
   let itemrequest: ItemRequestMsg = new ItemRequestMsg(
     itemID,
-    itemname,
+    item_name,
     service
   );
 
   ws.send(JSON.stringify(itemrequest));
   display(outMessagePre,JSON.stringify(itemrequest));
+
+  //pushIDstoDropDownMenu(item_name, itemID);
 }
 
+
 //Create the Item Close Request JSON message from ItemCloseRequestMsg class and send it to ADS WebSocket
-function sendItemCloserequest(): void {
+function sendItemCloserequest(unsubID:number): void {
   //let closeitemrequestMsg: ItemCloseRequestMsg = new ItemCloseRequestMsg(itemID);
 
-  let closeitemrequestMsg: CloseMsg = new CloseMsg(itemID);
+  let closeitemrequestMsg: CloseMsg = new CloseMsg(unsubID);
 
   ws.send(JSON.stringify(closeitemrequestMsg));
   display(outMessagePre,JSON.stringify(closeitemrequestMsg));
@@ -168,3 +191,13 @@ function sendCloseLoginrequest(): void {
   ws.close();
   btnConnect.innerHTML = "Connect";
 }
+
+function pushIDstoDropDownMenu(itemname:string, id:number):void {
+
+  let cb:any = document.getElementById("listenerCombo");
+  let opt:any = document.createElement("option");
+  opt.value = id;
+  opt.text = `${itemname} ID ${id}`;
+  cb.options.add(opt);
+}
+

src/web_app.ts

@@ -20,34 +20,50 @@
     <!-- Application JS -->
     <script src="./dist/ws_app.js"></script>
 </head>
+
 <body>
     <!-- WebSocket connection UI input form -->
-    <h4>Thomson Reuters WebSocket API with Web Workers Example</h4>
+    <h4>Thomson Reuters WebSocket API Market Price Streaming Example with TypeScript</h4>
     <form class="form-inline">
 
-            <div class="form-group" >
-                <label for="txtServerurl">Server:</label> &nbsp;
-                <input type="text" id="txtServerurl" placeholder="ADS IP:WebSocket Port" class="form-control"> &nbsp;&nbsp;
-                <button id="btnConnect" type="button" class="btn btn-sm btn-primary">Connect</button>
-            </div>
-            <br/>
-            <br/>
-            <div class="form-group" >
-                <label for="txtUsername">User:</label> &nbsp;
-                <input type="text" id="txtUsername" class="form-control">&nbsp;&nbsp;
-                <button id="btnLogin" type="button" class="btn btn-sm btn-primary">Login</button> &nbsp;&nbsp;
-                <button id="btnLogout" type="button" class="btn btn-sm btn-primary">Logout</button>
-            </div>
-            <br/>
-            <br/>
-            <div class="form-group" >
-                <label for="txtServiceName">Name:</label> &nbsp;
-                <input type="text" id="txtServiceName" class="form-control" placeholder="ELEKTRON_DD"> &nbsp;&nbsp;
-                <label for="txtItemName">Name:</label>&nbsp;
-                <input type="text" id="txtItemName" value="" class="form-control"> &nbsp;&nbsp;
-                <button id="btnSubscribe" type="button" class="btn btn-sm btn-primary">Subscribe</button> &nbsp;&nbsp;
-                <button id="btnUnSubscribe" type="button" class="btn btn-sm btn-primary">Unsubscribe</button>
-            </div>
+        <div class="form-group">
+            <label for="txtServerurl">Server:</label> &nbsp;
+            <input type="text" id="txtServerurl" placeholder="ADS IP:WebSocket Port" class="form-control"> &nbsp;&nbsp;
+            <button id="btnConnect" type="button" class="btn btn-sm btn-primary">Connect</button>
+        </div>
+        <br/>
+        <br/>
+        <div class="form-group">
+            <label for="txtUsername">User:</label> &nbsp;
+            <input type="text" id="txtUsername" placeholder="user" class="form-control">&nbsp;&nbsp;
+            <button id="btnLogin" type="button" class="btn btn-sm btn-primary">Login</button> &nbsp;&nbsp;
+            <button id="btnLogout" type="button" class="btn btn-sm btn-primary">Logout</button>
+        </div>
+        <br/>
+        <br/>
+        <div class="form-group">
+            <label for="txtItemName">Item Name:</label>&nbsp;
+            <input type="text" id="txtItemName" placeholder="TRI.N" value="" class="form-control"> &nbsp;&nbsp;
+            <label for="txtServiceName">Service Name:</label> &nbsp;
+            <input type="text" id="txtServiceName" class="form-control" placeholder="[Optional]"> &nbsp;&nbsp;
+            <button id="btnSubscribe" type="button" class="btn btn-sm btn-primary">Subscribe</button> &nbsp;&nbsp;
+            <button id="btnUnSubscribe" type="button" class="btn btn-sm btn-primary">Unsubscribe</button>
+        </div>
+        <br/>
+        <br/>
+        <div class="form-group">
+            <label for="txtIDSubscription">Subscription IDs:</label>&nbsp;
+                <select id="listenerCombo" size="2"  class="form-control"></select>
+            <!--<div class="dropdown">
+                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
+                    aria-expanded="true">
+                    Subscription IDs:
+                    <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="dropdownIDs">
+                </ul>
+            </div>-->
+        </div>
     </form>
     <!-- Display outgoing messages and commands -->
     <h5>Outgoing Messages:</h5>