LukeParke/crossws
1
0
Fork 0
mirror of https://github.com/LukeHagar/crossws.git synced 2025-12-10 12:27:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: add new playground

Browse Source
This commit is contained in:
Pooya Parsa
2024-02-24 23:29:35 +01:00
parent a6f0ca88b7
commit 4e82c557ff
4 changed files with 93 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
examples/h3/index.html.ts
View File

@@ -1,59 +0,0 @@
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>
`;

12
examples/h3/app.ts → examples/h3/index.ts
View File

@@ -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

4
examples/h3/package.json
View File

@@ -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",

89
examples/h3/public/index.html Normal file
View File

@@ -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/minstyle.io@2.0.2/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>