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

4
dist/index.html vendored
View File

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

71
dist/script.js vendored
View File

@ -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) + "<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() {
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() +
"<span style='color: "+colorTime+"'>" +
@ -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) => {

16
dist/style.css vendored
View File

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

2
go.mod
View File

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

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.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=

View File

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

View File

@ -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(),
})
}

View File

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