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:
parent
090fcc146e
commit
cfbb71464b
5162
package-lock.json
generated
5162
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
14
package.json
14
package.json
@ -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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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);
|
||||||
|
@ -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>
|
||||||
|
@ -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));
|
|
||||||
});
|
|
||||||
|
Loading…
Reference in New Issue
Block a user