Skip to content

Commit

Permalink
chore: update playground
Browse files Browse the repository at this point in the history
  • Loading branch information
@pi0
pi0 committed Feb 26, 2024
1 parent 54e0dca commit a6879bd
Show file tree
Hide file tree
Showing 3 changed files with 274 additions and 118 deletions.
184 changes: 126 additions & 58 deletions examples/h3/public/index.html
View file
Expand Up @@ -2,89 +2,157 @@
<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>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
background-color: #1a1a1a;
}
</style>
<script type="module">
// https://github.com/vuejs/petite-vue
import {
createApp,
reactive,
nextTick,
} from "https://esm.sh/petite-vue@0.4.1";

<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>
let ws;

<pre id="logs"></pre>
const store = reactive({
message: "",
messages: [],
});

<script type="module">
const isSecure = location.protocol === "https:";
const url = (isSecure ? "wss://" : "ws://") + location.host + "/_ws";
const scroll = () => {
nextTick(() => {
const el = document.querySelector("#messages");
el.scrollTop = el.scrollHeight;
el.scrollTo({
top: el.scrollHeight,
behavior: "smooth",
});
});
};

const logsEl = document.querySelector("#logs");
let lastTime = performance.now();
const log = (...args) => {
console.log("[ws]", ...args);
logsEl.innerHTML += `<br>${args.join(" ")}`;
const log = (user, ...args) => {
console.log("[ws]", user, ...args);
store.messages.push({
text: args.join(" "),
user: user,
date: new Date().toLocaleString(),
});
scroll();
};

let ws;
globalThis.connect = async () => {
const connect = async () => {
const isSecure = location.protocol === "https:";
const url = (isSecure ? "wss://" : "ws://") + location.host + "/_ws";
if (ws) {
log("Closing...");
log("system", "closing");
ws.close();
}

log("Connecting to", url, "...");
log("system", "Connecting to", url, "...");
ws = new WebSocket(url);

ws.addEventListener("message", (event) => {
log("Message from server:", event.data);
log("server", event.data);
});

log("Waiting for connection...");
log("system", "Waiting for connection...");
await new Promise((resolve) => ws.addEventListener("open", resolve));
};

globalThis.clearLogs = () => {
logsEl.innerText = "";
const clear = () => {
store.messages.splice(0, store.messages.length);
log("system", "previous messages cleared");
};

globalThis.sendPing = () => {
log("Sending ping...");
ws.send("ping");
const send = () => {
console.log("sending message...");
if (store.message) {
log("you", store.message);
ws.send(store.message);
}
store.message = "";
};

globalThis.sendMessage = () => {
ws.send(document.querySelector("#message").value);
const ping = () => {
log("you", "Sending ping");
ws.send("ping");
};

createApp({
store,
send,
ping,
clear,
connect,
}).mount();

await connect();
sendPing();
ping();
send("foo");
</script>
</head>
<body class="h-screen flex flex-col justify-between">
<main v-scope="{}">
<!-- Messages -->
<div id="messages" class="flex-grow flex flex-col justify-end px-4 py-8">
<div class="flex items-center mb-4" v-for="message in store.messages">
<div class="flex flex-col">
<p class="text-gray-500 mb-1 text-xs ml-10">{{ message.user }}</p>
<div class="flex items-center">
<img
src="https://robohash.org/a"
alt="Avatar"
class="w-8 h-8 rounded-full"
/>
<div class="ml-2 bg-gray-800 rounded-lg p-2">
<p class="text-white">{{ message.text }}</p>
</div>
</div>
<p class="text-gray-500 mt-1 text-xs ml-10">{{ message.date }}</p>
</div>
</div>
</div>

<!-- Chatbox -->
<div
class="bg-gray-800 px-4 py-2 flex items-center justify-between fixed bottom-0 w-full"
>
<input
type="text"
placeholder="Type your message..."
class="w-full rounded-l-lg px-4 py-2 bg-gray-700 text-white focus:outline-none focus:ring focus:border-blue-300"
@keydown.enter="send"
v-model="store.message"
/>
<button
class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
@click="send"
>
Send
</button>
<button
class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
@click="ping"
>
Ping
</button>
<button
class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
@click="connect"
>
Reconnect
</button>
<button
class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-r-lg"
@click="clear"
>
Clear
</button>
</div>
</main>
</body>
</html>

0 comments on commit a6879bd

Please sign in to comment.