Uploading assignment

.gitignore

+/node_modules
+.vscode/
\ No newline at end of file

app/index.js

+'use strict';
+const path = require('path');
+const WebSocket = require('ws');
+const express = require('express');
+const bodyParser = require('body-parser');
+const Measurements = require('../db/db').Measurements;
+const process = require('process');
+const app = express();
+const port = 6500;
+const wsPort = 2000;
+const wss = new WebSocket.Server({
+  port: wsPort
+});
+
+/**
+ * INITIALIZE EXPRESS
+ * SET DIRECTORY
+ */
+
+app.use(bodyParser.urlencoded({ extended: true }));
+
+app.use((request, response, next) => {
+  console.log(`request.url=${request.url}`);
+  next();
+});
+
+app.use(express.static(path.join(__dirname, '../public')));
+
+/**
+ * Post measurements to the server
+ *
+ * Adds measurements to database
+ */
+app.post('/measurements', bodyParser.json(), (request, response, next) => {
+  const measurement = request.body;
+
+  // Does the measurement contain the necessary info
+  if (measurement.time && measurement.temperature && measurement.humidity) {
+    // Add the measurement to the database
+    Measurements.create(measurement, (err, results) => {
+      if (err) return next(err);
+      // Share with current clients
+      sendToWSClients(JSON.stringify(measurement));
+    });
+    response.status(200);
+  } else {
+    response.status(400);
+  }
+  response.send();
+});
+
+/**
+ * Get all/limited amount of measurements
+ */
+app.get('/measurements', (request, response, next) => {
+  const limit = request.query.limit;
+
+  if (request.accepts('application/json') && !request.accepts('text/html')) {
+    // If no limit
+    if (limit === undefined) {
+      // Return all measurements
+      Measurements.all((err, measurements) => {
+        if (err) return next(err);
+        response.contentType('application/json');
+        response.end(JSON.stringify(measurements));
+      });
+    } else {
+      // Else return a limited amount of measurements
+      Measurements.limit(parseInt(limit), (err, measurements) => {
+        if (err) return next(err);
+        response.contentType('application/json');
+        response.end(JSON.stringify(measurements));
+      });
+    }
+  } else {
+    // If request is not json, then redirect
+    response.redirect('/');
+  }
+});
+
+// Start listening for requests
+app.listen(port, err => {
+  if (err) return console.error(`An error occurred: ${err}`);
+  console.log(`Listening on http://localhost:${port}/`);
+});
+
+// waits for connection to be established from the client
+// the callback argument ws is a unique for each client
+wss.on('connection', ws => {
+  // runs a callback on message event
+  ws.on('message', data => {
+    // sends the data to all connected clients
+    console.log('wss:', data);
+    sendToWSClients(data);
+  });
+  ws.isAlive = true;
+  ws.on('pong', heartbeat);
+});
+
+// Method for sending data to every client
+function sendToWSClients (data) {
+  wss.clients.forEach(client => {
+    if (client.readyState === WebSocket.OPEN) {
+      client.send(data);
+    }
+  });
+}
+
+// heartbeat for clients-connection
+function heartbeat () {
+  this.isAlive = true;
+}
+
+// Interval for closing idle or ended clients
+const interval = setInterval(function ping () {
+  wss.clients.forEach(function each (ws) {
+    if (ws.isAlive === false) return ws.terminate();
+
+    ws.isAlive = false;
+    ws.ping();
+  });
+}, 30000);
+
+// When the WS server closes
+wss.on('close', function close () {
+  clearInterval(interval);
+  console.log('the interval has been cleared');
+});
+
+// Closing the server
+process.on('SIGINT', () => {
+  console.log('SIGINT received; exiting...');
+  wss.close();
+  process.exit();
+});

db/db.js

+'use strict';
+const fs = require('fs');
+const mysql = require('mysql');
+
+// Read identity
+const Identity = JSON.parse(
+  fs.readFileSync('../../secrets/SECRET.json', 'utf8')
+);
+
+// Setup SQL pool
+const pool = mysql.createPool({
+  host: 'itwot00.cs.au.dk',
+  user: Identity.user,
+  password: Identity.password,
+  database: Identity.database
+});
+
+// Create table if they do NOT exist
+pool.getConnection((err, connection) => {
+  if (err) throw err;
+  connection.query(
+    'CREATE TABLE IF NOT EXISTS measurement_b (id INTEGER NOT NULL AUTO_INCREMENT PRIMARY KEY, time BIGINT, temperature INT, humidity INT);',
+    err => {
+      if (err) throw err;
+    }
+  );
+  connection.release();
+});
+
+/**
+ * Class for all Measurements
+*/
+class Measurements {
+  // Get all details about all measurements
+  static all (callback) {
+    pool.getConnection((err, connection) => {
+      if (err) throw err;
+      connection.query('SELECT * FROM measurement_b ORDER BY time DESC', (err, results, fields) => {
+        callback(err, results);
+        connection.release();
+      });
+    });
+  }
+
+  // Get all details about a limited amount of measurements
+  static limit (limit, callback) {
+    pool.getConnection((err, connection) => {
+      if (err) throw err;
+      connection.query('SELECT * FROM measurement_b ORDER BY time DESC LIMIT ?', [limit], (err, results, fields) => {
+        callback(err, results);
+        connection.release();
+      });
+    });
+  }
+
+  // Insert data into the database
+  static create (measurement, callback) {
+    pool.getConnection((err, connection) => {
+      if (err) throw err;
+      connection.query(
+        'INSERT INTO measurement_b(time, temperature, humidity) VALUES (?, ?, ?)',
+        [measurement.time, measurement.temperature, measurement.humidity],
+        (err, results, fields) => {
+          callback(err, results);
+          connection.release();
+        }
+      );
+    });
+  }
+
+  // Closing the sql connection
+  static end () {
+    pool.end(err => {
+      if (err) throw err;
+    });
+  }
+}
+
+module.exports = pool;
+module.exports.Measurements = Measurements;

index.js

+'use strict';
+require('./app/index');

package-lock.json

