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
2190
package-lock.json
generated
2190
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": {
|
||||
"@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"
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
|
@ -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>
|
||||
|
@ -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();
|
||||
|
Loading…
Reference in New Issue
Block a user