adding additional variable to be able to set HTTP route independent of the WS route

Author: dudash

README.md

@@ -33,7 +33,8 @@ Containerizing and pushing this app into your OpenShift cluster is easy with the
 >*(edit files and rerun `npx nodeshift` and it will update OpenShift for you)*
 >
 >*add the env config `--build.env DEBUG_INPUT=true` to true to see the input panel and allow setting highscores*
->*set the env var `--build.env API_SERVER_URL=route_to_api_service:80` to hook up to an API server (note this is the external openshift route not the service name)*
+>*set the env var `--build.env API_SERVER_URL=http://route_to_api_service:80` to hook up to an API server (note this is the external openshift route not the service name)*
+>*set the env var `--build-env API_SERVER_WEBSOCKET_URL=ws://route_to_api_service:80` to hook up to an API server (note this is the external openshift route not the service name)*
 
 Expose our app to outside the cluster
 > `oc expose service openshift-highscores-phaser-ui`
@@ -43,10 +44,14 @@ This is also pretty easy with the help of Source 2 Image (aka s2i). Run the foll
   >`oc new-app nodeshift/ubi8-s2i-web-app:latest~https://github.com/CodeCafeOpenShiftGame/openshift-highscores-phaser-ui --build-env OUTPUT_DIR=dist`
 
 >*add the env config `--build-env DEBUG_INPUT=true` to true to see the input panel and allow setting highscores*
->*set the env var `--build-env API_SERVER_URL=route_to_api_service:80` to hook up to an API server (note this is the external openshift route not the service name)*
+>*set the env var `--build-env API_SERVER_URL=http://route_to_api_service:80` to hook up to an API server (note this is the external openshift route not the service name)*
+>*set the env var `--build-env API_SERVER_WEBSOCKET_URL=ws://route_to_api_service:80` to hook up to an API server (note this is the external openshift route not the service name)*
 
 Expose our app to outside the cluster
 > `oc expose service openshift-highscores-phaser-ui`
 
+### Other Notes
+* `API_SERVER_URL` and `API_SERVER_WEBSOCKET_URL` can use `https` and `wss` as long as they a both set to be secure
+
 ## Credit & Thanks
 Thanks to Richard Davey @ Phaser for the [tutorials here](https://phaser.io/learn/community-tutorials) that this was initially based upon.

package.json

@@ -9,15 +9,15 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/dudash/openshift-highscores-phaser-ui.git"
+    "url": "git+https://github.com/CodeCafeOpenShiftGame/openshift-highscores-phaser-ui.git"
   },
   "author": "Jason Dudash <[email protected]>",
   "license": "Apache-2.0",
   "licenseUrl": "http://www.apache.org/licenses/",
   "bugs": {
-    "url": "https://github.com/dudash/openshift-highscores-phaser-ui/issues"
+    "url": "https://github.com/CodeCafeOpenShiftGame/openshift-highscores-phaser-ui/issues"
   },
-  "homepage": "https://github.com/dudash/openshift-highscores-phaser-ui",
+  "homepage": "https://github.com/CodeCafeOpenShiftGame/openshift-highscores-phaser-ui",
   "devDependencies": {
     "@babel/core": "^7.7.2",
     "@babel/preset-env": "^7.7.1",

src/highscoreScene.js

@@ -62,14 +62,16 @@ export class Highscore extends Phaser.Scene {
 
     getLatestScores() {
         // call the REST API service and display them
-        var apiServer = 'localhost:5000';  // default
+        var apiServer = 'http://localhost:5000';  // default
         if (process.env.API_SERVER_URL != null) {
             console.warn('overriding the API server to be: '+ process.env.API_SERVER_URL);
             apiServer = process.env.API_SERVER_URL;
         }
-        const uriPrefix = 'http://';
+        if (!apiServer.startsWith('http')) {  // add http if not already set
+            apiServer = 'http://' + apiServer;
+        }
         var self=this;
-        axios.get(uriPrefix + apiServer + '/scores/topten/')
+        axios.get(apiServer + '/scores/topten/')
         .then(function (response) {
             self.displayLatestScores(response.data);
         })

src/index.js

@@ -30,16 +30,18 @@ game.events.off('hidden', game.onHidden, game, false); // not sure this is neede
 game.events.off('visible', game.onVisible, game, false); 
 
 // provide websockets to scenes that care
-var apiServer = 'localhost:5000';  // default
-if (process.env.API_SERVER_URL != null) {
-  console.warn('ENV: overriding the API server to be: '+ process.env.API_SERVER_URL);
-  apiServer = process.env.API_SERVER_URL;
+
+var apiServerWebsocket = 'ws://localhost:5000';  // default
+if (process.env.API_SERVER_WEBSOCKET_URL != null) {
+  console.warn('ENV: overriding the API websocket server to be: '+ process.env.API_SERVER_WEBSOCKET_URL);
+  apiServerWebsocket = process.env.API_SERVER_WEBSOCKET_URL;
 }
 const clientId = uuidv1();
-let webSocketURL = apiServer + '/notifications/' + clientId;
+let webSocketURL = apiServerWebsocket + '/notifications/' + clientId;
 if (!webSocketURL.startsWith('ws')) {  // add ws if not already set
   webSocketURL = 'ws://' + webSocketURL;
 }
+
 global.ws = new WebSocket(webSocketURL);
 global.ws.onopen = function open() {console.log('connected to ' + webSocketURL);};
 global.ws.onclose = function close() {console.log('disconnected from ' + webSocketURL);};

webpack/base.js

@@ -34,6 +34,7 @@ module.exports = {
       WEBGL_RENDERER: JSON.stringify(true),
       'process.env.DEBUG_INPUT': JSON.stringify(process.env.DEBUG_INPUT),
       'process.env.API_SERVER_URL': JSON.stringify(process.env.API_SERVER_URL),
+      'process.env.API_SERVER_WEBSOCKET_URL': JSON.stringify(process.env.API_SERVER_WEBSOCKET_URL)
     }),
     new HtmlWebpackPlugin({
       template: "./index.html"