+{
+  "name": "live-greetings",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "accepts": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
+      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+      "requires": {
+        "mime-types": "~2.1.24",
+        "negotiator": "0.6.2"
+      }
+    },
+    "array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+    },
+    "bignumber.js": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.0.0.tgz",
+      "integrity": "sha512-t/OYhhJ2SD+YGBQcjY8GzzDHEk9f3nerxjtfa6tlMXfe7frs/WozhvCNoGvpM0P3bNf3Gq5ZRMlGr5f3r4/N8A=="
+    },
+    "body-parser": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
+      "requires": {
+        "bytes": "3.1.0",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "on-finished": "~2.3.0",
+        "qs": "6.7.0",
+        "raw-body": "2.4.0",
+        "type-is": "~1.6.17"
+      }
+    },
+    "bytes": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
+    },
+    "content-disposition": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
+      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
+    },
+    "cookie": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+    },
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
+    },
+    "debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "requires": {
+        "ms": "2.0.0"
+      }
+    },
+    "depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+    },
+    "destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
+    },
+    "express": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
+      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
+      "requires": {
+        "accepts": "~1.3.7",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.19.0",
+        "content-disposition": "0.5.3",
+        "content-type": "~1.0.4",
+        "cookie": "0.4.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "~1.1.2",
+        "fresh": "0.5.2",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.5",
+        "qs": "6.7.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.1.2",
+        "send": "0.17.1",
+        "serve-static": "1.14.1",
+        "setprototypeof": "1.1.1",
+        "statuses": "~1.5.0",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      }
+    },
+    "finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "statuses": "~1.5.0",
+        "unpipe": "~1.0.0"
+      }
+    },
+    "forwarded": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
+      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+    },
+    "http-errors": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
+      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
+      "requires": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.1",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.0"
+      }
+    },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+    },
+    "ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
+    },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
+    },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+    },
+    "mime-db": {
+      "version": "1.43.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.43.0.tgz",
+      "integrity": "sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ=="
+    },
+    "mime-types": {
+      "version": "2.1.26",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.26.tgz",
+      "integrity": "sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==",
+      "requires": {
+        "mime-db": "1.43.0"
+      }
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "mysql": {
+      "version": "2.18.1",
+      "resolved": "https://registry.npmjs.org/mysql/-/mysql-2.18.1.tgz",
+      "integrity": "sha512-Bca+gk2YWmqp2Uf6k5NFEurwY/0td0cpebAucFpY/3jhrwrVGuxU2uQFCHjU19SJfje0yQvi+rVWdq78hR5lig==",
+      "requires": {
+        "bignumber.js": "9.0.0",
+        "readable-stream": "2.3.7",
+        "safe-buffer": "5.1.2",
+        "sqlstring": "2.3.1"
+      }
+    },
+    "negotiator": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
+      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
+    },
+    "on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
+    },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+    },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
+    "proxy-addr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
+      "integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==",
+      "requires": {
+        "forwarded": "~0.1.2",
+        "ipaddr.js": "1.9.1"
+      }
+    },
+    "qs": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
+    },
+    "range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
+    },
+    "raw-body": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
+      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
+      "requires": {
+        "bytes": "3.1.0",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      }
+    },
+    "readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "send": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
+      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+      "requires": {
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "destroy": "~1.0.4",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "~1.7.2",
+        "mime": "1.6.0",
+        "ms": "2.1.1",
+        "on-finished": "~2.3.0",
+        "range-parser": "~1.2.1",
+        "statuses": "~1.5.0"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+        }
+      }
+    },
+    "serve-static": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
+      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.17.1"
+      }
+    },
+    "setprototypeof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+    },
+    "sqlstring": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.1.tgz",
+      "integrity": "sha1-R1OT/56RR5rqYtyvDKPRSYOn+0A="
+    },
+    "statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
+    },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "requires": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "toidentifier": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
+      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      }
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
+    },
+    "ws": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.2.1.tgz",
+      "integrity": "sha512-sucePNSafamSKoOqoNfBd8V0StlkzJKL2ZAhGQinCfNQ+oacw+Pk7lcdAElecBF2VkLNZRiIb5Oi1Q5lVUVt2A=="
+    }
+  }
+}

package.json

+{
+  "name": "live-greetings",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Niels Olof Bouvin",
+  "license": "ISC",
+  "description": "A site, where updates are sent immediately through WebSockets",
+  "dependencies": {
+    "body-parser": "^1.18.2",
+    "express": "^4.16.2",
+    "mysql": "^2.16.0",
+    "ws": "^7.2.1"
+  }
+}

