improved websockets

backend/gateway/src/webSocket.js

@@ -6,22 +6,45 @@ const http = require("http");
 
 wss.on('connection', function connection(ws) {
   ws.on('message', function incoming(message) {
-    console.log('received: %s', message);
-    getPointStream(ws);
+    parseMessage(ws,message);
   });
 });
 
 
+function parseMessage(ws,message){
+  const jsonMessage = JSON.parse(message);
+
+  switch(jsonMessage["type"]){
+    case "requestPointStream":
+      console.log("Requested stream");
+      getPointStream(ws);
+      break;
+    case "sendDataRow":
+      console.log(jsonMessage);
+      echoPoint(ws,jsonMessage["row"]);
+      break;
+    default:
+      console.log("Error! Unknown request:" + jsonMessage["type"]);
+    }
+}
+
+
+function echoPoint(ws,dataRow){
+  console.log(dataRow);
+  ws.send(JSON.stringify({"point":{"id": dataRow[0]
+                                  ,"x":dataRow[1],
+                                   "y":dataRow[2]}}));
+}
+
+
 function getPointStream(ws){
-  var requestURL = `${projectorUrl}/generatePointStream`;
-    
+  var requestURL = `${projectorUrl}/generatePointStream`;    
    http.get(requestURL, res =>{
 
     res.on("data", data =>{
       sendDataStream(data,ws);
     })
-  })  
-  
+  })    
 }
 
 

frontend/src/components/webSocketStreaming.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script>
-//const Papa = require("papaparse");
+const Papa = require("papaparse");
 
 export default {
   name: "webSocketClient",
@@ -54,61 +54,55 @@ export default {
   },
 
   created: function () {
+    let self = this;
+
     this.connection = new WebSocket("ws://localhost:9898");
-    this.connection.onopen = this.openConnection;
-    this.connection.onerror = this.errorConnection;
-    this.connection.onmessage = this.parseMessage;
-    this.connection.onclose = this.closeConnection;
-  },
-  methods: {
-    openConnection(event) {
-      this.succesAlert = true;
-      this.launched = true;
+
+    this.connection.onopen = function (event) {
+      self.succesAlert = true;
+      self.launched = true;
       console.log(event);
-    },
-    errorConnection(event) {
-      this.launched = true;
+    };
+
+    this.connection.onerror = function (event) {
+      self.launched = true;
       console.log(event);
-    },
-    closeConnection(event) {
+    };
+
+    this.connection.onmessage = function (event) {
+      const pointJSON = JSON.parse(event.data);
+      self.$emit("newPoint", pointJSON["point"]);
+    };
+
+    this.connection.onclose = function (event) {
       console.log("Closed");
       console.log(event);
-    },
-    sendTrainingSet(row) {
-      console.log(row);
-    },
-    parseMessage(event) {
-      const pointJSON = JSON.parse(event.data);
-      this.$emit("newPoint", pointJSON["point"]);
-    },
+    };
+  },
+  methods: {
     submitFiles() {
+      let self = this;
       //Start up normal connection
-
-      this.connection.send("requesting points");
-      return;
-      /*if (!this.file) {
+      if (!this.file) {
         console.log("there is no file.");
+        this.connection.send(JSON.stringify({type: "requestPointStream"}))
         return;
       }
 
-
-
-
       console.log("Filesize: ", this.file.size);
-      const sendTrainingSet = this.sendTrainingSet;
       Papa.parse(this.file, {
         worker: true,
         step: function (row) {
-          this.connection.send(row.data);
+          self.connection.send(
+            JSON.stringify({ type: "sendDataRow", 
+                              row: row.data })
+          );
         },
         complete: function () {
           console.log("All done!");
         },
       });
-
-      console.log("currently not sending dataset, retrieving generated points");
-
-      return;*/
+      return;
     },
   },
 };