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

chore: update playground

Browse Source
This commit is contained in:
Pooya Parsa
2024-02-26 13:46:53 +01:00
parent 0ce11c5066
commit cbeb47218e
3 changed files with 80 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
examples/h3/index.ts
View File

@@ -10,12 +10,15 @@ export const websocket = {
hooks: defineHooks({
open(peer) {
console.log("[ws] open", peer);
peer.send({ user: "system", message: `Welcome ${peer}!` });
},
message(peer, message) {
console.log("[ws] message", peer, message);
if (message.text().includes("ping")) {
peer.send("pong");
peer.send({ user: "system", message: "pong" });
} else {
peer.send({ user: peer.toString(), message: message.toString() });
}
},

12
examples/h3/public/index.html
View File

@@ -110,6 +110,7 @@
ping,
clear,
connect,
rand: Math.random(),
}).mount();
await connect();
@@ -125,14 +126,11 @@
<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"
:src="'https://www.gravatar.com/avatar/' + (message.user + rand) + '?s=512&d=monsterid'"
alt="Avatar"
class="w-8 h-8 rounded-full"
/>
<div
class="ml-2 bg-gray-800 rounded-lg p-2"
style="max-width: 33.33vw"
>
<div class="ml-2 bg-gray-800 rounded-lg p-2">
<p
v-if="message.formattedText"
class="overflow-x-scroll"
@@ -150,6 +148,7 @@
<div
class="bg-gray-800 px-4 py-2 flex items-center justify-between fixed bottom-0 w-full"
>
<div class="w-full min-w-6">
<input
type="text"
placeholder="Type your message..."
@@ -157,6 +156,8 @@
@keydown.enter="send"
v-model="store.message"
/>
</div>
<div class="flex">
<button
class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
@click="send"
@@ -182,6 +183,7 @@
Clear
</button>
</div>
</div>
</main>
</body>
</html>

12
playground/_index.html.ts
View File

@@ -111,6 +111,7 @@ export default /* html */ `
ping,
clear,
connect,
rand: Math.random(),
}).mount();
await connect();
@@ -126,14 +127,11 @@ export default /* html */ `
<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"
:src="'https://www.gravatar.com/avatar/' + (message.user + rand) + '?s=512&d=monsterid'"
alt="Avatar"
class="w-8 h-8 rounded-full"
/>
<div
class="ml-2 bg-gray-800 rounded-lg p-2"
style="max-width: 33.33vw"
>
<div class="ml-2 bg-gray-800 rounded-lg p-2">
<p
v-if="message.formattedText"
class="overflow-x-scroll"
@@ -151,6 +149,7 @@ export default /* html */ `
<div
class="bg-gray-800 px-4 py-2 flex items-center justify-between fixed bottom-0 w-full"
>
<div class="w-full min-w-6">
<input
type="text"
placeholder="Type your message..."
@@ -158,6 +157,8 @@ export default /* html */ `
@keydown.enter="send"
v-model="store.message"
/>
</div>
<div class="flex">
<button
class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
@click="send"
@@ -183,6 +184,7 @@ export default /* html */ `
Clear
</button>
</div>
</div>
</main>
</body>
</html>