public/images/DHT11.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.8 59.84"><defs><style>.a,.d{fill:#878787;}.a,.b,.c,.d,.e,.f,.g,.h{stroke:#1d1d1b;stroke-miterlimit:10;}.a,.c,.e{stroke-width:0.75px;}.b,.e,.f{fill:none;}.b{stroke-width:0.25px;}.c{fill:#c6c6c6;}.d,.f,.g,.h{stroke-width:0.5px;}.g{fill:#dadada;}.h{fill:#9d9d9c;}</style></defs><title>Neonious</title><path class="a" d="M85.15,1H14.66V58.9H85.15ZM76.31,6.83a3,3,0,1,1,3,3A3,3,0,0,1,76.31,6.83Zm0,46.39a3,3,0,1,1,3,3A3,3,0,0,1,76.31,53.22Z"/><path class="b" d="M33.37,11.72H26.52a1.85,1.85,0,0,0-1.79,1.91V48.07A1.86,1.86,0,0,0,26.52,50h6.85"/><rect class="c" x="40.4" y="-0.19" width="46.22" height="60.28" transform="translate(93.46 -33.56) rotate(90)"/><rect class="d" x="41.08" y="27.84" width="4.63" height="5.1" transform="translate(73.78 -13.01) rotate(90)"/><rect class="d" x="41.08" y="19.16" width="4.63" height="5.1" transform="translate(65.1 -21.68) rotate(90)"/><rect class="d" x="41.08" y="10.49" width="4.63" height="5.1" transform="translate(56.43 -30.36) rotate(90)"/><rect class="d" x="41.08" y="45.19" width="4.63" height="5.1" transform="translate(91.13 4.34) rotate(90)"/><rect class="d" x="41.08" y="36.51" width="4.63" height="5.1" transform="translate(82.45 -4.33) rotate(90)"/><rect class="d" x="50.6" y="27.84" width="4.63" height="5.1" transform="translate(83.31 -22.53) rotate(90)"/><rect class="d" x="50.6" y="19.17" width="4.63" height="5.1" transform="translate(74.63 -31.21) rotate(90)"/><rect class="d" x="50.6" y="36.51" width="4.63" height="5.1" transform="translate(91.98 -13.86) rotate(90)"/><rect class="d" x="59.92" y="45.42" width="5.1" height="4.63"/><rect class="d" x="60.13" y="27.84" width="4.63" height="5.1" transform="translate(92.83 -32.06) rotate(90)"/><rect class="d" x="60.13" y="19.16" width="4.63" height="5.1" transform="translate(84.16 -40.73) rotate(90)"/><rect class="d" x="60.13" y="10.49" width="4.63" height="5.1" transform="translate(75.48 -49.41) rotate(90)"/><rect class="d" x="60.13" y="36.51" width="4.63" height="5.1" transform="translate(101.51 -23.39) rotate(90)"/><rect class="d" x="69.66" y="27.84" width="4.63" height="5.1" transform="translate(102.36 -41.58) rotate(90)"/><rect class="d" x="69.66" y="19.17" width="4.63" height="5.1" transform="translate(93.69 -50.26) rotate(90)"/><rect class="d" x="69.66" y="10.49" width="4.63" height="5.1" transform="translate(85.01 -58.93) rotate(90)"/><rect class="d" x="69.66" y="36.51" width="4.63" height="5.1" transform="translate(111.03 -32.91) rotate(90)"/><rect class="d" x="69.42" y="45.42" width="5.1" height="4.63"/><rect class="d" x="79.26" y="27.84" width="4.63" height="5.1" transform="translate(111.96 -51.19) rotate(90)"/><rect class="d" x="79.26" y="19.16" width="4.63" height="5.1" transform="translate(103.29 -59.87) rotate(90)"/><rect class="d" x="79.26" y="36.51" width="4.63" height="5.1" transform="translate(120.64 -42.52) rotate(90)"/><rect class="d" x="88.79" y="27.84" width="4.63" height="5.1" transform="translate(121.49 -60.72) rotate(90)"/><rect class="d" x="88.79" y="19.17" width="4.63" height="5.1" transform="translate(112.82 -69.39) rotate(90)"/><rect class="d" x="88.79" y="36.51" width="4.63" height="5.1" transform="translate(130.17 -52.04) rotate(90)"/><rect class="d" x="14.66" y="26.62" width="8.46" height="8.46" rx="0.86" transform="translate(49.75 11.96) rotate(90)"/><rect class="d" x="14.66" y="35.12" width="8.46" height="8.46" rx="0.86" transform="translate(58.25 20.46) rotate(90)"/><rect class="d" x="14.66" y="18.12" width="8.46" height="8.46" rx="0.86" transform="translate(41.24 3.45) rotate(90)"/><line class="e" x1="1.04" y1="39.35" x2="19.55" y2="39.35"/><line class="e" x1="1.04" y1="30.85" x2="19.55" y2="30.85"/><line class="e" x1="1.04" y1="22.35" x2="19.55" y2="22.35"/><circle class="d" cx="29.05" cy="18.1" r="3"/><circle class="d" cx="29.05" cy="26.6" r="3"/><circle class="d" cx="29.05" cy="35.1" r="3"/><circle class="d" cx="29.05" cy="43.61" r="3"/><line class="f" x1="28.63" y1="43.61" x2="33.37" y2="43.61"/><line class="f" x1="28.63" y1="35.1" x2="33.37" y2="35.1"/><line class="f" x1="28.63" y1="26.6" x2="33.37" y2="26.6"/><line class="f" x1="28.63" y1="18.1" x2="33.37" y2="18.1"/><rect class="g" x="24.47" y="-0.73" width="4.1" height="10.24" rx="1.25" transform="translate(30.91 -22.13) rotate(90)"/><rect class="h" x="24.47" y="1.64" width="4.1" height="5.51" transform="translate(30.91 -22.13) rotate(90)"/></svg>
\ No newline at end of file

