klaus
/
WebsocketTests
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

websocket shell. started.

main
klaus 2023-11-13 12:46:53 +01:00
parent 97707129ae
commit 9a9aee2aa4
5 changed files with 191 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
main.ts
View File

@ -1,35 +1,33 @@
let Deno
import { serveDir } from "https://deno.land/std@0.194.0/http/file_server.ts"; import { serveDir } from "https://deno.land/std@0.194.0/http/file_server.ts";
Deno.serve((req: Request) => { Deno.serve((req: Request) => {
const path = new URL(req.url) const path = new URL(req.url)
const pathname = path.pathname; // URL Pfad. const pathname = path.pathname; // URL Pfad.
if (req.headers.get("upgrade") == "websocket") { // Websocket Handling. if (req.headers.get("upgrade") == "websocket") { // Websocket Handling.
const { socket, response } = Deno.upgradeWebSocket(req); const { socket, response } = Deno.upgradeWebSocket(req);
socket.addEventListener("open", () => { socket.addEventListener("open", () => {
console.log('OPEN')
});
socket.addEventListener("close", () => {
});
socket.addEventListener("message", (event) => {
console.log('MSG')
});
return response;
}
// Static Handling (kein Websocket Request).
if (pathname.startsWith("/")) {
return serveDir(req, {
fsRoot: "public",
quiet: true
});
}
return new Response("404: Not Found", {
status: 404,
}); });
socket.addEventListener("close", () => {
});
socket.addEventListener("message", (event) => {
});
return response;
}
// Static Handling (kein Websocket Request).
if (pathname.startsWith("/")) {
return serveDir(req, {
fsRoot: "public",
quiet: true
});
}
return new Response("404: Not Found", {
status: 404,
});
}); });

12
public/index.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
test
</body>
<script type="module" src="main.js"></script>
</html>

20
public/main.js Normal file
View File

@ -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 })

41
public/scripts/connector.js Normal file
View File

@ -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 }

93
public/scripts/helpers.js Normal file
View File

@ -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 }