Skip to content

Commit 894792a

Browse files
pi0pi0
committed
chore: add h3 example
1 parent 2f3e983 commit 894792a

File tree

14 files changed

+440
-150
lines changed

14 files changed

+440
-150
lines changed

‎.npmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
ignore-workspace-root-check=true

‎examples/h3/app.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { createApp, createRouter, eventHandler } from "h3";
2+
import { defineWebSocketHooks } from "crossws";
3+
4+
const router = createRouter();
5+
export const app = createApp().use(router);
6+
7+
router.get(
8+
"/",
9+
eventHandler(() =>
10+
import("./index.html").then((r) => r.html({ name: "h3" })),
11+
),
12+
);
13+
14+
// Listhen automatically sets up ws integration!
15+
export const websocket = defineWebSocketHooks({
16+
open(peer) {
17+
console.log("[ws] open", peer);
18+
},
19+
20+
message(peer, message) {
21+
console.log("[ws] message", peer, message);
22+
if (message.text().includes("ping")) {
23+
peer.send("pong");
24+
}
25+
},
26+
27+
close(peer, event) {
28+
console.log("[ws] close", peer, event);
29+
},
30+
31+
error(peer, error) {
32+
console.log("[ws] error", peer, error);
33+
},
34+
});

‎examples/h3/index.html.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
export const html = ({ name }) => /* html */ `<!doctype html>
2+
<head>
3+
<title>CrossWS Test Page</title>
4+
</head>
5+
<body>
6+
<h1>CrossWS Test Page (${name || "?"})</h1>
7+
8+
<button onclick="sendPing()">Send Ping</button>
9+
<button onclick="connect()">Reconnect</button>
10+
<button onclick="clearLogs()">Clear</button>
11+
12+
<pre id="logs"></pre>
13+
14+
<script type="module">
15+
const url = "ws://" + location.host + "/_ws";
16+
17+
const logsEl = document.querySelector("#logs");
18+
let lastTime = performance.now();
19+
const log = (...args) => {
20+
const now = performance.now();
21+
const time = Math.round((now - lastTime) * 1000) / 1000;
22+
lastTime = now;
23+
24+
console.log("[ws]", ...args);
25+
logsEl.innerText += "\\n (" + String(time).padStart(4, ' ') + "ms) " + args.join(" ");
26+
};
27+
28+
let ws
29+
globalThis.connect = async () => {
30+
if (ws) {
31+
log("Closing...");
32+
ws.close();
33+
}
34+
35+
log("Connecting to", url, "...");
36+
ws = new WebSocket(url);
37+
38+
ws.addEventListener("message", (event) => {
39+
log("Message from server:", event.data);
40+
});
41+
42+
log("Waiting for connection...");
43+
await new Promise((resolve) => ws.addEventListener("open", resolve));
44+
}
45+
46+
globalThis.clearLogs = () => {
47+
logsEl.innerText = ''
48+
}
49+
50+
globalThis.sendPing = () => {
51+
log("Sending ping...");
52+
ws.send("ping");
53+
}
54+
55+
await connect();
56+
sendPing()
57+
</script>
58+
</body>
59+
`;

‎examples/h3/package.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "crossws-examples-h3",
3+
"version": "0.0.0",
4+
"private": true,
5+
"scripts": {
6+
"start": "listhen --ws ./app.ts",
7+
"dev": "listhen --ws -w ./app.ts"
8+
},
9+
"dependencies": {
10+
"crossws": "latest",
11+
"h3": "latest",
12+
"listhen": "latest"
13+
}
14+
}

‎package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
],
6262
"scripts": {
6363
"build": "unbuild",
64-
"play:node": "jiti playground/node.ts",
64+
"play:ws": "jiti playground/node-ws.ts",
6565
"play:uws": "jiti playground/node-uws.ts",
6666
"play:bun": "bun playground/bun.ts",
6767
"play:deno": "deno run -A playground/deno.ts",
@@ -83,13 +83,18 @@
8383
"consola": "^3.2.3",
8484
"eslint": "^8.56.0",
8585
"eslint-config-unjs": "^0.2.1",
86+
"h3": "^1.10.1",
8687
"jiti": "^1.21.0",
88+
"listhen": "^1.6.0",
8789
"prettier": "^3.2.4",
8890
"typescript": "^5.3.3",
8991
"uWebSockets.js": "github:uNetworking/uWebSockets.js#v20.33.0",
9092
"unbuild": "^2.0.0",
9193
"wrangler": "^3.25.0",
9294
"ws": "^8.16.0"
9395
},
96+
"resolutions": {
97+
"crossws": "workspace:*"
98+
},
9499
"packageManager": "[email protected]"
95100
}