public/images/Neonious.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 164.64 79.8"><defs><style>.a,.d{fill:#b2b2b2;}.a,.b,.c,.d,.e,.f,.g,.h,.i,.j{stroke:#1d1d1b;}.a,.b,.c,.d,.e,.f,.g,.h,.i,.j,.k{stroke-miterlimit:10;}.a,.c,.f,.h,.j{stroke-width:0.75px;}.b{fill:#878787;}.b,.d,.e,.g,.i,.k{stroke-width:0.5px;}.c{fill:#575756;}.e{fill:#706f6f;}.f{fill:#dadada;}.g{fill:#9d9d9c;}.h{fill:#ededed;}.i,.j,.k{fill:none;}.k{stroke:#706f6f;}</style></defs><title>Neonious</title><path class="a" d="M11.69,75.61H163.47V.89H11.69Zm149-6.24A3.41,3.41,0,1,1,157.23,66,3.41,3.41,0,0,1,160.64,69.37Zm-139.3,0A3.41,3.41,0,1,1,17.93,66,3.41,3.41,0,0,1,21.34,69.37ZM160.64,7a3.41,3.41,0,1,1-3.41-3.4A3.41,3.41,0,0,1,160.64,7ZM21.34,7a3.41,3.41,0,1,1-3.41-3.4A3.41,3.41,0,0,1,21.34,7Z"/><rect class="b" x="64.41" y="51.79" width="17.61" height="9.82" transform="translate(16.51 129.92) rotate(-90)"/><rect class="c" x="68.26" y="54.48" width="10.15" height="4.5" transform="translate(16.61 130.06) rotate(-90)"/><rect class="b" x="64.41" y="17.78" width="17.61" height="9.82" transform="translate(50.53 95.91) rotate(-90)"/><rect class="c" x="68.26" y="20.46" width="10.15" height="4.5" transform="translate(50.62 96.05) rotate(-90)"/><rect class="d" x="71.57" y="39.27" width="3.52" height="8.06" transform="translate(30.04 116.63) rotate(-90)"/><rect class="e" x="71.57" y="41" width="3.52" height="4.59" transform="translate(30.04 116.63) rotate(-90)"/><rect class="d" x="71.57" y="32.06" width="3.52" height="8.06" transform="translate(37.25 109.42) rotate(-90)"/><rect class="e" x="71.57" y="33.79" width="3.52" height="4.59" transform="translate(37.25 109.42) rotate(-90)"/><rect class="f" x="9.13" y="6.03" width="47.92" height="64.12" transform="translate(-5 71.18) rotate(-90)"/><polygon class="g" points="24.64 33.26 24.64 29.19 2.03 27.41 2.03 34.59 24.64 33.26"/><polygon class="g" points="24.64 47.43 24.64 43.36 2.03 41.58 2.03 48.77 24.64 47.43"/><polygon class="h" points="82.39 60.5 136.69 60.5 136.69 46.05 147.63 46.05 147.63 17.64 82.39 17.64 82.39 60.5"/><line class="i" x1="83.58" y1="17.64" x2="83.58" y2="14.13"/><line class="i" x1="86.42" y1="17.64" x2="86.42" y2="14.13"/><line class="i" x1="89.25" y1="17.64" x2="89.25" y2="14.13"/><line class="i" x1="92.09" y1="17.64" x2="92.09" y2="14.13"/><line class="i" x1="94.92" y1="17.64" x2="94.92" y2="14.13"/><line class="i" x1="97.76" y1="17.64" x2="97.76" y2="14.13"/><line class="i" x1="100.59" y1="17.64" x2="100.59" y2="14.13"/><line class="i" x1="103.42" y1="17.64" x2="103.42" y2="14.13"/><line class="i" x1="106.26" y1="17.64" x2="106.26" y2="14.13"/><line class="i" x1="109.09" y1="17.64" x2="109.09" y2="14.13"/><line class="i" x1="111.93" y1="17.64" x2="111.93" y2="14.13"/><line class="i" x1="114.76" y1="17.64" x2="114.76" y2="14.13"/><line class="i" x1="117.6" y1="17.64" x2="117.6" y2="14.13"/><line class="i" x1="120.43" y1="17.64" x2="120.43" y2="14.13"/><line class="i" x1="123.27" y1="17.64" x2="123.27" y2="14.13"/><line class="i" x1="126.1" y1="17.64" x2="126.1" y2="14.13"/><line class="i" x1="128.94" y1="17.64" x2="128.94" y2="14.13"/><line class="i" x1="131.77" y1="17.64" x2="131.77" y2="14.13"/><line class="i" x1="134.61" y1="17.64" x2="134.61" y2="14.13"/><line class="i" x1="137.44" y1="17.64" x2="137.44" y2="14.13"/><line class="i" x1="140.28" y1="17.64" x2="140.28" y2="14.13"/><line class="i" x1="143.11" y1="17.64" x2="143.11" y2="14.13"/><line class="i" x1="145.94" y1="17.64" x2="145.94" y2="14.13"/><line class="i" x1="83.58" y1="64.01" x2="83.58" y2="60.5"/><line class="i" x1="86.42" y1="64.01" x2="86.42" y2="60.5"/><line class="i" x1="89.25" y1="64.01" x2="89.25" y2="60.5"/><line class="i" x1="92.09" y1="64.01" x2="92.09" y2="60.5"/><line class="i" x1="94.92" y1="64.01" x2="94.92" y2="60.5"/><line class="i" x1="97.76" y1="64.01" x2="97.76" y2="60.5"/><line class="i" x1="100.59" y1="64.01" x2="100.59" y2="60.5"/><line class="i" x1="103.42" y1="64.01" x2="103.42" y2="60.5"/><line class="i" x1="106.26" y1="64.01" x2="106.26" y2="60.5"/><line class="i" x1="109.09" y1="64.01" x2="109.09" y2="60.5"/><line class="i" x1="111.93" y1="64.01" x2="111.93" y2="60.5"/><line class="i" x1="114.76" y1="64.01" x2="114.76" y2="60.5"/><line class="i" x1="117.6" y1="64.01" x2="117.6" y2="60.5"/><line class="i" x1="120.43" y1="64.01" x2="120.43" y2="60.5"/><line class="i" x1="123.27" y1="64.01" x2="123.27" y2="60.5"/><line class="i" x1="126.1" y1="64.01" x2="126.1" y2="60.5"/><line class="i" x1="128.94" y1="64.01" x2="128.94" y2="60.5"/><line class="i" x1="131.77" y1="64.01" x2="131.77" y2="60.5"/><line class="i" x1="134.61" y1="64.01" x2="134.61" y2="60.5"/><path class="f" d="M25.17,78.46h18.7V63.52H25.17ZM40.7,72.77,41,75.61H39.16l.35-2.84Zm-11.17,0,.35,2.84H28l.33-2.84Z"/><circle class="j" cx="143.45" cy="5.69" r="1.47"/><circle class="j" cx="137.78" cy="5.69" r="1.47"/><circle class="j" cx="132.11" cy="5.69" r="1.47"/><circle class="j" cx="126.44" cy="5.69" r="1.47"/><circle class="j" cx="120.77" cy="5.69" r="1.47"/><circle class="j" cx="115.1" cy="5.69" r="1.47"/><circle class="j" cx="109.43" cy="5.69" r="1.47"/><circle class="j" cx="103.76" cy="5.69" r="1.47"/><circle class="j" cx="98.09" cy="5.69" r="1.47"/><circle class="j" cx="92.42" cy="5.69" r="1.47"/><circle class="j" cx="86.75" cy="5.69" r="1.47"/><circle class="j" cx="81.09" cy="5.69" r="1.47"/><circle class="j" cx="75.42" cy="5.69" r="1.47"/><circle class="j" cx="69.75" cy="5.69" r="1.47"/><circle class="j" cx="64.08" cy="5.69" r="1.47"/><circle class="j" cx="58.41" cy="5.69" r="1.47"/><circle class="j" cx="52.74" cy="5.69" r="1.47"/><circle class="j" cx="143.45" cy="70.81" r="1.47"/><circle class="j" cx="137.78" cy="70.81" r="1.47"/><circle class="j" cx="132.11" cy="70.81" r="1.47"/><circle class="j" cx="126.44" cy="70.81" r="1.47"/><circle class="j" cx="120.77" cy="70.81" r="1.47"/><circle class="j" cx="115.1" cy="70.81" r="1.47"/><circle class="j" cx="109.43" cy="70.81" r="1.47"/><circle class="j" cx="103.76" cy="70.81" r="1.47"/><circle class="j" cx="98.09" cy="70.81" r="1.47"/><circle class="j" cx="92.42" cy="70.81" r="1.47"/><circle class="j" cx="86.75" cy="70.81" r="1.47"/><circle class="j" cx="81.09" cy="70.81" r="1.47"/><circle class="j" cx="75.42" cy="70.81" r="1.47"/><circle class="j" cx="69.75" cy="70.81" r="1.47"/><circle class="j" cx="64.08" cy="70.81" r="1.47"/><circle class="j" cx="58.41" cy="70.81" r="1.47"/><path class="k" d="M58.41,67.34a3.48,3.48,0,0,0-2.84,1.48,3.47,3.47,0,1,0,0,4,3.46,3.46,0,0,0,5.67,0,3.46,3.46,0,0,0,5.67,0,3.46,3.46,0,0,0,5.67,0,3.46,3.46,0,0,0,5.67,0,3.46,3.46,0,0,0,5.67,0,3.46,3.46,0,0,0,5.67,0,3.46,3.46,0,0,0,5.67,0,3.46,3.46,0,0,0,5.67,0,3.46,3.46,0,0,0,5.67,0,3.46,3.46,0,0,0,5.67,0,3.46,3.46,0,0,0,5.67,0,3.45,3.45,0,0,0,5.66,0,3.46,3.46,0,0,0,5.67,0,3.46,3.46,0,0,0,5.67,0,3.46,3.46,0,0,0,5.67,0,3.47,3.47,0,1,0,0-4,3.46,3.46,0,0,0-5.67,0,3.46,3.46,0,0,0-5.67,0,3.46,3.46,0,0,0-5.67,0,3.45,3.45,0,0,0-5.66,0,3.46,3.46,0,0,0-5.67,0,3.46,3.46,0,0,0-5.67,0,3.46,3.46,0,0,0-5.67,0,3.46,3.46,0,0,0-5.67,0,3.46,3.46,0,0,0-5.67,0,3.46,3.46,0,0,0-5.67,0,3.46,3.46,0,0,0-5.67,0,3.46,3.46,0,0,0-5.67,0,3.46,3.46,0,0,0-5.67,0,3.46,3.46,0,0,0-5.67,0A3.45,3.45,0,0,0,58.41,67.34Z"/><circle class="j" cx="52.74" cy="70.81" r="1.47"/><circle class="j" cx="47.07" cy="5.69" r="1.47"/><circle class="j" cx="41.4" cy="5.69" r="1.47"/><circle class="j" cx="35.73" cy="5.69" r="1.47"/><path class="k" d="M35.73,2.22A3.44,3.44,0,0,0,32.9,3.71a3.47,3.47,0,1,0,0,4,3.44,3.44,0,0,0,5.67,0,3.43,3.43,0,0,0,5.66,0,3.44,3.44,0,0,0,5.67,0,3.44,3.44,0,0,0,5.67,0,3.44,3.44,0,0,0,5.67,0,3.44,3.44,0,0,0,5.67,0,3.44,3.44,0,0,0,5.67,0,3.44,3.44,0,0,0,5.67,0,3.44,3.44,0,0,0,5.67,0,3.44,3.44,0,0,0,5.67,0,3.44,3.44,0,0,0,5.67,0,3.44,3.44,0,0,0,5.67,0,3.44,3.44,0,0,0,5.67,0,3.44,3.44,0,0,0,5.67,0,3.44,3.44,0,0,0,5.67,0,3.43,3.43,0,0,0,5.66,0,3.44,3.44,0,0,0,5.67,0,3.44,3.44,0,0,0,5.67,0,3.44,3.44,0,0,0,5.67,0,3.47,3.47,0,1,0,0-4,3.44,3.44,0,0,0-5.67,0,3.44,3.44,0,0,0-5.67,0,3.44,3.44,0,0,0-5.67,0,3.43,3.43,0,0,0-5.66,0,3.44,3.44,0,0,0-5.67,0,3.44,3.44,0,0,0-5.67,0,3.44,3.44,0,0,0-5.67,0,3.44,3.44,0,0,0-5.67,0,3.44,3.44,0,0,0-5.67,0,3.44,3.44,0,0,0-5.67,0,3.44,3.44,0,0,0-5.67,0,3.44,3.44,0,0,0-5.67,0,3.44,3.44,0,0,0-5.67,0,3.44,3.44,0,0,0-5.67,0,3.44,3.44,0,0,0-5.67,0,3.44,3.44,0,0,0-5.67,0,3.44,3.44,0,0,0-5.67,0,3.43,3.43,0,0,0-5.66,0A3.47,3.47,0,0,0,35.73,2.22Z"/><circle class="j" cx="30.06" cy="5.69" r="1.47"/><rect class="b" x="141.97" y="55.73" width="5.61" height="2.65" transform="translate(87.72 201.83) rotate(-90)"/><rect class="b" x="134.79" y="56.15" width="5.61" height="1.81" transform="translate(80.54 194.65) rotate(-90)"/><rect class="b" x="134.79" y="47.97" width="5.61" height="1.81" transform="translate(88.72 186.47) rotate(-90)"/><rect class="b" x="141.95" y="47.55" width="5.65" height="2.65" transform="translate(95.9 193.65) rotate(-90)"/></svg>
\ No newline at end of file

