Merge branch 'b2_servicenamelogic'

1. Change service name to be an optional parameter
2. Change server port to 8080
3. Fix UI issue

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.
 
@@ -16,13 +16,13 @@ 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.
-2. [npm](https://www.npmjs.com/) package manager (included in Node.js)
-3. [Express.js](https://expressjs.com/) framework
+1. [Node.js](https://nodejs.org/en/) runtime - version 8.9.3 or higher.
+2. [npm](https://www.npmjs.com/) package manager (included with Node.js runtime)
+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/) 
-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. 
 
@@ -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
@@ -45,18 +45,19 @@ The web application contains the following example files and folder:
 ![npm command display](images/npm_install.png "npm command display")
 
 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: ```set https_proxy=http://<proxy.server>:<port>```
-4. Run ```$> node server.js``` in the command prompt to start the web server at HTTP port 3000
+4. Run ```$> node server.js``` in the command prompt to start the web server at HTTP port 8080
 
 ![application display](images/run_server.png "run server")
 
-5. Open web browser (IE11, Chorme and Firefox), then navigate to index.html of the web server at ```http://localhost:3000/index.html```
+5. Open web browser (IE11, Chorme and Firefox), then navigate to index.html of the web server at ```http://localhost:8080/index.html```
 
 ![application display](images/application_screen.png "application display")
 
 
 ## 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,

images/application_screen.png

@@ -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" >User:</label> &nbsp; <input type="text" id="txtUsername" class="form-control" placeholder="user">&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>

images/run_server.png

@@ -4,7 +4,7 @@ let path = require('path');
 const web_path = path.join(__dirname, './');
 
 const app = express();
-const port = 3000;
+const port = 8080;
 
 app.use(express.static(web_path));