From 9a9aee2aa4d23206b3d9fd88d484dbb3ad90d717 Mon Sep 17 00:00:00 2001 From: klaus Date: Mon, 13 Nov 2023 12:46:53 +0100 Subject: [PATCH] websocket shell. started. --- main.ts | 52 ++++++++++----------- public/index.html | 12 +++++ public/main.js | 20 ++++++++ public/scripts/connector.js | 41 ++++++++++++++++ public/scripts/helpers.js | 93 +++++++++++++++++++++++++++++++++++++ 5 files changed, 191 insertions(+), 27 deletions(-) create mode 100644 public/index.html create mode 100644 public/main.js create mode 100644 public/scripts/connector.js create mode 100644 public/scripts/helpers.js diff --git a/main.ts b/main.ts index f090008..5fb0d1b 100644 --- a/main.ts +++ b/main.ts @@ -1,35 +1,33 @@ -let Deno - import { serveDir } from "https://deno.land/std@0.194.0/http/file_server.ts"; Deno.serve((req: Request) => { - const path = new URL(req.url) - const pathname = path.pathname; // URL Pfad. + const path = new URL(req.url) + const pathname = path.pathname; // URL Pfad. - if (req.headers.get("upgrade") == "websocket") { // Websocket Handling. - const { socket, response } = Deno.upgradeWebSocket(req); - socket.addEventListener("open", () => { - - }); - socket.addEventListener("close", () => { - - }); - socket.addEventListener("message", (event) => { - + if (req.headers.get("upgrade") == "websocket") { // Websocket Handling. + const { socket, response } = Deno.upgradeWebSocket(req); + socket.addEventListener("open", () => { + console.log('OPEN') + }); + socket.addEventListener("close", () => { - }); - return response; - } + }); + socket.addEventListener("message", (event) => { + console.log('MSG') - // Static Handling (kein Websocket Request). - if (pathname.startsWith("/")) { - return serveDir(req, { - fsRoot: "public", - quiet: true - }); - } + }); + return response; + } - return new Response("404: Not Found", { - status: 404, - }); + // Static Handling (kein Websocket Request). + if (pathname.startsWith("/")) { + return serveDir(req, { + fsRoot: "public", + quiet: true + }); + } + + return new Response("404: Not Found", { + status: 404, + }); }); diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..0f6de60 --- /dev/null +++ b/public/index.html @@ -0,0 +1,12 @@ + + + + + + Document + + + test + + + \ No newline at end of file diff --git a/public/main.js b/public/main.js new file mode 100644 index 0000000..8fbf35e --- /dev/null +++ b/public/main.js @@ -0,0 +1,20 @@ +import { Connector } from "./scripts/connector.js"; +import { genID } from "./scripts/helpers.js"; + +// let thisID = localStorage.getItem('id') +// if (thisID == null) { +// thisID = genID() +// localStorage.setItem('id', thisID) +// } + +let session = "uniqueSession1" + +let connector = new Connector(undefined, session) + +let mainObj = new connector.link(); + +mainObj.set({ 'frieden': 'Klaus' }) // oberste Ebene +mainObj.onchange('frieden', (change) => { console.log(change) }) + +mainObj.set(new connector.link('transport')); // nested object +mainObj.transport.set({ 'play': true }) \ No newline at end of file diff --git a/public/scripts/connector.js b/public/scripts/connector.js new file mode 100644 index 0000000..927b0df --- /dev/null +++ b/public/scripts/connector.js @@ -0,0 +1,41 @@ +let Connector = function (url) { + + let socket; + + this.link = function(name) { + + let out = {} + + + + + return out + } + + + + function connect(url) { + try { + url = url || location.href.replace('http', 'ws') + socket = new WebSocket(url); + socket.onopen = () => { + console.log('OPEN') + }; + socket.onmessage = (m) => {}; + socket.onclose = () => { + console.log('CLOSING') + // setTimeout(() => { + // location.reload() // @todo for developement only + // //connect(); // try reconnect + // }, 1000); + } + socket.onerror = (e) => function(e) {console.log(e)} + } catch (err) { + console.log(err) + } + } + connect(url) + +} + +export { Connector } \ No newline at end of file diff --git a/public/scripts/helpers.js b/public/scripts/helpers.js new file mode 100644 index 0000000..b613b4c --- /dev/null +++ b/public/scripts/helpers.js @@ -0,0 +1,93 @@ +/** + * Helper + */ +function getNode(n, v) { + n = document.createElementNS("http://www.w3.org/2000/svg", n); + for (var p in v) { + if (p == '_text') { + n.innerHTML = v[p] + } else { + n.setAttributeNS(null, p, v[p]); + } + + } + + return n +} + +function cE(str) { + return document.createElement(str); +} + +function cENS(str) { + return document.createElementNS("http://www.w3.org/2000/svg", str); +} + +function tN(str, par) { + if (par) { + par.appendChild(document.createTextNode(str)); + } + return document.createTextNode(str); +} + +function genE(type, obj, par) { + let e = cE(type); + + for (let attr in obj) { + if (attr == "_text") { + e.appendChild(tN(obj[attr])); + continue; + } + e.setAttribute(attr, obj[attr]); + + } + + if (par) { + par.appendChild(e); + } + // e.textContent = ... + return e; +} + +function genENS(type, obj, par) { + let e = cENS(type); + for (attr in obj) { + if (attr == "_text") { + e.appendChild(tN(obj[attr])); + } else { + e.setAttribute(attr, obj[attr]); + } + } + + if (par) { + par.appendChild(e); + } + // e.textContent = ... + return e; +} + +function capFirst(string) { + if (!string) return; + return string.charAt(0).toUpperCase() + string.slice(1); +} + +function byId(str) { + return document.getElementById(str) +} + +// Erzeugt einen vertikalen Abstand. +let gap = function (parent, scale) { + scale = scale || 1 + let newGap = genE('div', { style: 'padding-top: calc(var(--spacing) * ' + scale + ');' }, parent) + return newGap +} + +let idStorage = [] +function genID() { + let newId = Math.floor(Math.random() * 10000000).toString() + while (idStorage.indexOf(newId) >= 0) return genID() + idStorage.push(newId) + return newId +} + +export { genE, tN, gap, genID } \ No newline at end of file