‎playground/_common.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import type { WebSocketHooks, WebSocketAdapter } from "../src";
22

3-
export const getIndexHTMLURL = () =>
4-
new URL("public/index.html", import.meta.url);
5-
6-
export const importIndexHTML = () =>
7-
import("./public/index.html" as string).then((r) => r.default);
3+
export const getIndexHTML = (params) =>
4+
import("../examples/h3/index.html.ts").then((r) => r.html(params));
85

96
export function createDemo<T extends WebSocketAdapter>(
107
adapter: T,

‎playground/bun.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
// You can run this demo using `bun --bun ./bun.ts` or `npm run play:bun` in repo
22

33
import bunAdapter from "../src/adapters/bun";
4-
import { createDemo, getIndexHTMLURL } from "./_common";
4+
import { createDemo, getIndexHTML } from "./_common";
55

66
const adapter = createDemo(bunAdapter);
77

88
Bun.serve({
99
port: 3001,
1010
websocket: adapter.websocket,
11-
fetch(req, server) {
11+
async fetch(req, server) {
1212
if (server.upgrade(req)) {
1313
return;
1414
}
15-
return new Response(Bun.file(getIndexHTMLURL()), {
15+
return new Response(await getIndexHTML({ name: "bun" }), {
1616
headers: { "Content-Type": "text/html" },
1717
});
1818
},

‎playground/cloudflare.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
// You can run this demo using `npm run play:cf` in repo
2-
32
import type { Request, ExecutionContext } from "@cloudflare/workers-types";
4-
53
import cloudflareAdapter from "../src/adapters/cloudflare";
6-
7-
import { createDemo, importIndexHTML } from "./_common.ts";
4+
import { createDemo, getIndexHTML } from "./_common.ts";
85

96
const { handleUpgrade } = createDemo(cloudflareAdapter);
107

@@ -18,7 +15,7 @@ export default {
1815
return handleUpgrade(request, env, context);
1916
}
2017

21-
return new Response(await importIndexHTML(), {
18+
return new Response(await getIndexHTML({ name: "cloudflare" }), {
2219
headers: { "content-type": "text/html" },
2320
});
2421
},

‎playground/deno.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@ import denoAdapter from "../dist/adapters/deno.mjs";
55
// @ts-ignore
66
import type * as _Deno from "../types/lib.deno.d.ts";
77

8-
import { createDemo, getIndexHTMLURL } from "./_common.ts";
8+
import { createDemo, getIndexHTML } from "./_common.ts";
99

1010
const adapter = createDemo(denoAdapter);
1111

12-
Deno.serve({ port: 3001 }, (req) => {
12+
Deno.serve({ port: 3001 }, async (req) => {
1313
if (req.headers.get("upgrade") === "websocket") {
1414
return adapter.handleUpgrade(req);
1515
}
1616

17-
return new Response(Deno.readFileSync(getIndexHTMLURL()), {
17+
return new Response(await getIndexHTML({ name: "deno" }), {
1818
headers: { "Content-Type": "text/html" },
1919
});
2020
});

‎playground/node-uws.ts‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
// You can run this demo using `npm run play:node-uws` in repo
22

3-
import { readFileSync } from "node:fs";
4-
53
import { App } from "uWebSockets.js";
6-
74
import nodeAdapter from "../src/adapters/node-uws.ts";
8-
import { createDemo, getIndexHTMLURL } from "./_common";
5+
import { createDemo, getIndexHTML } from "./_common";
96

107
const adapter = createDemo(nodeAdapter);
118

129
const app = App().ws("/*", adapter.websocket);
1310

14-
app.get("/*", (res, req) => {
11+
app.get("/*", async (res, req) => {
1512
res.writeStatus("200 OK");
1613
res.writeHeader("Content-Type", "text/html");
17-
const indexHTML = readFileSync(getIndexHTMLURL(), "utf8");
18-
res.end(indexHTML);
14+
res.end(await getIndexHTML({ name: "node-uws" }));
1915
});
2016

2117
app.listen(3001, () => {

0 commit comments

Comments
 (0)