2
0
mirror of https://github.com/ad1217/PrinterStatus synced 2024-11-11 02:55:09 -05:00

Integrate websocket server into web server

This commit is contained in:
Adam Goldsmith 2019-09-24 10:53:51 -04:00
parent 090fcc146e
commit cfbb71464b
5 changed files with 1065 additions and 1175 deletions

2190
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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"
}
}

View File

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

View File

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

View File

@ -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) {
this.wss = wss;
constructor(address: string, apikey: string) {
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();
proxyServer.on('connection', (ws: WebSocket) => {
printerStatuses.forEach((ps: PrinterStatus) => ps.send_init(ws));
});
initPrinters();