added websocket
parent
a8d9707870
commit
11157d27fc
|
@ -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>
|
||||
|
|
|
@ -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) => {
|
||||
|
|
|
@ -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;
|
||||
}
|
2
go.mod
2
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
|
||||
|
|
2
go.sum
2
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=
|
||||
|
|
4
main.go
4
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)
|
||||
}
|
||||
|
|
|
@ -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(),
|
||||
})
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue