chore: add h3 example

unjs · Jan 29, 2024 · 894792a · 894792a
1 parent 2f3e983
commit 894792a
Show file tree

Hide file tree

Showing 14 changed files with 440 additions and 150 deletions.
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+ignore-workspace-root-check=true
diff --git a/examples/h3/app.ts b/examples/h3/app.ts
@@ -0,0 +1,34 @@
+import { createApp, createRouter, eventHandler } 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" })),
+  ),
+);
+
+// Listhen automatically sets up ws integration!
+export const websocket = defineWebSocketHooks({
+  open(peer) {
+    console.log("[ws] open", peer);
+  },
+
+  message(peer, message) {
+    console.log("[ws] message", peer, message);
+    if (message.text().includes("ping")) {
+      peer.send("pong");
+    }
+  },
+
+  close(peer, event) {
+    console.log("[ws] close", peer, event);
+  },
+
+  error(peer, error) {
+    console.log("[ws] error", peer, error);
+  },
+});
diff --git a/examples/h3/index.html.ts b/examples/h3/index.html.ts
@@ -0,0 +1,59 @@
+export const html = ({ name }) => /* html */ `<!doctype html>
+<head>
+  <title>CrossWS Test Page</title>
+</head>
+<body>
+  <h1>CrossWS Test Page (${name || "?"})</h1>
+
+  <button onclick="sendPing()">Send Ping</button>
+  <button onclick="connect()">Reconnect</button>
+  <button onclick="clearLogs()">Clear</button>
+
+  <pre id="logs"></pre>
+
+  <script type="module">
+    const url = "ws://"  + location.host + "/_ws";
+
+    const logsEl = document.querySelector("#logs");
+    let lastTime = performance.now();
+    const log = (...args) => {
+      const now = performance.now();
+      const time = Math.round((now - lastTime) * 1000) / 1000;
+      lastTime = now;
+
+      console.log("[ws]", ...args);
+      logsEl.innerText += "\\n (" + String(time).padStart(4, ' ') + "ms) " +  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");
+    }
+
+    await connect();
+    sendPing()
+  </script>
+</body>
+`;
diff --git a/examples/h3/package.json b/examples/h3/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "crossws-examples-h3",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "listhen --ws ./app.ts",
+    "dev": "listhen --ws -w ./app.ts"
+  },
+  "dependencies": {
+    "crossws": "latest",
+    "h3": "latest",
+    "listhen": "latest"
+  }
+}
diff --git a/package.json b/package.json
@@ -61,7 +61,7 @@
   ],
   "scripts": {
     "build": "unbuild",
-    "play:node": "jiti playground/node.ts",
+    "play:ws": "jiti playground/node-ws.ts",
     "play:uws": "jiti playground/node-uws.ts",
     "play:bun": "bun playground/bun.ts",
     "play:deno": "deno run -A playground/deno.ts",
@@ -83,13 +83,18 @@
     "consola": "^3.2.3",
     "eslint": "^8.56.0",
     "eslint-config-unjs": "^0.2.1",
+    "h3": "^1.10.1",
     "jiti": "^1.21.0",
+    "listhen": "^1.6.0",
     "prettier": "^3.2.4",
     "typescript": "^5.3.3",
     "uWebSockets.js": "github:uNetworking/uWebSockets.js#v20.33.0",
     "unbuild": "^2.0.0",
     "wrangler": "^3.25.0",
     "ws": "^8.16.0"
   },
+  "resolutions": {
+    "crossws": "workspace:*"
+  },
   "packageManager": "pnpm@8.15.0"
 }
diff --git a/playground/_common.ts b/playground/_common.ts
@@ -1,10 +1,7 @@
 import type { WebSocketHooks, WebSocketAdapter } from "../src";
 
