ClickandJoin
/
ManagementSystem
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added websocket

alpha
alex 2023-02-18 14:17:44 +01:00
parent a8d9707870
commit 11157d27fc
8 changed files with 97 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dist/index.html vendored
View File

@ -8,6 +8,10 @@
<link rel="stylesheet" href="/dist/style.css"> <link rel="stylesheet" href="/dist/style.css">
</head> </head>
<body> <body>
<div class="viewers-container">
<span id="viewers-count">0 viewers</span>
</div>
<div class="scroll-container"> <div class="scroll-container">
<button id="btn-toggle-scroll">Auto scroll: <span id="scroll-state" style="color: #27ae60; font-weight: bold;">on</span></button> <button id="btn-toggle-scroll">Auto scroll: <span id="scroll-state" style="color: #27ae60; font-weight: bold;">on</span></button>
</div> </div>

71
dist/script.js vendored
View File

@ -11,9 +11,9 @@ const messageTypes = [
"ERR" "ERR"
] ]
const messageTypesColors = [ const messageTypesColors = [
"#e74c3c", "#ecf0f1",
"#95a5a6", "#1abc9c",
"#ecf0f1" "#e74c3c"
] ]
const messageColors = [ const messageColors = [
@ -30,11 +30,11 @@ const serviceNames = [
"WS" "WS"
] ]
const serviceNamesColors = [ const serviceNamesColors = [
"yellow", "#f1c40f",
"orange", "#e67e22",
"blue", "#2980b9",
"green", "#16a085",
"purple" "#1abc9c"
] ]
const serviceTypes = [ const serviceTypes = [
@ -43,16 +43,21 @@ const serviceTypes = [
"STABLE" "STABLE"
] ]
const serviceTypesColors = [ const serviceTypesColors = [
"red", "#9b59b6",
"orange", "#e67e22",
"blue" "#2ecc71"
] ]
const wsAddress = "ws://localhost:50000/ws?auth=aksmdaksdmaskdm213askm" const wsAddress = "ws://192.168.178.93:50000/ws?auth=aksmdaksdmaskdm213askm"
/** /**
* Begin of code * 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") const messages = document.getElementById("messages")
let autoScroll = true; let autoScroll = true;
@ -74,6 +79,24 @@ function addMessage(messageType, serviceType, serviceName, message, timestamp) {
deleteOldMessages() deleteOldMessages()
} }
function addViewerInfoMessage(joined, timestamp) {
let li = document.createElement("li")
if (joined) {
li.innerHTML = formatDate(timestamp) + "<span style='color: #2ecc71'>A client has joined</span>"
} else {
li.innerHTML = formatDate(timestamp) + "<span style='color: #e74c3c'>A client has left</span>"
}
messages.appendChild(li)
if (autoScroll) {
li.scrollIntoView()
}
deleteOldMessages()
}
function deleteOldMessages() { function deleteOldMessages() {
if (messages.childElementCount > 500) { if (messages.childElementCount > 500) {
messages.removeChild(messages.getElementsByTagName("li")[0]) messages.removeChild(messages.getElementsByTagName("li")[0])
@ -89,8 +112,7 @@ function clampClosed() {
} }
function formatDate(timestamp) { function formatDate(timestamp) {
const date = new Date(timestamp * 1000) const date = new Date(timestamp)
console.log(date)
return clampOn() + return clampOn() +
"<span style='color: "+colorTime+"'>" + "<span style='color: "+colorTime+"'>" +
@ -156,13 +178,26 @@ function connectWS() {
} }
ws.onmessage = (msg) => { ws.onmessage = (msg) => {
console.log("rec msg:", msg.data)
let data = JSON.parse(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) => { ws.onclose = (e) => {

16
dist/style.css vendored
View File

@ -66,7 +66,7 @@ button {
.checkbox-container .checkbox-container-inside { .checkbox-container .checkbox-container-inside {
position: absolute; position: absolute;
top: 70px; top: 90px;
right: 0; right: 0;
} }
@ -80,3 +80,17 @@ input[type="checkbox" i] {
border: initial; border: initial;
color: rgb(55, 142, 240); 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;
}

2
go.mod
View File

@ -3,7 +3,7 @@ module clickandjoin.app/managementsystem
go 1.18 go 1.18
require ( 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/gocql/gocql v0.0.0-20211015133455-b225f9b53fa1
github.com/gofiber/fiber/v2 v2.42.0 github.com/gofiber/fiber/v2 v2.42.0
github.com/joho/godotenv v1.5.0 github.com/joho/godotenv v1.5.0

2
go.sum
View File

@ -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.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 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.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 h1:V7DdXeJtZscaqfNuAdSRuRFzuiKlHSC/Zh3zl9qY3JY=
github.com/andybalholm/brotli v1.0.4/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig= 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= github.com/bitly/go-hostpool v0.0.0-20171023180738-a3a6125de932 h1:mXoPYz/Ul5HYEDvkta6I8/rnYM5gSdSV2tJ6XbZuEtY=

4
main.go
View File

@ -15,6 +15,8 @@
package main package main
import ( import (
"time"
"clickandjoin.app/managementsystem/modules/config" "clickandjoin.app/managementsystem/modules/config"
"clickandjoin.app/managementsystem/modules/rabbitmq" "clickandjoin.app/managementsystem/modules/rabbitmq"
"clickandjoin.app/managementsystem/modules/scylladb" "clickandjoin.app/managementsystem/modules/scylladb"
@ -74,5 +76,7 @@ func main() {
router.SetupRoutes(app) router.SetupRoutes(app)
gocnjhelper.LogInfof("%s", time.Now().UnixMilli())
app.Listen(cfg.Host + ":" + cfg.Port) app.Listen(cfg.Host + ":" + cfg.Port)
} }

13
socketclients/socketclients.go
View File

@ -1,6 +1,9 @@
package socketclients package socketclients
import ( import (
"strconv"
"time"
"clickandjoin.app/managementsystem/modules/cache" "clickandjoin.app/managementsystem/modules/cache"
gocnjhelper "git.clickandjoin.umbach.dev/ClickandJoin/go-cnj-helper" gocnjhelper "git.clickandjoin.umbach.dev/ClickandJoin/go-cnj-helper"
) )
@ -10,3 +13,13 @@ func BroadcastLogMessage(rabbitMqLogMessage gocnjhelper.RabbitMqLogMessage) {
client.SendMessage(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(),
})
}

5
socketserver/hub.go
View File

@ -3,6 +3,7 @@ package socketserver
import ( import (
"clickandjoin.app/managementsystem/modules/cache" "clickandjoin.app/managementsystem/modules/cache"
"clickandjoin.app/managementsystem/modules/structs" "clickandjoin.app/managementsystem/modules/structs"
"clickandjoin.app/managementsystem/socketclients"
gocnjhelper "git.clickandjoin.umbach.dev/ClickandJoin/go-cnj-helper" gocnjhelper "git.clickandjoin.umbach.dev/ClickandJoin/go-cnj-helper"
"github.com/gofiber/websocket/v2" "github.com/gofiber/websocket/v2"
"github.com/google/uuid" "github.com/google/uuid"
@ -24,6 +25,8 @@ func RunHub() {
cache.AddSocketClient(newSocketClient.ClientId, newSocketClient) cache.AddSocketClient(newSocketClient.ClientId, newSocketClient)
socketclients.BroadcastViewersCountMessage(1)
case data := <-broadcast: case data := <-broadcast:
gocnjhelper.LogDebugf("RECEIVED WEBSOCKET MESSAGE: %s", data.Msg) gocnjhelper.LogDebugf("RECEIVED WEBSOCKET MESSAGE: %s", data.Msg)
@ -32,6 +35,8 @@ func RunHub() {
if connection == client.Conn { if connection == client.Conn {
gocnjhelper.LogDebugf("UNREGISTER CLIENT: %s", id) gocnjhelper.LogDebugf("UNREGISTER CLIENT: %s", id)
cache.DeleteClient(id) cache.DeleteClient(id)
socketclients.BroadcastViewersCountMessage(0)
} }
} }
} }