84 lines
3.2 KiB
HTML
84 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class='dark h-full bg-gray-900 text-white'>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WebSocket HTML</title>
|
|
<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>
|
|
<script src="https://unpkg.com/hyperscript.org@0.9.14"></script>
|
|
<script>
|
|
window.onload = () => {
|
|
document.getElementById("chatInput").focus();
|
|
};
|
|
</script>
|
|
</head>
|
|
<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 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>
|
|
|
|
<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...", "bg-orange-500");
|
|
});
|
|
|
|
document.addEventListener("htmx:wsOpen", function() {
|
|
updateStatus("Connected", "bg-green-500");
|
|
});
|
|
|
|
document.addEventListener("htmx:wsClose", function() {
|
|
updateStatus("Disconnected", "bg-red-500");
|
|
});
|
|
|
|
document.addEventListener("htmx:wsError", function() {
|
|
updateStatus("Error!", "bg-red-500");
|
|
});
|
|
|
|
function updateStatus(text, statusClass) {
|
|
let statusElement = document.getElementById("ws-status");
|
|
statusElement.textContent = text;
|
|
statusElement.classList.remove('bg-orange-500', 'bg-green-500', 'bg-red-500');
|
|
statusElement.classList.add(statusClass);
|
|
}
|
|
</script>
|
|
</html>
|