6 files changed, 88 insertions, 0 deletions
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 @@
+<pre>404 Not Found</pre>
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 @@
+<pre>500 Internal Server Error</pre>
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 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="theme-color" content="#fff">
+    <title>appname</title>
+
+    <link rel="icon" href="/favicon.png" type="image/png">
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap">
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <h1>appname</h1>
+
+    <script src="sock.js"></script>
+    <script src="main.js"></script>
+  </body>
+</html>
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;
+}