Feat: UserflowDataGatherer send correct datas; Feat: UserflowPredictorWebserver receive data and create userflowmap

Predictor/PredictorWebService/.eslintrc.yaml

@@ -0,0 +1,12 @@
+# .eslintrc.yaml
+---
+  extends: airbnb-base
+  env:
+    node: true
+    mocha: true
+    es6: true
+  parser: typescript-eslint-parser
+  parserOptions:
+    sourceType: module
+    ecmaFeatures: 
+      modules: true

Predictor/PredictorWebService/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}

Predictor/PredictorWebService/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "predictorservice",
+  "version": "1.0.0",
+  "description": "",
+  "main": "main.js",
+  "dependencies": {
+    "@types/express": "^4.16.1",
+    "body-parser": "^1.18.3",
+    "canvas": "^2.4.1",
+    "cors": "^2.8.5",
+    "express": "^4.16.4",
+    "nodemon": "^1.18.10",
+    "ws": "^6.2.1"
+  },
+  "devDependencies": {
+    "@types/node": "^11.13.0",
+    "@types/ws": "^6.0.1",
+    "ts-node": "^8.0.3",
+    "typescript": "^3.4.2",
+    "typescript-eslint-parser": "^22.0.0"
+  },
+  "scripts": {
+    "build": "tsc -w",
+    "dev": "ts-node ./src/main.ts",
+    "start": "nodemon ./dist/main.js",
+    "prod": "npm run build && npm run start"
+  },
+  "author": "",
+  "license": "ISC"
+}

Predictor/PredictorWebService/src/main.ts

@@ -0,0 +1,9 @@
+import { PredictorWebService } from "./predictor-web-service/PredictorWebService";
+
+function main() { 
+    const predictorWebService = new PredictorWebService('/', 4000, 4100);
+    predictorWebService.startExpress();
+    predictorWebService.startWebSocket();
+}
+
+main();

Predictor/PredictorWebService/src/predictor-web-service/PredictorWebService.ts

@@ -0,0 +1,126 @@
+import express from 'express';
+import * as WebSocket from 'ws';
+import * as http from 'http';
+import cors from 'cors';
+import * as bodyParser from "body-parser";
+import fs from 'fs';
+import {Data} from "../../../../DataGatherer/src/data/Data";
+import {createCanvas, Image} from "canvas";
+
+export class PredictorWebService {
+
+    private portWebSocket: number;
+    private portApi: number;
+    private url: string;
+    private app: express.Application;
+    private httpServer: http.Server; 
+    private wss: WebSocket.Server;
+
+    constructor(url: string, portApi: number, portWebSocket: number) {
+        this.url = url;
+        this.portApi = portApi;
+        this.portWebSocket = portWebSocket;
+    }
+
+    public startWebSocket() {
+        this.httpServer = http.createServer(this.app);
+        this.wss = new WebSocket.Server({port: this.portWebSocket});
+
+
+        this.wss.on('connection', (ws: WebSocket) => {
+            ws.on('message', (message: string) => {
+                console.log('received: %s', message);
+                ws.send(`Hello, you sent -> ${message}`);
+            });
+        });
+    }
+
+    public startExpress() {
+        const that = this;
+        this.app = express();
+        this.app.use(cors());
+        this.app.use(bodyParser.json());
+        this.app.use(bodyParser.urlencoded({ extended: false }));
+
+        this.app.post('/predict', function (req, res) {
+            function generateFakeResponse() {
+                return Array.from({length: 20}, () => Math.random().toPrecision(2));
+            }
+            console.log('Request prediction');
+            res.send(generateFakeResponse());
+        });
+
+        this.app.post('/trainData', function (req, res) {
+            console.log('Received data');
+            const data: Array<Data> = req.body.map(d => new Data(d.name, d.data, d.size, d.timestamp));
+            console.dir(data);
+            const image = data.find(val => {
+               return val.getName() === 'screen';
+            });
+            const mouseClicks = data.filter(val => {
+                return val.getName() === 'click';
+            });
+            const mouseMovements = data.filter(val => {
+                return val.getName() === 'mousemove';
+            });
+            const keyboard = data.filter(val => {
+                return val.getName() === 'keydown';
+            });
+            if(image){
+                const canvas = createCanvas(image.getSize().width, image.getSize().height);
+                const ctx = canvas.getContext('2d');
+                const img = new Image();
+                img.onload = () => {
+                    that.printImage(img, ctx);
+                    that.printMouseClick(mouseClicks, ctx);
+                    that.printMouseMove(mouseMovements, ctx);
+                    that.printKeyboard(keyboard, ctx);
+                    const base64data = canvas.toBuffer();
+                    fs.writeFile('./trainingDatas/' + image.getTimestamp() + '.png', base64data, 'base64', function(err){
+                        if (err) throw err;
+                        console.log('File saved.');
+                        res.send('ok - image received');
+                    })
+                };
+                img.onerror = err => { throw err };
+                img.src = image.getData();
+
+
+            } else {
+                res.send('ok - only datas');
+            }
+        });
+
+        this.app.listen(this.portApi, () => {
+            console.log('PredictorWebService is up and running on port: %d', this.portApi);
+        }); 
+    }
+
+    printMouseClick(mouseclicks: Array<Data>, ctx: any) {
+        ctx.strokeStyle = 'rgba(219, 10, 91, 0.5)';
+        ctx.lineWidth = 5;
+        ctx.beginPath();
+        for(const move of mouseclicks){
+            ctx.strokeRect(move.getData().x, move.getData().y,10, 10);
+        }
+        ctx.stroke();
+    }
+
+    printMouseMove(mousemoves: Array<Data>, ctx: any) {
+        ctx.strokeStyle = 'rgba(0,0,0,0.5)';
+        ctx.lineWidth = 5;
+        ctx.beginPath();
+        for(const move of mousemoves){
+            ctx.lineTo(move.getData().x, move.getData().y);
+        }
+        ctx.stroke();
+    }
+
+    printKeyboard(keyboard: Array<Data>, ctx: any) {
+
+    }
+
+    printImage(image: Image, ctx: any){
+        ctx.drawImage(image, 0, 0);
+    }
+}

Predictor/PredictorWebService/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "outDir": "dist",
+    "experimentalDecorators": true,
+    "target": "es5",
+    "jsx": "react",
+    "lib": [
+      "dom",
+      "es6"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "compileOnSave": true
+}