chore: add new playground

unjs · Feb 24, 2024 · 4e82c55 · 4e82c55
1 parent a6f0ca8
commit 4e82c55
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 71 deletions.
diff --git a/examples/h3/index.html.ts b/examples/h3/index.html.ts
diff --git a/examples/h3/app.ts → examples/h3/index.ts b/examples/h3/app.ts → examples/h3/index.ts
@@ -1,15 +1,7 @@
-import { createApp, createRouter, eventHandler } from "h3";
+import { createApp, createRouter } from "h3";
 import { defineWebSocketHooks } from "crossws";
 
-const router = createRouter();
-export const app = createApp().use(router);
-
-router.get(
-  "/",
-  eventHandler(() =>
-    import("./index.html").then((r) => r.html({ name: "h3" })),
-  ),
-);
+export const app = createApp();
 
 // Listhen automatically sets up integration!
 // Learn more: https://crossws.unjs.io

diff --git a/examples/h3/package.json b/examples/h3/package.json
@@ -3,8 +3,8 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "listhen --ws ./app.ts",
-    "dev": "listhen --ws -w ./app.ts"
+    "start": "listhen --ws .",
+    "dev": "listhen --ws -w ."
   },
   "dependencies": {
     "crossws": "latest",

diff --git a/examples/h3/public/index.html b/examples/h3/public/index.html
@@ -0,0 +1,89 @@
+<!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>
+
+    <div id="logs"></div>
+
+    <script type="module">
+      const url = "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>