Integrate websocket server into web server

package.json

@@ -2,19 +2,21 @@
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@types/express": "^4.17.1",
+    "@types/express-ws": "^3.0.0",
     "@types/http-proxy": "^1.17.0",
+    "@types/js-yaml": "^3.12.1",
+    "@types/node": "^12.7.4",
+    "@types/node-fetch": "^2.5.0",
+    "@types/parcel-bundler": "^1.12.1",
+    "@types/ws": "^6.0.3",
     "@vue/component-compiler-utils": "^3.0.0",
     "sass": "^1.23.0-module.beta.1",
     "typescript": "^3.6.2",
     "vue-template-compiler": "^2.6.10"
   },
   "dependencies": {
-    "@types/js-yaml": "^3.12.1",
-    "@types/node": "^12.7.4",
-    "@types/node-fetch": "^2.5.0",
-    "@types/parcel-bundler": "^1.12.1",
-    "@types/ws": "^6.0.3",
     "express": "^4.17.1",
+    "express-ws": "^4.0.0",
     "http-proxy": "^1.18.0",
     "js-yaml": "^3.13.1",
     "node-fetch": "^2.6.0",
@@ -27,6 +29,6 @@
   },
   "scripts": {
     "build": "tsc src/server.ts",
-    "serve": "npm run build && node src/server.js"
+    "start": "npm run build && node src/server.js"
   }
 }

src/App.vue

@@ -26,9 +26,8 @@ export default class App extends Vue {
 
   mounted() {
     let loc = window.location;
-    // TODO: make dynamic
+    const ws_uri: string =
-    // const ws_uri: string = loc.protocol === 'https' ? 'wss://' : 'ws://' + loc.host + '/ws';
+      loc.protocol === 'https' ? 'wss://' : 'ws://' + loc.host + '/ws';
-    const ws_uri = 'ws://localhost:4321';
     this.websocket = new WebSocket(ws_uri);
     this.websocket.onmessage = (ev: MessageEvent) => {
       const event: messages.ExtendedMessage = JSON.parse(ev.data as string);

src/PrinterCard.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="card">
     <div class="card-header">{{ name || 'Unknown' }}</div>
-    <img
+    <img v-if="name" class="webcam" :src="'/webcam/' + name" />
-      v-if="name"
-      class="webcam"
-      :src="'http://localhost:1234/webcam/' + name"
-    />
     <div v-if="status">
       <div>{{ status.state.text }}</div>
       <div>Job File Name: {{ status.job.file.name || 'None' }}</div>

src/server.ts

@@ -8,6 +8,7 @@ import * as httpProxy from 'http-proxy';
 import * as WebSocket from 'ws';
 import * as yaml from 'js-yaml';
 import * as Bundler from 'parcel-bundler';
+import * as expressWs from 'express-ws';
 
 import * as messages from './messages';
 import * as octoprint from './octoprint';
@@ -18,11 +19,10 @@ const config: {
 } = yaml.safeLoad(fs.readFileSync('config.yaml', 'utf8'));
 
 const proxy = httpProxy.createProxyServer({});
-const proxyServer = new WebSocket.Server({ host: '127.0.0.1', port: 4321 });
 let printerStatuses: PrinterStatus[] = [];
 
 function broadcast(data: WebSocket.Data) {
-  proxyServer.clients.forEach((client: WebSocket) => {
+  wsInstance.getWss().clients.forEach((client: WebSocket) => {
     if (client.readyState === WebSocket.OPEN) {
       client.send(data);
     }
@@ -33,7 +33,12 @@ function broadcastPayload(payload: messages.ExtendedMessage) {
   broadcast(JSON.stringify(payload));
 }
 
-const app = express();
+const wsInstance = expressWs(express());
+const app = wsInstance.app;
+
+app.ws('/ws', function(ws, req) {
+  printerStatuses.forEach((ps: PrinterStatus) => ps.send_init(ws));
+});
 
 app.get('/webcam/:printer', (req, res) => {
   let printer: PrinterStatus | undefined = printerStatuses.find(
@@ -50,7 +55,6 @@ app.use(bundler.middleware());
 app.listen(1234);
 
 class PrinterStatus {
-  wss: WebSocket.Server;
   address: string;
   apikey: string;
 
@@ -60,8 +64,7 @@ class PrinterStatus {
   websocket?: WebSocket;
   lastStatus?: messages.ExtendedMessage;
 
-  constructor(wss: WebSocket.Server, address: string, apikey: string) {
+  constructor(address: string, apikey: string) {
-    this.wss = wss;
     this.address = address;
     this.apikey = apikey;
 
@@ -140,14 +143,10 @@ class PrinterStatus {
   }
 }
 
-function init_printers() {
+function initPrinters() {
   printerStatuses = config.printers.map(
-    printer => new PrinterStatus(proxyServer, printer.address, printer.apikey)
+    printer => new PrinterStatus(printer.address, printer.apikey)
   );
 }
 
-init_printers();
+initPrinters();
-
-proxyServer.on('connection', (ws: WebSocket) => {
-  printerStatuses.forEach((ps: PrinterStatus) => ps.send_init(ws));
-});