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

5162
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -2,19 +2,21 @@
"devDependencies": { "devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.5.5", "@babel/plugin-proposal-class-properties": "^7.5.5",
"@types/express": "^4.17.1", "@types/express": "^4.17.1",
"@types/express-ws": "^3.0.0",
"@types/http-proxy": "^1.17.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", "@vue/component-compiler-utils": "^3.0.0",
"sass": "^1.23.0-module.beta.1", "sass": "^1.23.0-module.beta.1",
"typescript": "^3.6.2", "typescript": "^3.6.2",
"vue-template-compiler": "^2.6.10" "vue-template-compiler": "^2.6.10"
}, },
"dependencies": { "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": "^4.17.1",
"express-ws": "^4.0.0",
"http-proxy": "^1.18.0", "http-proxy": "^1.18.0",
"js-yaml": "^3.13.1", "js-yaml": "^3.13.1",
"node-fetch": "^2.6.0", "node-fetch": "^2.6.0",
@ -27,6 +29,6 @@
}, },
"scripts": { "scripts": {
"build": "tsc src/server.ts", "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() { mounted() {
let loc = window.location; 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 = new WebSocket(ws_uri);
this.websocket.onmessage = (ev: MessageEvent) => { this.websocket.onmessage = (ev: MessageEvent) => {
const event: messages.ExtendedMessage = JSON.parse(ev.data as string); const event: messages.ExtendedMessage = JSON.parse(ev.data as string);

View File

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