-export const getIndexHTMLURL = () =>
-  new URL("public/index.html", import.meta.url);
-
-export const importIndexHTML = () =>
-  import("./public/index.html" as string).then((r) => r.default);
+export const getIndexHTML = (params) =>
+  import("../examples/h3/index.html.ts").then((r) => r.html(params));
 
 export function createDemo<T extends WebSocketAdapter>(
   adapter: T,

diff --git a/playground/bun.ts b/playground/bun.ts
@@ -1,18 +1,18 @@
 // You can run this demo using `bun --bun ./bun.ts` or `npm run play:bun` in repo
 
 import bunAdapter from "../src/adapters/bun";
-import { createDemo, getIndexHTMLURL } from "./_common";
+import { createDemo, getIndexHTML } from "./_common";
 
 const adapter = createDemo(bunAdapter);
 
 Bun.serve({
   port: 3001,
   websocket: adapter.websocket,
-  fetch(req, server) {
+  async fetch(req, server) {
     if (server.upgrade(req)) {
       return;
     }
-    return new Response(Bun.file(getIndexHTMLURL()), {
+    return new Response(await getIndexHTML({ name: "bun" }), {
       headers: { "Content-Type": "text/html" },
     });
   },

diff --git a/playground/cloudflare.ts b/playground/cloudflare.ts
@@ -1,10 +1,7 @@
 // You can run this demo using `npm run play:cf` in repo
-
 import type { Request, ExecutionContext } from "@cloudflare/workers-types";
-
 import cloudflareAdapter from "../src/adapters/cloudflare";
-
-import { createDemo, importIndexHTML } from "./_common.ts";
+import { createDemo, getIndexHTML } from "./_common.ts";
 
 const { handleUpgrade } = createDemo(cloudflareAdapter);
 
@@ -18,7 +15,7 @@ export default {
       return handleUpgrade(request, env, context);
     }
 
-    return new Response(await importIndexHTML(), {
+    return new Response(await getIndexHTML({ name: "cloudflare" }), {
       headers: { "content-type": "text/html" },
     });
   },

diff --git a/playground/deno.ts b/playground/deno.ts
@@ -5,16 +5,16 @@ import denoAdapter from "../dist/adapters/deno.mjs";
 // @ts-ignore
 import type * as _Deno from "../types/lib.deno.d.ts";
 
-import { createDemo, getIndexHTMLURL } from "./_common.ts";
+import { createDemo, getIndexHTML } from "./_common.ts";
 
 const adapter = createDemo(denoAdapter);
 
-Deno.serve({ port: 3001 }, (req) => {
+Deno.serve({ port: 3001 }, async (req) => {
   if (req.headers.get("upgrade") === "websocket") {
     return adapter.handleUpgrade(req);
   }
 
-  return new Response(Deno.readFileSync(getIndexHTMLURL()), {
+  return new Response(await getIndexHTML({ name: "deno" }), {
     headers: { "Content-Type": "text/html" },
   });
 });
diff --git a/playground/node-uws.ts b/playground/node-uws.ts
@@ -1,21 +1,17 @@
 // You can run this demo using `npm run play:node-uws` in repo
 
-import { readFileSync } from "node:fs";
-
 import { App } from "uWebSockets.js";
-
 import nodeAdapter from "../src/adapters/node-uws.ts";
-import { createDemo, getIndexHTMLURL } from "./_common";
+import { createDemo, getIndexHTML } from "./_common";
 
 const adapter = createDemo(nodeAdapter);
 
 const app = App().ws("/*", adapter.websocket);
 
-app.get("/*", (res, req) => {
+app.get("/*", async (res, req) => {
   res.writeStatus("200 OK");
   res.writeHeader("Content-Type", "text/html");
-  const indexHTML = readFileSync(getIndexHTMLURL(), "utf8");
-  res.end(indexHTML);
+  res.end(await getIndexHTML({ name: "node-uws" }));
 });
 
 app.listen(3001, () => {

diff --git a/playground/node.ts → playground/node-ws.ts b/playground/node.ts → playground/node-ws.ts
@@ -1,17 +1,14 @@
 // You can run this demo using `npm run play:node` in repo
 
 import { createServer } from "node:http";
-import { readFileSync } from "node:fs";
-
 import nodeAdapter from "../src/adapters/node";
-import { createDemo, getIndexHTMLURL } from "./_common";
+import { createDemo, getIndexHTML } from "./_common";
 
 const adapter = createDemo(nodeAdapter);
 
-const server = createServer((req, res) => {
+const server = createServer(async (req, res) => {
   res.writeHead(200, { "Content-Type": "text/html" });
-  const indexHTML = readFileSync(getIndexHTMLURL(), "utf8");
-  res.end(indexHTML);
+  res.end(await getIndexHTML({ name: "node-ws" }));
 });
 
 server.on("upgrade", adapter.handleUpgrade);

diff --git a/playground/public/index.html b/playground/public/index.html