From c13e5adad9dbbc3ab45461099c65c16b5873c760 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Mon, 18 Mar 2024 15:12:34 +0100 Subject: beginel JS gedoe --- readme.md | 9 +++++++++ ui/demo.html | 13 +++++++++++++ ui/js/api.js | 17 +++++++++++++++++ ui/js/main.js | 5 +++++ ui/js/socket.js | 19 +++++++++++++++++++ 5 files changed, 63 insertions(+) create mode 100644 ui/demo.html create mode 100644 ui/js/api.js create mode 100644 ui/js/main.js create mode 100644 ui/js/socket.js diff --git a/readme.md b/readme.md index e69de29..85216f5 100644 --- a/readme.md +++ b/readme.md @@ -0,0 +1,9 @@ +# tunnel challenge gedoe + +HMI software stack: + +- UI d.m.v. webpagina in vanilla HTML/CSS/JS +- Chromium in kiosk modus om de webpagina fullscreen te weergeven +- websocat om de TCP socket verbinding om te zetten in een WebSocket +- nginx om de webpagina te hosten + diff --git a/ui/demo.html b/ui/demo.html new file mode 100644 index 0000000..7ad4e6d --- /dev/null +++ b/ui/demo.html @@ -0,0 +1,13 @@ + + + + + demo page + + + +
+ +
+ + diff --git a/ui/js/api.js b/ui/js/api.js new file mode 100644 index 0000000..5fca3cf --- /dev/null +++ b/ui/js/api.js @@ -0,0 +1,17 @@ +import ws from './socket.js'; + +export default { + msg: { + send: { + helloWorld: () => { + ws.send(JSON.stringify({res: 'OK'})); + } + }, + handle: { + helloWorld: msg => { + console.log(msg); + }, + }, + }, +}; + diff --git a/ui/js/main.js b/ui/js/main.js new file mode 100644 index 0000000..033b0bb --- /dev/null +++ b/ui/js/main.js @@ -0,0 +1,5 @@ +import './socket.js'; + +import api from './api.js'; +window.api = api; // export api to inline JS handlers + diff --git a/ui/js/socket.js b/ui/js/socket.js new file mode 100644 index 0000000..46edb8d --- /dev/null +++ b/ui/js/socket.js @@ -0,0 +1,19 @@ +import api from './api.js'; + +var ws = new WebSocket('ws://localhost:8081/socket'); +export default ws; + +ws.onmessage = ev => { + // this will already throw an error if the message doesn't contain valid JSON + const msg = JSON.parse(ev.data); + + // check if api.msg.handle has a handler for msg.type + if (!api.msg.handle.hasOwnProperty(msg.type)) { + console.warn(`No message handler for type ${msg.type}`, msg); + return; + } + + // run the appropriate message handler + api.msg.handle[msg.type](msg); +}; + -- cgit v1.2.3