change logs:

1. Change code logic to let service name is an optional parameter
2. Revise README.md both grammar and detail
3. Revise UI of index.html

Author: Wasin Waeosri

README.md

@@ -5,7 +5,7 @@
 
 The web browsers JavaScript runtime is a single-threaded environment by default. However, the HTML standard lets developers implement multi threads JavaScript application in web browser by introducing the [Web Workers](https://html.spec.whatwg.org/multipage/workers.html) feature that lets web browsers run JavaScripts in a main thread and a background thread (workers thread).
 
-This example shows how to implement the Elektron WebSocket API with JavaScript web application with Web Workers. It lets the Web Workers thread handles a connection logic with ADS WebSocket while the main thread handles the UI interaction events and displaying data.
+This example shows how to implement the Elektron WebSocket API with JavaScript web application with Web Workers. It allows the Web Workers thread to handle the connection logic with ADS WebSocket server while the main thread handles the UI interaction events and displaying data.
 
 There are two types of the Web Workers, [Dedicated Workers](https://html.spec.whatwg.org/multipage/workers.html#dedicated-workers-and-the-worker-interface) and [Shared Workers](https://html.spec.whatwg.org/multipage/workers.html#sharedworker). This example covers only how to implement the Elektron WebSocket API with JavaScript web browser application with Dedicated Workers.
 
@@ -18,7 +18,7 @@ The example supports Chrome, Firefox and IE11 (based on the WebSocket and Web Wo
 This example requires the following dependencies softwares.
 1. [Node.js](https://nodejs.org/en/) - version 6.10 or higher.
 2. [npm](https://www.npmjs.com/) package manager (included in Node.js)
-3. [Express.js](https://expressjs.com/) framework
+3. [Express.js](https://expressjs.com/) 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/) 
@@ -35,7 +35,7 @@ The web application contains the following example files and folder:
 5. libs/jquery-3.2.1.min.js: jQuery library file
 6. bootstrap/css, bootstarp/fonts and bootstrap/js folders: The folders for Bootstrap CSS and libraries files
 7. node_modules folder: Folder for Node.js and Express.js modules for web server running
-8. server.js: A web server application
+8. server.js: A simple web server application
 9. package.json: The Project npm dependencies file. 
 
 ## How to run this example
@@ -57,6 +57,7 @@ The web application contains the following example 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)
 * [Mozilla Developer Network: Web Workers API page](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API).
 * [Google HTML5 Rocks: The Basics of Web Workers page](https://www.html5rocks.com/en/tutorials/workers/basics/)
 

app/market_price_app.js

@@ -94,6 +94,8 @@
 
             //$('#messagesPre').html(`Receive: STATUS_RESP:<br/> ${JSON.stringify(data, undefined, 2)}`); //Status_resp
             $('#messagesPre').html('Receive: STATUS_RESP:<br/>' + JSON.stringify(data, undefined, 2)); //Display Status_resp
+        } else if (msgtype === 'Error'){//If incoming message is ERROR_RESP
+            $('#messagesPre').html('Receive: ERROR_RESP:<br/>' + JSON.stringify(data, undefined, 2)); //Display Status_resp
         } else if (msgtype === 'Ping') { //If incoming message is PING (server ping)
 
             //$('#messagesPre').html(`Recieve Ping:</br> ${JSON.stringify(data, undefined, 2)}`); //Server Ping
@@ -153,14 +155,19 @@
         } else {
             itemID += 1;
         }
-        //create Market Price request message
+
+    
+        //create Market Price request message, if user does not set service name, let the ADS use default service
         let itemrequestMsg = {
             'ID': itemID,
             'Key': {
-                'Name': itemname,
-                'Service': service
+                'Name': itemname
             }
         };
+        //if user set service name, request interested service name 
+        if(service !==''){
+            itemrequestMsg.Key.Service = service
+        } 
 
         let itemrequestObj = {
             'commandObj': itemrequestMsg,

index.html

@@ -30,22 +30,22 @@
         <h4>Thomson Reuters WebSocket API with Web Workers Example</h4>
         <form class="form-inline">
             <div class="form-group">
-                <label for="txtServerurl">Server:</label> &nbsp; <input type="text" id="txtServerurl" class="form-control">&nbsp;&nbsp;
+                <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;
+                <label for="txtUsername" placeholder="userk">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" value="ELEKTRON_DD"
-                    class="form-control"> &nbsp;&nbsp;
-                <label for="txtItemName">Name:</label>&nbsp;
-                <input type="text" id="txtItemName" value="" class="form-control"> &nbsp;&nbsp;
+                <!--<label for="txtServiceName">Service Name:</label> &nbsp; <input type="text" id="txtServiceName" class="form-control"> &nbsp;&nbsp;-->
+                <label for="txtItemName">Item Name:</label>&nbsp;
+                <input type="text" id="txtItemName" value="" placeholder="TRI.N" 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>