Fixed scoreboard ws communication

Signed-off-by: Ruben Romero Montes <[email protected]>

README.md

@@ -45,13 +45,14 @@ This laboratory is intended to be deployed using [minishift](https://github.com/
       oc login -u system:admin
   ```
 
-1. Download the add-ons and install the ones you need. Check the [v3.11.0 release](https://github.com/ruromero/break-fix/releases/tag/v3.11.0):
+1. Download the add-ons and install the ones you need. Check the [v3.11 release](https://github.com/ruromero/break-fix/releases/tag/v3.11):
 
   ```[bash]
-  $ wget https://github.com/ruromero/break-fix/releases/download/v3.11.0/break-fix-3.11.0.tar.gz
-  $ tar -xf break-fix-3.11.0.tar.gz
-  $ ./minishift addons install break-fix scoreboard
+  $ wget https://github.com/ruromero/break-fix/releases/download/v3.11/break-fix-3.11.tar.gz
+  $ tar -xf break-fix-3.11.tar.gz
+  $ ./minishift addons install break-fix
   Addon 'break-fix' installed
+  $ ./minishift addons install scoreboard
   Addon 'scoreboard' installed
   ```
 
@@ -65,7 +66,7 @@ This laboratory is intended to be deployed using [minishift](https://github.com/
 1. Install the main break-fix addon that contains the `manager-app`, `demoapp` and `tty`. Provide the SCOREBOARD_HOST and SCOREBOARD_PORT variables to connect to an existing scoreboard. By default it will be our GCP hosted server (`35.204.123.207:8080`) which might not be online.
 
   ```[bash]
-  $ ./minishift addons apply break-fix --addon-env SCOREBOARD_HOST=scoreboard-scoreboard.192.168.42.95.nip.io --addon-env SCOREBOARD_PORT=80
+  $ ./minishift addons apply break-fix --addon-env SCOREBOARD_HOST=scoreboard.scoreboard.svc.cluster.local --addon-env SCOREBOARD_PORT=8080
   -- Applying addon 'break-fix':..........
   ```
 

minishift-addons/scoreboard/scoreboard-template.yaml

@@ -14,6 +14,8 @@ objects:
     ports:
     - name: web
       port: 8080
+    - name: ws
+      port: 40510
     selector:
       app: ${APP_NAME}
 - apiVersion: v1
@@ -28,6 +30,18 @@ objects:
     to:
       kind: Service
       name: ${APP_NAME}
+- apiVersion: v1
+  kind: Route
+  metadata:
+    labels:
+      app: ${APP_NAME}
+    name: ws-${APP_NAME}
+  spec:
+    port:
+      targetPort: ws
+    to:
+      kind: Service
+      name: ${APP_NAME}
 - apiVersion: v1
   kind: DeploymentConfig
   metadata:
@@ -51,6 +65,10 @@ objects:
         - env:
           - name: DB_PATH
             value: /data
+          - name: WS_ROUTE_PREFIX
+            value: "ws-"
+          - name: WS_ROUTE_PORT
+            value: "80"
           name: ${APP_NAME}
           image: ruromero/scoreboard:3.11
           imagePullPolicy: IfNotPresent

minishift-addons/scoreboard/scoreboard.addon.remove

@@ -0,0 +1,4 @@
+# Name: scoreboard
+# Description: Removes the Scoreboard project
+
+oc delete project scoreboard

scoreboard/modules/wsapi.js

@@ -4,7 +4,7 @@ const WebSocketServer = WebSocket.Server;
 wss = new WebSocketServer({port: 40510});
 
 wss.on('connection', function (ws) {
-  ws.send('Connected at: ' + `${new Date()}`);
+  ws.send('{"message":"Connected at: ' + `${new Date()}` + '"}');
 });
 
 exports.broadcast = (type, data) => {
@@ -17,3 +17,12 @@ exports.broadcast = (type, data) => {
     }
   });
 };
+
+exports.getConfig = () => {
+  port = process.env.WS_ROUTE_PORT || wss.options.port;
+  prefix = process.env.WS_ROUTE_PREFIX || '';
+  return {
+    port: port,
+    prefix: prefix
+  };
+}

scoreboard/public/javascripts/common.js

@@ -1,7 +1,11 @@
 const loc = window.location;
-let new_uri = "ws://" + loc.hostname + ':40510';
 
-const appSocket = new WebSocket(new_uri);
+fetch('/api/ws-config')
+  .then(response => response.json())
+  .then(config => {
+    let new_uri = "ws://" + config.prefix + loc.hostname + ':' + config.port;
+    initSocket(new WebSocket(new_uri));
+  });
 
 function getPosition(score) {
   const rows = document.getElementById('scores').tBodies[0].getElementsByTagName('tr');
@@ -57,19 +61,22 @@ function clearScores() {
   }
 }
 
-appSocket.onmessage = (event) => {
-  console.log('event received: ' + event.data);
-  const object = JSON.parse(event.data);
-  if(object.type === 'addScore') {
-    removeScore(object.data.gameId);
-    addScore(object.data);
-    updateRanks();
-  }
-  if(object.type === 'removeScore') {
-    removeScore(object.data.gameId);
-    updateRanks();
-  }
-  if(object.type === 'clearScores') {
-    clearScores();
-  }
-};
+function initSocket(appSocket) {
+  appSocket.onmessage = (event) => {
+    console.log('event received: ' + event.data);
+    const object = JSON.parse(event.data);
+    if(object.type === 'addScore') {
+      removeScore(object.data.gameId);
+      addScore(object.data);
+      updateRanks();
+    }
+    if(object.type === 'removeScore') {
+      removeScore(object.data.gameId);
+      updateRanks();
+    }
+    if(object.type === 'clearScores') {
+      clearScores();
+    }
+  };
+}
+

scoreboard/routes/api.js

@@ -1,12 +1,19 @@
 const express = require('express');
 const router = express.Router();
 const Scores = require('../modules/scores');
+const WSapi = require('../modules/wsapi');
 
 router.get('/', (req, res) => {
   console.log("Ping received");
   res.send('');
 });
 
+router.get('/ws-config', (req, res) => {
+  res.send(
+    WSapi.getConfig()
+  );
+});
+
 router.post('/score', (req, res) => {
   console.log(`Adding score: [${req.body.score.player} - ${req.body.score.points} points]`);
   const gameId = req.body.gameId;