From 11157d27fc774a5dc082c575c33fb60544f74b67 Mon Sep 17 00:00:00 2001 From: alex Date: Sat, 18 Feb 2023 14:17:44 +0100 Subject: [PATCH] added websocket --- dist/index.html | 4 ++ dist/script.js | 71 +++++++++++++++++++++++++--------- dist/style.css | 16 +++++++- go.mod | 2 +- go.sum | 2 + main.go | 4 ++ socketclients/socketclients.go | 13 +++++++ socketserver/hub.go | 5 +++ 8 files changed, 97 insertions(+), 20 deletions(-) diff --git a/dist/index.html b/dist/index.html index 526ef75..fea362e 100644 --- a/dist/index.html +++ b/dist/index.html @@ -8,6 +8,10 @@ +
+ 0 viewers +
+
diff --git a/dist/script.js b/dist/script.js index 0371534..e6df5da 100644 --- a/dist/script.js +++ b/dist/script.js @@ -11,9 +11,9 @@ const messageTypes = [ "ERR" ] const messageTypesColors = [ - "#e74c3c", - "#95a5a6", - "#ecf0f1" + "#ecf0f1", + "#1abc9c", + "#e74c3c" ] const messageColors = [ @@ -30,11 +30,11 @@ const serviceNames = [ "WS" ] const serviceNamesColors = [ - "yellow", - "orange", - "blue", - "green", - "purple" + "#f1c40f", + "#e67e22", + "#2980b9", + "#16a085", + "#1abc9c" ] const serviceTypes = [ @@ -43,16 +43,21 @@ const serviceTypes = [ "STABLE" ] const serviceTypesColors = [ - "red", - "orange", - "blue" + "#9b59b6", + "#e67e22", + "#2ecc71" ] -const wsAddress = "ws://localhost:50000/ws?auth=aksmdaksdmaskdm213askm" +const wsAddress = "ws://192.168.178.93:50000/ws?auth=aksmdaksdmaskdm213askm" /** * Begin of code */ +const viewersCount = document.getElementById("viewers-count") +const checkboxAlpha = document.getElementById("checkbox-alpha") +const checkboxBeta = document.getElementById("checkbox-beta") +const checkboxStable = document.getElementById("checkbox-stable") + const messages = document.getElementById("messages") let autoScroll = true; @@ -74,6 +79,24 @@ function addMessage(messageType, serviceType, serviceName, message, timestamp) { deleteOldMessages() } +function addViewerInfoMessage(joined, timestamp) { + let li = document.createElement("li") + + if (joined) { + li.innerHTML = formatDate(timestamp) + "A client has joined" + } else { + li.innerHTML = formatDate(timestamp) + "A client has left" + } + + messages.appendChild(li) + + if (autoScroll) { + li.scrollIntoView() + } + + deleteOldMessages() +} + function deleteOldMessages() { if (messages.childElementCount > 500) { messages.removeChild(messages.getElementsByTagName("li")[0]) @@ -89,8 +112,7 @@ function clampClosed() { } function formatDate(timestamp) { - const date = new Date(timestamp * 1000) - console.log(date) + const date = new Date(timestamp) return clampOn() + "" + @@ -156,13 +178,26 @@ function connectWS() { } ws.onmessage = (msg) => { - console.log("rec msg:", msg.data) - let data = JSON.parse(msg.data) - console.log("data", data) + messageType = data.MessageType + serviceName = data.ServiceName + serviceType = data.ServiceType + timestamp = data.Timestamp - addMessage(data["MessageType"], data["ServiceType"], data["ServiceName"], data["Msg"], data["Timestamp"]) + console.log(timestamp) + + if (messageType == 100 && serviceName == 100) { + viewersCount.innerHTML = data.Msg + (data.Msg == 1 ? " viewer" : " viewers") + + addViewerInfoMessage(serviceType == 1, timestamp) + } else { + if (serviceType == 0 && !checkboxAlpha.checked) return + if (serviceType == 1 && !checkboxBeta.checked) return + if (serviceType == 2 && !checkboxStable.checked) return + + addMessage(messageType, serviceType, serviceName, data["Msg"], timestamp) + } } ws.onclose = (e) => { diff --git a/dist/style.css b/dist/style.css index 6dbdf36..5766f9f 100644 --- a/dist/style.css +++ b/dist/style.css @@ -66,7 +66,7 @@ button { .checkbox-container .checkbox-container-inside { position: absolute; - top: 70px; + top: 90px; right: 0; } @@ -79,4 +79,18 @@ input[type="checkbox" i] { padding: initial; border: initial; color: rgb(55, 142, 240); +} + +.viewers-container { + position: absolute; + top: 10px; + position: -webkit-sticky; /* Safari */ + position: sticky; + color: #fff; +} + +.viewers-container span { + position: absolute; + top: 65px; + right: 0; } \ No newline at end of file diff --git a/go.mod b/go.mod index 92cb2f4..eda5a3e 100644 --- a/go.mod +++ b/go.mod @@ -3,7 +3,7 @@ module clickandjoin.app/managementsystem go 1.18 require ( - git.clickandjoin.umbach.dev/ClickandJoin/go-cnj-helper v1.0.44 + git.clickandjoin.umbach.dev/ClickandJoin/go-cnj-helper v1.0.45 github.com/gocql/gocql v0.0.0-20211015133455-b225f9b53fa1 github.com/gofiber/fiber/v2 v2.42.0 github.com/joho/godotenv v1.5.0 diff --git a/go.sum b/go.sum index a3bdadb..7b4e446 100644 --- a/go.sum +++ b/go.sum @@ -10,6 +10,8 @@ git.clickandjoin.umbach.dev/ClickandJoin/go-cnj-helper v1.0.43 h1:5CtlOuz7EWOOYU git.clickandjoin.umbach.dev/ClickandJoin/go-cnj-helper v1.0.43/go.mod h1:Jzc4/4ntrOLMOZYnUjkr1uBCVtRvPbEbQD+8kwBOdf4= git.clickandjoin.umbach.dev/ClickandJoin/go-cnj-helper v1.0.44 h1:eS+W8qa+6VFk1X/Nn6JNzSYn4vGfAFymye2G3P+CLTQ= git.clickandjoin.umbach.dev/ClickandJoin/go-cnj-helper v1.0.44/go.mod h1:Jzc4/4ntrOLMOZYnUjkr1uBCVtRvPbEbQD+8kwBOdf4= +git.clickandjoin.umbach.dev/ClickandJoin/go-cnj-helper v1.0.45 h1:btSDPJJrXbusoLizl7W0IyNe7cYqGfVOuAPVilDwGWE= +git.clickandjoin.umbach.dev/ClickandJoin/go-cnj-helper v1.0.45/go.mod h1:Jzc4/4ntrOLMOZYnUjkr1uBCVtRvPbEbQD+8kwBOdf4= github.com/andybalholm/brotli v1.0.4 h1:V7DdXeJtZscaqfNuAdSRuRFzuiKlHSC/Zh3zl9qY3JY= github.com/andybalholm/brotli v1.0.4/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig= github.com/bitly/go-hostpool v0.0.0-20171023180738-a3a6125de932 h1:mXoPYz/Ul5HYEDvkta6I8/rnYM5gSdSV2tJ6XbZuEtY= diff --git a/main.go b/main.go index 5e955c0..97e410c 100644 --- a/main.go +++ b/main.go @@ -15,6 +15,8 @@ package main import ( + "time" + "clickandjoin.app/managementsystem/modules/config" "clickandjoin.app/managementsystem/modules/rabbitmq" "clickandjoin.app/managementsystem/modules/scylladb" @@ -74,5 +76,7 @@ func main() { router.SetupRoutes(app) + gocnjhelper.LogInfof("%s", time.Now().UnixMilli()) + app.Listen(cfg.Host + ":" + cfg.Port) } diff --git a/socketclients/socketclients.go b/socketclients/socketclients.go index 94858a9..014e998 100644 --- a/socketclients/socketclients.go +++ b/socketclients/socketclients.go @@ -1,6 +1,9 @@ package socketclients import ( + "strconv" + "time" + "clickandjoin.app/managementsystem/modules/cache" gocnjhelper "git.clickandjoin.umbach.dev/ClickandJoin/go-cnj-helper" ) @@ -10,3 +13,13 @@ func BroadcastLogMessage(rabbitMqLogMessage gocnjhelper.RabbitMqLogMessage) { client.SendMessage(rabbitMqLogMessage) } } + +func BroadcastViewersCountMessage(joined int) { + BroadcastLogMessage(gocnjhelper.RabbitMqLogMessage{ + MessageType: 100, + ServiceName: 100, + ServiceType: uint8(joined), + Msg: strconv.Itoa(len(cache.GetSocketClients())), + Timestamp: time.Now().UnixMilli(), + }) +} diff --git a/socketserver/hub.go b/socketserver/hub.go index 3cf421e..e654454 100644 --- a/socketserver/hub.go +++ b/socketserver/hub.go @@ -3,6 +3,7 @@ package socketserver import ( "clickandjoin.app/managementsystem/modules/cache" "clickandjoin.app/managementsystem/modules/structs" + "clickandjoin.app/managementsystem/socketclients" gocnjhelper "git.clickandjoin.umbach.dev/ClickandJoin/go-cnj-helper" "github.com/gofiber/websocket/v2" "github.com/google/uuid" @@ -24,6 +25,8 @@ func RunHub() { cache.AddSocketClient(newSocketClient.ClientId, newSocketClient) + socketclients.BroadcastViewersCountMessage(1) + case data := <-broadcast: gocnjhelper.LogDebugf("RECEIVED WEBSOCKET MESSAGE: %s", data.Msg) @@ -32,6 +35,8 @@ func RunHub() { if connection == client.Conn { gocnjhelper.LogDebugf("UNREGISTER CLIENT: %s", id) cache.DeleteClient(id) + + socketclients.BroadcastViewersCountMessage(0) } } }