jurajk/knet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Robust websockets

Browse Source
This commit is contained in:
JurajKubrican
2024-12-30 13:42:52 +01:00
parent 73054d4325
commit f9ba885019
3 changed files with 114 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
views/boxes.html
View File

@@ -1,10 +1,5 @@
{{block "boxes" .}}
{{range $index, $value := .}}
<input type="checkbox" id="box-{{$index}}" name="checked" {{if $value}}checked{{end}}
hx-post="/box/{{$index}}"
hx-vals='{"value": this.checked}'
hx-trigger="change"
hx-encoding="none"
>
<input type="checkbox" id="box-{{$index}}" name="checked" {{if $value}}checked{{end}} >
{{end}}
{{end}}

107
views/index.html
View File

@@ -1,56 +1,93 @@
{{block "index" .}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/htmx.org@1.9.5"></script>
<style>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
</style>
</head>
<body class="bg-gray-900 text-white font-sans">
</head>
<body class="bg-gray-900 text-white font-sans">
<main id="main" class="max-w-3xl mx-auto p-6 rounded-lg">
<section>
<div class="mt-4">
{{template "boxes" .Boxes}}
</div>
</section>
<section>
<div class="mt-4">{{template "boxes" .Boxes}}</div>
</section>
</main>
<footer class="bg-gray-800 text-center p-4">
<!-- link to github -->
<div class="mt-4">
<a href="https://github.com/JurajKubrican" class="text-blue-500">Github</a>
</div>
<!-- Link to linkedin -->
<div class="mt-4">
<a href="https://www.linkedin.com/in/juraj-kubri%C4%8Dan-614b3274/" class="text-blue-500">LinkedIn</a>
</div>
<!-- link to github -->
<div class="mt-4">
<a href="https://github.com/JurajKubrican" class="text-blue-500"
>Github</a
>
</div>
<!-- Link to linkedin -->
<div class="mt-4">
<a
href="https://www.linkedin.com/in/juraj-kubri%C4%8Dan-614b3274/"
class="text-blue-500"
>LinkedIn</a
>
</div>
</footer>
</body>
</body>
</html>
<script>
const socket = new WebSocket("ws://" + window.location.host+"/ws");
let socket = new WebSocket("ws://" + window.location.host + "/ws");
socket.addEventListener("message", function(event) {
socket.addEventListener("message", function (event) {
if (event.data.startsWith("u:")) {
const items = event.data.split(";");
items.forEach((i) => {
const parts = event.data.split(":");
document.getElementById("box-"+parts[0]).checked = parts[1] === "+";
console.log("box-"+parts[0])
document.getElementById("box-" + parts[1]).checked = parts[2] === "+";
console.log("box-" + parts[1]);
});
return;
}
if (event.data.startsWith("i:")) {
const str = event.data.split("i:")[1];
const items = str.split(";");
if (items.length === 0) {
return;
}
document.querySelectorAll("input").forEach((input) => {
input.checked = false;
});
items.forEach((i) => {
console.log(i);
document.getElementById("box-" + i).checked = true;
});
return;
}
});
setInterval(() => {
socket.send("ping");
}, 10000);
document.querySelectorAll("input").forEach((input) => {
input.addEventListener("change", (event) => {
if (socket.readyState !== socket.OPEN) {
socket = new WebSocket("ws://" + window.location.host + "/ws");
}
const id = event.target.id.split("-")[1];
const value = event.target.checked ? "+" : "-";
socket.send("u:" + id + ":" + value);
});
});
</script>
{{end}}