use webassembly with the server acting only as an intermediate

2023-03-09 08:35:24 +01:00 · 2023-03-09 08:35:24 +01:00 · 7d0ef62c42
commit 7d0ef62c42
parent 9aa1130c35
29 changed files with 850 additions and 325 deletions
--- a/woweb/assets/index.html
+++ b/woweb/assets/index.html
@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Woweb Playground</title>
+  </head>
+  <body>
+    <textarea id="doctext" name="story" rows="5" cols="33">Things just happen, what the hell.</textarea>
+    <script type="module" src="/index.js"></script>
+  </body>
+</html>
--- a/woweb/assets/index.js
+++ b/woweb/assets/index.js
@ -0,0 +1,90 @@
+import init, { State } from "/dist_text_js.js";
+await init();
+
+const areaId = "doctext";
+const validEvents = [
+  "insertText",
+  "insertFromPaste",
+  "insertLineBreak",
+  "insertCompositionText",
+  "deleteContentBackward",
+  "deleteContentForward",
+];
+
+let selectionStart = 0;
+let selectionEnd = 0;
+
+let area;
+let ws;
+
+const uuid = self.crypto.randomUUID();
+const wsUrl = "ws://localhost:3000/ws";
+
+const state = State.default();
+
+function setup() {
+  area = document.querySelector(`#${areaId}`);
+  ws = new WebSocket(wsUrl);
+
+  setupUi();
+  setupWs();
+}
+
+function setupUi() {
+  document.addEventListener("selectionchange", onSelectionChange, false);
+  area.addEventListener("beforeinput", onInput, false);
+}
+
+function setupWs() {
+  ws.onclose = function (e) {
+    console.log(e);
+    setTimeout(() => {
+      ws = new WebSocket(wsUrl);
+    }, 2000);
+  };
+
+  ws.onmessage = function (e) {
+    let payload = JSON.parse(e.data);
+    if (payload.client !== uuid) {
+      const newText = state.apply(payload.ops);
+
+      state.text = payload.ops.length > 0 ? newText : payload.doc;
+      area.value = state.text;
+    }
+  };
+}
+
+function onSelectionChange() {
+  const activeElement = document.activeElement;
+
+  if (activeElement && activeElement.id === areaId) {
+    selectionStart = area.selectionStart;
+    selectionEnd = area.selectionEnd;
+  }
+}
+
+function onInput(event) {
+  const data = event.data ? event.data : "";
+  let ops = state.execute(event.inputType, selectionStart, selectionEnd, data, uuid);
+
+  if (!validEvents.includes(event.inputType)) return;
+
+  const payload = {
+    client: uuid,
+    ops
+  };
+
+  ws.send(JSON.stringify(payload));
+
+  console.log(selectionStart, selectionEnd);
+
+  // workaround for differences between firefox and chrome
+  // chrome does not fire selectionchange events on backspace/delete events,
+  // while firefox does
+  if (event.inputType === "deleteContentBackward") {
+    selectionStart = area.selectionStart - 1;
+    selectionEnd = area.selectionEnd - 1;
+  }
+}
+
+setup();