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

55
src/main.go
View File

@@ -5,6 +5,7 @@ import (
"io"
"net/http"
"strconv"
"strings"
"sync"
"github.com/labstack/echo/v4"
@@ -98,33 +99,44 @@ func main() {
return c.Render(http.StatusOK, "article", article)
})
e.POST("/box/:id", updateBoxes)
e.GET("/ws", initWs)
e.Logger.Fatal(e.Start(":54321"))
}
func updateBoxes(c echo.Context) error {
id := c.Param("id")
checked := c.FormValue("checked") == "on"
func sendUpdate(index int, checked bool) {
message := formatMessage(index, checked)
broadcastMessage(message)
}
index, err := strconv.Atoi(id)
if err != nil {
return c.String(http.StatusBadRequest, "Invalid ID")
}
boxes[index] = checked
message := strconv.Itoa(index)
func formatMessage(index int, checked bool) string {
message := "u:" + strconv.Itoa(index)
if checked {
message += ":+"
} else {
message += ":-"
}
return message
}
broadcastMessage(message)
func handleMessage(msg string, ws *websocket.Conn) error {
if strings.Contains(msg, "u:") {
parts := strings.Split(msg, ":")
index, err := strconv.Atoi(parts[1])
if err != nil {
return err
}
checked := parts[2] == "+"
return c.JSON(200, "[]")
boxes[index] = checked
sendUpdate(index, checked)
}
if strings.Contains(msg, "ping") {
len := len(wsConnections)
websocket.Message.Send(ws, "pong-"+strconv.Itoa(len))
}
return nil
}
func initWs(c echo.Context) error {
@@ -133,6 +145,18 @@ func initWs(c echo.Context) error {
wsConnections[ws] = true
wsMutex.Unlock()
initialState := "i:"
for index, checked := range boxes {
if checked {
initialState += strconv.Itoa(index) + ";"
}
}
if err := websocket.Message.Send(ws, initialState); err != nil {
log.Errorf("Failed to send initial data: %v", err)
return
}
for {
var msg string
if err := websocket.Message.Receive(ws, &msg); err != nil {
@@ -142,7 +166,10 @@ func initWs(c echo.Context) error {
ws.Close()
break
}
handleMessage(msg, ws)
log.Infof("Received message: %s", msg)
}
}).ServeHTTP(c.Response(), c.Request())
return nil
}

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}}