From 6205eb63c0047629f9f146c56fc8760c9bc2e65b Mon Sep 17 00:00:00 2001 From: Alexis Hovorka Date: Mon, 12 Jul 2021 16:00:04 -0600 Subject: Initial commit --- public/404.html | 1 + public/500.html | 1 + public/index.html | 20 ++++++++++++++++++++ public/main.js | 16 ++++++++++++++++ public/sock.js | 43 +++++++++++++++++++++++++++++++++++++++++++ public/style.css | 7 +++++++ 6 files changed, 88 insertions(+) create mode 100644 public/404.html create mode 100644 public/500.html create mode 100644 public/index.html create mode 100644 public/main.js create mode 100644 public/sock.js create mode 100644 public/style.css (limited to 'public') diff --git a/public/404.html b/public/404.html new file mode 100644 index 0000000..1a43d0a --- /dev/null +++ b/public/404.html @@ -0,0 +1 @@ +

404 Not Found

diff --git a/public/500.html b/public/500.html new file mode 100644 index 0000000..ee07335 --- /dev/null +++ b/public/500.html @@ -0,0 +1 @@ +

500 Internal Server Error

diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..7257c98 --- /dev/null +++ b/public/index.html @@ -0,0 +1,20 @@ + + + + + + + appname + + + + + + + +

appname

+ + + + + diff --git a/public/main.js b/public/main.js new file mode 100644 index 0000000..8df390a --- /dev/null +++ b/public/main.js @@ -0,0 +1,16 @@ +document.addEventListener("DOMContentLoaded", async () => { "use strict"; + +const $ = s => document.querySelector(s); +const secure = location.protocol === "https:"; +sock.init(`ws${secure?"s":""}://${location.host}/ws`); + +sock.on("hello", e => { + console.log("hello", e); + sock.send("world", {foo:"bar"}); +}); + +sock.on("yay", e => { + console.log("yay", e); +}); + +}); diff --git a/public/sock.js b/public/sock.js new file mode 100644 index 0000000..b4905e5 --- /dev/null +++ b/public/sock.js @@ -0,0 +1,43 @@ +const sock = (() => { "use strict"; +const refresh = () => setTimeout(() => location.reload(), 1e3); + +let ws, pingTimeout; +const prequeue = []; +const handlers = { + "reset": [refresh], + "ping": [() => { + clearTimeout(pingTimeout); + pingTimeout = setTimeout(refresh, 3e4); + sock.send("pong", {}); + }], +}; + +const sock = { + init: url => { + ws = new WebSocket(url); + ws.addEventListener("close", refresh); + ws.addEventListener("error", refresh); + ws.addEventListener("message", e => { + const d = JSON.parse(e.data); + (handlers[d.type]||[]).forEach(cb => cb(d.data)); + }); + ws.addEventListener("open", e => { + while (prequeue.length) sock.send(...prequeue.shift()); + (handlers["open"]||[]).forEach(cb => cb()); + delete handlers["open"]; + }); + }, + + on: (type, cb) => { + if (type === "open" && ws && ws.readyState === WebSocket.OPEN) cb(); + else (handlers[type]||(handlers[type]=[])).push(cb); + }, + + send: (type, data) => { + if (ws && ws.readyState === WebSocket.OPEN) + ws.send(JSON.stringify({type, data})); + else prequeue.push([type, data]); + }, +}; + +return sock })(); diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..7078e88 --- /dev/null +++ b/public/style.css @@ -0,0 +1,7 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Roboto", sans-serif; + transition-timing-function: ease-in-out; +} -- cgit v1.2.3-70-g09d2