waylon/ws-playground
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

its working

Browse source
This commit is contained in:
Waylon S. Walker 2025-03-16 20:32:02 -05:00
parent 3410f98d7e
commit 30d01b82b0
2 changed files with 119 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

70
templates/index.html
View file

@ -7,62 +7,78 @@
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/ws.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style>
#ws-status {
position: fixed;
top: 10px;
right: 10px;
padding: 5px 10px;
border-radius: 5px;
font-weight: bold;
}
.connecting { background-color: orange; color: white; }
.connected { background-color: green; color: white; }
.disconnected { background-color: red; color: white; }
.error { background-color: darkred; color: white; }
</style>
<script src="https://unpkg.com/hyperscript.org@0.9.14"></script>
<script>
window.onload = () => {
document.getElementById("chatInput").focus();
const messagesContainer = document.getElementById("chat_room");
messagesContainer.scrollTop = messagesContainer.scrollHeight;
};
</script>
</head>
<body>
<body onload="window.scrollTo(0, document.body.scrollHeight);">
<div class="flex flex-col gap-2 justify-center items-center" hx-ext="ws" ws-connect="/ws">
<h2>WebSocket HTML Example</h2>
<div id="ws-status" class="disconnected">Disconnected</div>
<div id="notifications"></div>
<ul id="chat_room" hx-swap-oob='beforeend'>
<div id="ws-status"
class="disconnected fixed top-0 right-0 px-2 py-1 rounded font-bold m-4"
>Disconnected</div>
<ul
id="notifications"
class="fixed top-0 left-0 px-2 py-1 rounded font-bold m-4"
></ul>
<ul id="chat_room"
hx-swap-oob='beforeend'
>
</ul>
<form id="form" ws-send class="flex gap-2 fixed bottom-0">
<input id="chatInput" name="chat_message" class='px-2 py-1 bg-gray-800 border border-gray-600 rounded' type="text">
<div id='after_chat_wrapper'>
</div>
<form id="form" ws-send class="flex gap-2 fixed bottom-0 w-full p-4 bg-gray-900">
<input id="chatInput" name="chat_message" class='w-124 min-h-24 rounded-lg px-2 py-1 mx-auto bg-gray-800 border border-gray-600 rounded' type="text">
</form>
<div id="after_form" class='mb-24'>
<button
id="go_to_bottom"
class="fixed bottom-0 right-0 px-2 py-1 rounded font-bold m-4 invisible"
hx-get="/null"
hx-swap="outerHTML"
hx-trigger="intersect from:#after_chat"
_="
on load
wait 10ms
remove .invisible
on click
go to bottom of the body
"
>
go to bottom
</button>
</div>
</div>
</body>
<script>
document.addEventListener("htmx:wsConnecting", function() {
updateStatus("Connecting...", "connecting");
updateStatus("Connecting...", "bg-orange-500");
});
document.addEventListener("htmx:wsOpen", function() {
updateStatus("Connected", "connected");
updateStatus("Connected", "bg-green-500");
});
document.addEventListener("htmx:wsClose", function() {
updateStatus("Disconnected", "disconnected");
updateStatus("Disconnected", "bg-red-500");
});
document.addEventListener("htmx:wsError", function() {
updateStatus("Error!", "error");
updateStatus("Error!", "bg-red-500");
});
function updateStatus(text, statusClass) {
let statusElement = document.getElementById("ws-status");
statusElement.textContent = text;
statusElement.className = statusClass;
statusElement.classList.remove('bg-orange-500', 'bg-green-500', 'bg-red-500');
statusElement.classList.add(statusClass);
}
</script>
</html>