public/images/bottom.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1652.2"><defs><style>.a,.b{stroke:#1d71b8;stroke-miterlimit:10;stroke-width:2px;}.a{fill:url(#a);}.b{fill:url(#b);}</style><linearGradient id="a" x1="78.66" y1="176.61" x2="78.66" y2="1652.2" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2581c4"/><stop offset="1" stop-color="#236da5"/></linearGradient><linearGradient id="b" x1="2239.48" y1="361.06" x2="1556.07" y2="1544.76" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2581c4"/><stop offset="1" stop-color="#2476b3"/></linearGradient></defs><title>bottom</title><polygon class="a" points="157.32 1652.2 0 176.61 0 1652.2 157.32 1652.2"/><polygon class="b" points="1920 1652.2 1920 176.61 1742.16 1652.2 1920 1652.2"/></svg>
\ No newline at end of file

public/images/center.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1080 273.36"><defs><style>.a,.b{stroke:#1d71b8;stroke-miterlimit:10;stroke-width:2px;}.a{fill:url(#a);}.b{fill:url(#b);}</style><linearGradient id="a" x1="-133.66" y1="499.39" x2="-557.44" y2="1233.39" gradientTransform="matrix(0, 1, 1, 0, -503.63, 376.87)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2581c4"/><stop offset="1" stop-color="#1b5783"/></linearGradient><linearGradient id="b" x1="-266.88" y1="621.73" x2="-266.88" y2="1583.63" gradientTransform="matrix(0, 1, 1, 0, -503.63, 376.87)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2581c4"/><stop offset="1" stop-color="#236da5"/></linearGradient></defs><title>top</title><polygon class="a" points="0 250.56 0 0 834.01 0 0 250.56"/><polygon class="b" points="1080 219.99 118.09 0 1080 0 1080 219.99"/></svg>
\ No newline at end of file

