chore: use seperate playground index

unjs · Feb 26, 2024 · 889b37b · 889b37b
1 parent 64c8fbf
commit 889b37b
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 3 deletions.
diff --git a/playground/_index.html.ts b/playground/_index.html.ts
@@ -0,0 +1,91 @@
+export default /* html */ `<!doctype html>
+<html lang="en" data-theme="dark">
+  <head>
+    <title>CrossWS Test Page</title>
+    <!-- https://minstyle.io/ -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/minstyle.io.min.css"
+    />
+  </head>
+  <body class="ms-m-5">
+    <h3>WebSocket Test Page</h3>
+
+    <div class="ms-btn-group">
+      <button onclick="sendPing()">Send Ping</button>
+      <button onclick="connect()">Reconnect</button>
+      <button onclick="clearLogs()">Clear</button>
+    </div>
+
+    <div class="ms-form-group ms-mt-2">
+      <div class="row">
+        <div class="col-sm-6">
+          <input
+            type="email"
+            class="ms-secondary ms-small"
+            id="message"
+            placeholder="Message..."
+            value="ping"
+            onkeypress="if(event.key==='Enter') sendMessage()"
+          />
+        </div>
+        <div class="col-sm-1">
+          <button class="ms-btn ms-secondary ms-small" onclick="sendMessage()">
+            Send
+          </button>
+        </div>
+      </div>
+      <br />
+    </div>
+
+    <pre id="logs"></pre>
+
+    <script type="module">
+      const isSecure = location.protocol === "https:";
+      const url = (isSecure ? "wss://" : "ws://") + location.host + "/_ws";
+
+      const logsEl = document.querySelector("#logs");
+      let lastTime = performance.now();
+      const log = (...args) => {
+        console.log("[ws]", ...args);
+        logsEl.innerHTML += "<br>" + args.join(" ");
+      };
+
+      let ws;
+      globalThis.connect = async () => {
+        if (ws) {
+          log("Closing...");
+          ws.close();
+        }
+
+        log("Connecting to", url, "...");
+        ws = new WebSocket(url);
+
+        ws.addEventListener("message", (event) => {
+          log("Message from server:", event.data);
+        });
+
+        log("Waiting for connection...");
+        await new Promise((resolve) => ws.addEventListener("open", resolve));
+      };
+
+      globalThis.clearLogs = () => {
+        logsEl.innerText = "";
+      };
+
+      globalThis.sendPing = () => {
+        log("Sending ping...");
+        ws.send("ping");
+      };
+
+      globalThis.sendMessage = () => {
+        ws.send(document.querySelector("#message").value);
+      };
+
+      await connect();
+      sendPing();
+    </script>
+  </body>
+</html>
+`;
diff --git a/playground/_shared.ts b/playground/_shared.ts
@@ -1,9 +1,7 @@
 import { ResolveHooks, Adapter, defineHooks } from "../src/index.ts";
 
 export const getIndexHTML = () =>
-  fetch(
-    "https://raw.githubusercontent.com/unjs/crossws/main/examples/h3/public/index.html",
-  ).then((res) => res.text());
+  import("./_index.html.ts").then((r) => r.default);
 
 export function createDemo<T extends Adapter<any, any>>(
   adapter: T,