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({ hooks: defineHooks({
open(peer) { open(peer) {
console.log("[ws] open", peer); console.log("[ws] open", peer);
peer.send({ user: "system", message: `Welcome ${peer}!` });
}, },
message(peer, message) { message(peer, message) {
console.log("[ws] message", peer, message); console.log("[ws] message", peer, message);
if (message.text().includes("ping")) { if (message.text().includes("ping")) {
peer.send("pong"); peer.send({ user: "system", message: "pong" });
} else {
peer.send({ user: peer.toString(), message: message.toString() });
} }
}, },

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

@@ -110,6 +110,7 @@
ping, ping,
clear, clear,
connect, connect,
rand: Math.random(),
}).mount(); }).mount();
await connect(); await connect();
@@ -125,14 +126,11 @@
<p class="text-gray-500 mb-1 text-xs ml-10">{{ message.user }}</p> <p class="text-gray-500 mb-1 text-xs ml-10">{{ message.user }}</p>
<div class="flex items-center"> <div class="flex items-center">
<img <img
src="https://robohash.org/a" :src="'https://www.gravatar.com/avatar/' + (message.user + rand) + '?s=512&d=monsterid'"
alt="Avatar" alt="Avatar"
class="w-8 h-8 rounded-full" class="w-8 h-8 rounded-full"
/> />
<div <div class="ml-2 bg-gray-800 rounded-lg p-2">
class="ml-2 bg-gray-800 rounded-lg p-2"
style="max-width: 33.33vw"
>
<p <p
v-if="message.formattedText" v-if="message.formattedText"
class="overflow-x-scroll" class="overflow-x-scroll"
@@ -150,37 +148,41 @@
<div <div
class="bg-gray-800 px-4 py-2 flex items-center justify-between fixed bottom-0 w-full" class="bg-gray-800 px-4 py-2 flex items-center justify-between fixed bottom-0 w-full"
> >
<input <div class="w-full min-w-6">
type="text" <input
placeholder="Type your message..." type="text"
class="w-full rounded-l-lg px-4 py-2 bg-gray-700 text-white focus:outline-none focus:ring focus:border-blue-300" placeholder="Type your message..."
@keydown.enter="send" class="w-full rounded-l-lg px-4 py-2 bg-gray-700 text-white focus:outline-none focus:ring focus:border-blue-300"
v-model="store.message" @keydown.enter="send"
/> v-model="store.message"
<button />
class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4" </div>
@click="send" <div class="flex">
> <button
Send class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
</button> @click="send"
<button >
class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4" Send
@click="ping" </button>
> <button
Ping class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
</button> @click="ping"
<button >
class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4" Ping
@click="connect" </button>
> <button
Reconnect class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
</button> @click="connect"
<button >
class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-r-lg" Reconnect
@click="clear" </button>
> <button
Clear class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-r-lg"
</button> @click="clear"
>
Clear
</button>
</div>
</div> </div>
</main> </main>
</body> </body>

74
playground/_index.html.ts
View File

@@ -111,6 +111,7 @@ export default /* html */ `
ping, ping,
clear, clear,
connect, connect,
rand: Math.random(),
}).mount(); }).mount();
await connect(); await connect();
@@ -126,14 +127,11 @@ export default /* html */ `
<p class="text-gray-500 mb-1 text-xs ml-10">{{ message.user }}</p> <p class="text-gray-500 mb-1 text-xs ml-10">{{ message.user }}</p>
<div class="flex items-center"> <div class="flex items-center">
<img <img
src="https://robohash.org/a" :src="'https://www.gravatar.com/avatar/' + (message.user + rand) + '?s=512&d=monsterid'"
alt="Avatar" alt="Avatar"
class="w-8 h-8 rounded-full" class="w-8 h-8 rounded-full"
/> />
<div <div class="ml-2 bg-gray-800 rounded-lg p-2">
class="ml-2 bg-gray-800 rounded-lg p-2"
style="max-width: 33.33vw"
>
<p <p
v-if="message.formattedText" v-if="message.formattedText"
class="overflow-x-scroll" class="overflow-x-scroll"
@@ -151,37 +149,41 @@ export default /* html */ `
<div <div
class="bg-gray-800 px-4 py-2 flex items-center justify-between fixed bottom-0 w-full" class="bg-gray-800 px-4 py-2 flex items-center justify-between fixed bottom-0 w-full"
> >
<input <div class="w-full min-w-6">
type="text" <input
placeholder="Type your message..." type="text"
class="w-full rounded-l-lg px-4 py-2 bg-gray-700 text-white focus:outline-none focus:ring focus:border-blue-300" placeholder="Type your message..."
@keydown.enter="send" class="w-full rounded-l-lg px-4 py-2 bg-gray-700 text-white focus:outline-none focus:ring focus:border-blue-300"
v-model="store.message" @keydown.enter="send"
/> v-model="store.message"
<button />
class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4" </div>
@click="send" <div class="flex">
> <button
Send class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
</button> @click="send"
<button >
class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4" Send
@click="ping" </button>
> <button
Ping class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
</button> @click="ping"
<button >
class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4" Ping
@click="connect" </button>
> <button
Reconnect class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
</button> @click="connect"
<button >
class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-r-lg" Reconnect
@click="clear" </button>
> <button
Clear class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-r-lg"
</button> @click="clear"
>
Clear
</button>
</div>
</div> </div>
</main> </main>
</body> </body>