public/images/chip.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.a,.b{fill:#f6f6f6;stroke:#f6f6f6;stroke-miterlimit:10;}.b{stroke-width:6px;}</style></defs><title>chip</title><path class="a" d="M80.77,10H19.23A9.23,9.23,0,0,0,10,19.23V80.77A9.23,9.23,0,0,0,19.23,90H80.77A9.23,9.23,0,0,0,90,80.77V19.23A9.23,9.23,0,0,0,80.77,10ZM79.68,75.25a4.43,4.43,0,0,1-4.43,4.43H24.75a4.43,4.43,0,0,1-4.43-4.43V24.75a4.43,4.43,0,0,1,4.43-4.43h50.5a4.43,4.43,0,0,1,4.43,4.43Z"/><line class="b" y1="50" x2="10" y2="50"/><line class="b" y1="64.17" x2="10" y2="64.17"/><line class="b" y1="78.35" x2="10" y2="78.35"/><line class="b" y1="35.83" x2="10" y2="35.83"/><line class="b" y1="21.65" x2="10" y2="21.65"/><line class="b" x1="90" y1="50" x2="100" y2="50"/><line class="b" x1="90" y1="64.17" x2="100" y2="64.17"/><line class="b" x1="90" y1="78.35" x2="100" y2="78.35"/><line class="b" x1="90" y1="35.83" x2="100" y2="35.83"/><line class="b" x1="90" y1="21.65" x2="100" y2="21.65"/><line class="b" x1="50" y1="100" x2="50" y2="90"/><line class="b" x1="64.17" y1="100" x2="64.17" y2="90"/><line class="b" x1="78.35" y1="100" x2="78.35" y2="90"/><line class="b" x1="35.83" y1="100" x2="35.83" y2="90"/><line class="b" x1="21.65" y1="100" x2="21.65" y2="90"/><line class="b" x1="50" y1="10" x2="50"/><line class="b" x1="64.17" y1="10" x2="64.17"/><line class="b" x1="78.35" y1="10" x2="78.35"/><line class="b" x1="35.83" y1="10" x2="35.83"/><line class="b" x1="21.65" y1="10" x2="21.65"/></svg>
\ No newline at end of file

public/images/gear.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 101.34 100.8"><defs><style>.a{fill:#f6f6f6;}</style></defs><title>gear</title><path class="a" d="M100,37.53a.9.9,0,0,0-.76-.67L87.64,35.44A3.79,3.79,0,0,1,85,29.57l6.28-9.32a.92.92,0,0,0,0-1.05,51.14,51.14,0,0,0-5.66-6.29.88.88,0,0,0-1-.15l-10,4.81a3.78,3.78,0,0,1-5.42-3.49l.23-10.82a.91.91,0,0,0-.58-.86A50.68,50.68,0,0,0,60.46,0a.89.89,0,0,0-.94.41L53.9,9.61a3.78,3.78,0,0,1-6.45,0L41.82.43A.89.89,0,0,0,40.88,0,50.68,50.68,0,0,0,32.55,2.4a.89.89,0,0,0-.57.86l.23,10.82a3.78,3.78,0,0,1-5.43,3.49l-10-4.81a.88.88,0,0,0-1,.15,52,52,0,0,0-5.66,6.29.9.9,0,0,0,0,1.05l6.27,9.32a3.78,3.78,0,0,1-2.68,5.87L2.1,36.86a.9.9,0,0,0-.77.67,51.75,51.75,0,0,0-1.33,8,.9.9,0,0,0,.55.9l10.89,4.7a3.79,3.79,0,0,1,.92,6.39l-9.53,7.9a.9.9,0,0,0-.27,1,50.8,50.8,0,0,0,3.06,7.14.9.9,0,0,0,1,.46L19,72a3.78,3.78,0,0,1,4.23,4.87l-3.9,12.32a.88.88,0,0,0,.3,1,51.2,51.2,0,0,0,6.24,4.15.91.91,0,0,0,1.05-.12l9.67-8.74a3.78,3.78,0,0,1,6.19,1.81L46.17,100a.91.91,0,0,0,.8.66c1.22.09,2.45.15,3.7.15s2.48-.06,3.7-.15a.91.91,0,0,0,.8-.66l3.44-12.72a3.78,3.78,0,0,1,6.19-1.81l9.67,8.74a.91.91,0,0,0,1,.12,50.44,50.44,0,0,0,6.24-4.15.9.9,0,0,0,.31-1L78.16,76.87A3.78,3.78,0,0,1,82.39,72l12.38,2a.9.9,0,0,0,1-.46,50.84,50.84,0,0,0,3.07-7.14.92.92,0,0,0-.28-1L89,57.55a3.78,3.78,0,0,1,.91-6.39l10.9-4.7a.9.9,0,0,0,.54-.9A50.59,50.59,0,0,0,100,37.53ZM50.67,76.4a26,26,0,1,1,26-26A26,26,0,0,1,50.67,76.4Z"/></svg>
\ No newline at end of file

public/images/menu_left.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 398.81 967.41"><defs><style>.a{fill:url(#a);}</style><linearGradient id="a" x1="458.7" y1="34.58" x2="-59.9" y2="932.83" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#914795"/><stop offset="1" stop-color="#236fa8"/></linearGradient></defs><title>menu_left</title><polygon class="a" points="398.81 967.41 0 967.41 0 0 398.81 0 320.94 447.91 398.81 967.41"/></svg>
\ No newline at end of file

public/images/menu_mid.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 967.41 398.81"><defs><style>.a{fill:url(#a);}</style><linearGradient id="a" x1="815.24" y1="78.73" x2="152.17" y2="320.07" gradientTransform="translate(683.11 -284.3) rotate(90)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#914795"/><stop offset="1" stop-color="#236fa8"/></linearGradient></defs><title>menu_mid</title><polygon class="a" points="0 398.81 0 0 967.41 0 967.41 398.81 519.5 320.94 0 398.81"/></svg>
\ No newline at end of file

public/images/menu_right.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 398.81 967.41"><defs><style>.a{fill:url(#a);}</style><linearGradient id="a" x1="-1559.65" y1="34.58" x2="-2078.25" y2="932.83" gradientTransform="matrix(-1, 0, 0, 1, -1619.54, 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9d4e98"/><stop offset="1" stop-color="#2581c4"/></linearGradient></defs><title>menu_right</title><polygon class="a" points="0 967.41 398.81 967.41 398.81 0 0 0 77.86 447.91 0 967.41"/></svg>
\ No newline at end of file

public/images/top.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080"><defs><style>.a,.b{stroke:#1d71b8;stroke-miterlimit:10;stroke-width:2px;}.a{fill:url(#a);}.b{fill:url(#b);}</style><linearGradient id="a" x1="214.9" y1="-20.59" x2="-152.26" y2="615.36" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2581c4"/><stop offset="1" stop-color="#1b5783"/></linearGradient><linearGradient id="b" x1="1997.94" y1="45" x2="1676.59" y2="601.61" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#236fa8"/><stop offset="1" stop-color="#21679b"/></linearGradient></defs><title>top</title><polygon class="a" points="250.56 0 0 0 0 703.27 250.56 0"/><polygon class="b" points="1920 742.14 1920 0 1699.37 0 1920 742.14"/></svg>
\ No newline at end of file

public/images/wiring.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 131 76.1" enable-background="new 0 0 131 76.1" xml:space="preserve">
+<g id="Lag_1">
+</g>
+<g id="Lag_2">
+</g>
+<g id="Lag_3">
+	<g>
+		<path fill="#B2B2B2" stroke="#000000" stroke-width="0.75" stroke-miterlimit="10" d="M6.7,9.3l0,5.8l0,59.6l32.2,0l0-65.4
+			L6.7,9.3z M9.4,73.5c-0.8,0-1.5-0.7-1.5-1.5c0-0.8,0.7-1.5,1.5-1.5c0.8,0,1.5,0.7,1.5,1.5C10.9,72.8,10.2,73.5,9.4,73.5z
+			 M9.4,13.5c-0.8,0-1.5-0.7-1.5-1.5c0-0.8,0.7-1.5,1.5-1.5c0.8,0,1.5,0.7,1.5,1.5C10.9,12.8,10.2,13.5,9.4,13.5z M36.3,73.5
+			c-0.8,0-1.5-0.7-1.5-1.5c0-0.8,0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5C37.7,72.8,37.1,73.5,36.3,73.5z M36.3,13.5
+			c-0.8,0-1.5-0.7-1.5-1.5c0-0.8,0.7-1.5,1.5-1.5c0.8,0,1.5,0.7,1.5,1.5C37.7,12.8,37.1,13.5,36.3,13.5z"/>
+		<rect x="11.1" y="33.7" fill="#878787" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" width="7.6" height="4.2"/>
+		<rect x="25.7" y="33.7" fill="#878787" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" width="7.6" height="4.2"/>
+		<rect x="12.6" y="4.7" fill="#DADADA" stroke="#000000" stroke-width="0.75" stroke-miterlimit="10" width="20.6" height="27.6"/>
+		<polygon fill="#9D9D9C" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" points="25,14.9 26.7,14.9 27.5,5.2 
+			24.4,5.2 		"/>
+		<polygon fill="#9D9D9C" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" points="18.9,14.9 20.6,14.9 21.4,5.2 
+			18.3,5.2 		"/>
+		<polygon fill="#EDEDED" stroke="#000000" stroke-width="0.75" stroke-miterlimit="10" points="13.2,39.8 13.2,63.1 19.5,63.1 
+			19.5,67.9 31.7,67.9 31.7,39.8 		"/>
+		<path fill="#DADADA" stroke="#000000" stroke-width="0.75" stroke-miterlimit="10" d="M5.5,15.1l0,8.1l6.4,0l0-8.1L5.5,15.1z"/>
+	</g>
+	<g>
+		<path fill="#878787" stroke="#000000" stroke-width="0.75" stroke-miterlimit="10" d="M126.7,31.4l-26.8,0l0,22l26.8,0L126.7,31.4
+			z M123.4,33.6c0-0.6,0.5-1.1,1.1-1.1c0.6,0,1.1,0.5,1.1,1.1c0,0.6-0.5,1.1-1.1,1.1C123.9,34.8,123.4,34.3,123.4,33.6z M123.4,51.3
+			c0-0.6,0.5-1.1,1.1-1.1c0.6,0,1.1,0.5,1.1,1.1c0,0.6-0.5,1.1-1.1,1.1C123.9,52.4,123.4,51.9,123.4,51.3z"/>
+		
+			<rect x="109.7" y="31" transform="matrix(3.267949e-07 1 -1 3.267949e-07 160.9395 -76.1086)" fill="#C6C6C6" stroke="#000000" stroke-width="0.75" stroke-miterlimit="10" width="17.6" height="22.9"/>
+		<polyline fill="none" stroke="#3AAA35" stroke-width="2" stroke-miterlimit="10" points="38.9,42.8 45.6,42.8 101.8,42.8 		"/>
+	</g>
+	<polyline fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="38.9,67.9 45.7,67.9 45.7,46 101.8,46 	
+		"/>
+	<polyline fill="none" stroke="#E30613" stroke-width="2" stroke-miterlimit="10" points="6.7,29.4 1.5,29.4 1.5,1.5 45.6,1.5 
+		45.6,39.5 101.8,39.5 	"/>
+</g>
+</svg>

public/index.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <title>Live from Chomsky</title>
+  <link rel="stylesheet" type="text/css" media="screen" href="./style/main.css" />
+  <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700&display=swap" rel="stylesheet">
+  <script src="./js/Chart.min.js"></script>
+  <script defer src="./js/main.js"></script>
+  <script defer src="./js/client.js"></script>
+  <script defer src="./js/menus.js"></script>
+</head>
+
+<body>
+  <!-- LEFT NAVIGATE BAR -->
+  <nav class="nav_left">
+    <div>
+      <img src="./images/gear.svg" class="logo_button">
+    </div>
+  </nav>
+
+  <!-- LEFT MENU -->
+  <div id="menu_left">
+    <h1>
+      Settings
+    </h1>
+    <div class="menu_list">
+      <h3>
+        Data Points
+      </h3>
+      <select id="limit" onchange="limitChange()">
+        <option value="0">All</option>
+        <option value="10">10</option>
+        <option value="50" selected>50</option>
+        <option value="100">100</option>
+        <option value="500">500</option>
+      </select>
+
+      <h3>
+        Show on graph
+      </h3>
+      <select id="graphshowchange" onchange="graphShowChange()">
+        <option value="0" selected>Both</option>
+        <option value="temperature">Temperature</option>
+        <option value="humidity">Humidity</option>
+      </select>
+
+      <h3>
+        Temperature color
+      </h3>
+      <select id="tempcolor" onchange="tempColorChange()">
+        <option value="red" selected>Red</option>
+        <option value="green">Green</option>
+        <option value="blue">Blue</option>
+        <option value="purple">Purple</option>
+        <option value="yellow">Yellow</option>
+      </select>
+
+      <h3>
+        Humidity color
+      </h3>
+      <select id="humidcolor" onchange="humidColorChange()">
+        <option value="red">Red</option>
+        <option value="green">Green</option>
+        <option value="blue" selected>Blue</option>
+        <option value="purple">Purple</option>
+        <option value="yellow">Yellow</option>
+      </select>
+
+      <h3>
+        Graph line
+      </h3>
+      <input type="checkbox" id="drawLineCheck" onchange="drawline()" checked>
+    </div>
+  </div>
+
+  <!-- RIGHT NAVIGATE BAR -->
+  <nav class="nav_right">
+    <div>
+      <img src="./images/chip.svg" class="logo_button">
+    </div>
+  </nav>
+
+  <!-- RIGHT MENU -->
+  <div id="menu_right">
+    <h1>
+      About the technology
+    </h1>
+    <div class="menu_info">
+      <h3>The Neonious One</h3>
+      <p>A Microcontroller board</p>
+      <img src="./images/Neonious.svg" width="70%">
+      <p>150-Mbit WiFi</p>
+      <p class="menu_info_extra">Graphical package manager</p>
+      <p class="menu_info_extra">27 I/O pins</p>
+      <p class="menu_info_extra">JavaScript ES 6+</p>
+      <p>250 Mhz Processor</p>
+      <p class="menu_info_extra">4 MB RAM</p>
+      <p class="menu_info_extra">4 MB Flash</p>
+    </div>
+
+    <div class="menu_info">
+      <h3>DHT11</h3>
+      <p>A Thermometer & Hygrometer</p>
+      <img src="./images/DHT11.svg" width="30%">
+      <p>±1°C and ±1% Accuracy</p>
+      <p class="menu_info_extra">0°C to 50°C temp-range</p>
+      <p class="menu_info_extra">20% to 90% humid-range</p>
+      <p class="menu_info_extra">16-bit</p>
+    </div>
+  </div>
+
+  <!-- MID NAVIGATE BAR-->
+  <nav class="nav_center">
+    <div>
+      <img src="./images/gear.svg" id="center_left_button">
+      <img src="./images/chip.svg" id="center_right_button">
+    </div>
+  </nav>
+
+  <!-- MID MENU 1-->
+  <div id="menu_mid1" class="menu_mid">
+    <h1>
+      Settings
+    </h1>
+    <div class="mid_seperator">
+      <div class="mid_selectors">
+        <h3>
+          Data points
+        </h3>
+        <select id="limitMid" onchange="limitChange(true)">
+          <option value="0">All</option>
+          <option value="10">10</option>
+          <option value="50" selected>50</option>
+          <option value="100">100</option>
+          <option value="500">500</option>
+        </select>
+
+        <h3>
+          Show on graph
+        </h3>
+        <select id="graphshowchangeMid" onchange="graphShowChange(true)">
+          <option value="0" selected>Both</option>
+          <option value="temperature">Temperature</option>
+          <option value="humidity">Humidity</option>
+        </select>
+
+        <h3>
+          Graph line
+        </h3>
+        <input type="checkbox" id="drawLineCheckMid" onchange="drawline(true)" checked>
+      </div>
+
+      <div class="mid_selectors">
+        <h3>
+          Humidity color
+        </h3>
+        <select id="humidcolorMid" onchange="humidColorChange(true)">
+          <option value="red">Red</option>
+          <option value="green">Green</option>
+          <option value="blue" selected>Blue</option>
+          <option value="purple">Purple</option>
+          <option value="yellow">Yellow</option>
+        </select>
+
+        <h3>
+          Temperature color
+        </h3>
+        <select id="tempcolorMid" onchange="tempColorChange(true)">
+          <option value="red" selected>Red</option>
+          <option value="green">Green</option>
+          <option value="blue">Blue</option>
+          <option value="purple">Purple</option>
+          <option value="yellow">Yellow</option>
+        </select>
+      </div>
+    </div>
+  </div>
+
+  <!-- MID MENU 2-->
+  <div id="menu_mid2" class="menu_mid">
+    <h1>
+      About the technology
+    </h1>
+    <div class="menu_mid_infos">
+      <div class="menu_mid_info">
+        <h2>The Neonious One</h2>
+        <p>A Microcontroller board</p>
+        <img src="./images/Neonious.svg" width="40%">
+        <p class="menu_mid_info_extra">150-Mbit WiFi</p>
+        <p class="menu_mid_info_extra">250 Mhz Processor</p>
+      </div>
+
+      <div class="menu_mid_info">
+        <h2>DHT11</h2>
+        <p>A Thermometer & Hygrometer</p>
+        <img src="./images/DHT11.svg" width="31%">
+        <p class="menu_mid_info_extra">±1°C and ±1% Accuracy</p>
+        <p class="menu_mid_info_extra">0°C to 50°C temp-range</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- MAIN CONTENT-->
+  <div class="content">
+    <!-- TITLE -->
+    <h1>
+      Live from Chomsky
+    </h1>
+    <hr>
+    <canvas id="measurement_graph"></canvas>
+
+    <div>
+      <table>
+        <thead>
+          <tr class="table_head">
+            <th>
+              Time
+            </th>
+            <th>
+              Temperature
+            </th>
+            <th>
+              Humidity
+            </th>
+          </tr>
+        </thead>
+        <tbody id="measurement_table">
+        </tbody>
+      </table>
+    </div>
+  </div>
+</body>
+
+</html>
\ No newline at end of file

public/js/client.js

+'use strict';
+const connection = new WebSocket('wss://itwot.cs.au.dk/VM08/wsa');
+
+/**
+ * Feedback for client console
+ */
+connection.onopen = event => {
+  console.log('WebSocket is open now.');
+};
+
+connection.onclose = event => {
+  console.log('WebSocket is closed now.');
+};
+
+connection.onerror = event => {
+  console.error('WebSocket error observed:', event);
+};
+
+/**
+ * Data received. Add to clients data
+ */
+connection.onmessage = event => {
+  console.log('Received over WSS: ', JSON.parse(event.data));
+  updateData(JSON.parse(event.data));
+};