269 lines
8.0 KiB
JavaScript
269 lines
8.0 KiB
JavaScript
/**
|
||
* Definitions
|
||
*/
|
||
|
||
const colorClamp = "#34495e"
|
||
const colorTime = "#95a5a6"
|
||
const serviceCodeColor = "#95a5a6"
|
||
|
||
const messageTypes = [
|
||
"INFO",
|
||
"DEB",
|
||
"ERR"
|
||
]
|
||
const messageTypesColors = [
|
||
"#7f8c8d",
|
||
"#1abc9c",
|
||
"#e74c3c"
|
||
]
|
||
|
||
const messageColors = [
|
||
"#7f8c8d",
|
||
"#1abc9c",
|
||
"#e74c3c"
|
||
]
|
||
|
||
const serviceNames = [
|
||
"API",
|
||
"MAILER",
|
||
"STORAGE",
|
||
"SSE",
|
||
"WS"
|
||
]
|
||
const serviceNamesColors = [
|
||
"#f1c40f",
|
||
"#e67e22",
|
||
"#2980b9",
|
||
"#16a085",
|
||
"#1abc9c"
|
||
]
|
||
|
||
const serviceTypes = [
|
||
"ALPHA",
|
||
"BETA",
|
||
"STABLE"
|
||
]
|
||
const serviceTypesColors = [
|
||
"#9b59b6",
|
||
"#e67e22",
|
||
"#2ecc71"
|
||
]
|
||
|
||
const connectionStatusColors = [ // dot color for connection status
|
||
"#2ecc71", // connected
|
||
"#e74c3c", // disconnected
|
||
"#e67e22" // reconnecting
|
||
]
|
||
|
||
const wsAddress = "ws://192.168.178.93:50000/ws?auth=aksmdaksdmaskdm213askm"
|
||
|
||
/**
|
||
* Begin of code
|
||
*/
|
||
const viewersCount = document.getElementById("viewers-count")
|
||
const connectionStatus = document.getElementById("connection-status")
|
||
const checkboxAlpha = document.getElementById("checkbox-alpha")
|
||
const checkboxBeta = document.getElementById("checkbox-beta")
|
||
const checkboxStable = document.getElementById("checkbox-stable")
|
||
const checkboxApi = document.getElementById("checkbox-api")
|
||
const checkboxWs = document.getElementById("checkbox-ws")
|
||
const checkboxSse = document.getElementById("checkbox-sse")
|
||
const checkboxMailer = document.getElementById("checkbox-mailer")
|
||
const checkboxStorage = document.getElementById("checkbox-storage")
|
||
|
||
const messages = document.getElementById("messages")
|
||
let autoScroll = true;
|
||
|
||
function addMessage(serviceCode, messageType, serviceType, serviceName, message, timestamp) {
|
||
let li = document.createElement("li")
|
||
|
||
li.innerHTML =
|
||
formatServiceCode(serviceCode) +
|
||
formatDate(timestamp) +
|
||
formatServiceType(serviceType) +
|
||
formatServiceName(serviceName) +
|
||
formatMessageType(messageType) +
|
||
formatMessage(message, messageType)
|
||
|
||
messages.appendChild(li)
|
||
|
||
if (autoScroll) {
|
||
li.scrollIntoView()
|
||
}
|
||
|
||
deleteOldMessages()
|
||
}
|
||
|
||
function addCustomMessage(message) {
|
||
let li = document.createElement("li")
|
||
li.innerHTML = message
|
||
|
||
messages.appendChild(li)
|
||
|
||
if (autoScroll) {
|
||
li.scrollIntoView()
|
||
}
|
||
|
||
deleteOldMessages()
|
||
}
|
||
|
||
function addViewerInfoMessage(joined, timestamp) {
|
||
if (joined) {
|
||
addCustomMessage(formatDate(timestamp) + "<span style='color: #2ecc71'>A client has joined</span>")
|
||
} else {
|
||
addCustomMessage(formatDate(timestamp) + "<span style='color: #e74c3c'>A client has left</span>")
|
||
}
|
||
}
|
||
|
||
function deleteOldMessages() {
|
||
if (messages.childElementCount > 500) {
|
||
messages.removeChild(messages.getElementsByTagName("li")[0])
|
||
}
|
||
}
|
||
|
||
function clampOn() {
|
||
return "<span style='color: "+colorClamp+"'>[</span>"
|
||
}
|
||
|
||
function clampClosed() {
|
||
return "<span style='color: "+colorClamp+"'>]</span> "
|
||
}
|
||
|
||
function formatServiceCode(code) {
|
||
return clampOn() +
|
||
"<span style='color: "+serviceCodeColor+"'>" +
|
||
code + "</span>" + clampClosed()
|
||
}
|
||
|
||
function formatDate(timestamp) {
|
||
const date = new Date(timestamp)
|
||
|
||
return clampOn() +
|
||
"<span style='color: "+colorTime+"'>" +
|
||
//date.getDate().toString().padStart(2, '0') + "." +
|
||
//date.getMonth().toString().padStart(2, '0') + "." +
|
||
//date.getFullYear() + " " +
|
||
date.getHours().toString().padStart(2, '0') + ":" +
|
||
date.getMinutes().toString().padStart(2, '0') + ":" +
|
||
date.getSeconds().toString().padStart(2, '0') + ":" +
|
||
date.getMilliseconds().toString().padStart(3, '0') +
|
||
"</span>" + clampClosed()
|
||
}
|
||
|
||
function formatServiceType(serviceType) {
|
||
return clampOn() + "<span style='color: " + serviceTypesColors[serviceType] + "'>" + serviceTypes[serviceType] + "</span>" + clampClosed()
|
||
}
|
||
|
||
function formatServiceName(serviceName) {
|
||
return clampOn() + "<span style='color: " + serviceNamesColors[serviceName] + "'>" + serviceNames[serviceName] + "</span>" + clampClosed()
|
||
}
|
||
|
||
function formatMessage(message, messageType) {
|
||
return "<span style='color: " + messageColors[messageType] + "'>" + message + "</span>"
|
||
}
|
||
|
||
function formatMessageType(messageType) {
|
||
return clampOn() + "<span style='color: " + messageTypesColors[messageType] + "'>" + messageTypes[messageType] + "</span>" + clampClosed()
|
||
}
|
||
|
||
let scrollState = document.getElementById('scroll-state')
|
||
|
||
document.getElementById('btn-toggle-scroll').addEventListener('click', () => {
|
||
console.log("clicked", scrollState.innerHTML)
|
||
|
||
if (scrollState.innerHTML == "on") {
|
||
autoScroll = false
|
||
scrollState.style.color = "#e74c3c"
|
||
scrollState.innerHTML = "off"
|
||
} else {
|
||
autoScroll = true
|
||
scrollState.style.color = "#27ae60"
|
||
scrollState.innerHTML = "on"
|
||
}
|
||
})
|
||
|
||
document.getElementById('btn-clear-console').addEventListener('click', () => {
|
||
messages.innerHTML = ""
|
||
})
|
||
|
||
document.getElementById('btn-add-line').addEventListener('click', () => {
|
||
addCustomMessage("<span style='color: #7f8c8d'>–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––</span>")
|
||
})
|
||
|
||
// websocket
|
||
|
||
let ws = null
|
||
|
||
window.onload = () => {
|
||
connectWS()
|
||
}
|
||
|
||
function connectWS() {
|
||
connectionStatus.style.backgroundColor = connectionStatusColors[2]
|
||
|
||
ws = new WebSocket(wsAddress)
|
||
|
||
ws.onopen = () => {
|
||
console.info("ws open")
|
||
connectionStatus.style.backgroundColor = connectionStatusColors[0]
|
||
}
|
||
|
||
ws.onmessage = (msg) => {
|
||
let messages = JSON.parse(msg.data)
|
||
|
||
for (i in messages) {
|
||
data = messages[i]
|
||
|
||
serviceCode = data.ServiceCode
|
||
messageType = data.MessageType
|
||
serviceName = data.ServiceName
|
||
serviceType = data.ServiceType
|
||
timestamp = data.Timestamp
|
||
|
||
if (messageType == 100 && serviceName == 100) { // viewer count
|
||
viewersCount.innerHTML = data.Msg + (data.Msg == 1 ? " viewer" : " viewers")
|
||
|
||
addViewerInfoMessage(serviceType == 1, timestamp)
|
||
} else if (messageType == 101 && serviceName == 101 && serviceType == 101) {
|
||
lastMessages = JSON.parse(data.Msg)
|
||
|
||
if (lastMessages != null && lastMessages.length > 0) {
|
||
addCustomMessage("<span style='color: #7f8c8d'>––––––––– START OF OLD MESSAGES –––––––––</span>")
|
||
|
||
for (const i in lastMessages) {
|
||
addMessage(lastMessages[i].ServiceCode, lastMessages[i].MessageType, lastMessages[i].ServiceType, lastMessages[i].ServiceName, lastMessages[i].Msg, lastMessages[i].Timestamp)
|
||
}
|
||
|
||
addCustomMessage("<span style='color: #7f8c8d'>––––––––– END OF OLD MESSAGES –––––––––</span>")
|
||
}
|
||
} else {
|
||
if (serviceType == 0 && !checkboxAlpha.checked) return
|
||
if (serviceType == 1 && !checkboxBeta.checked) return
|
||
if (serviceType == 2 && !checkboxStable.checked) return
|
||
|
||
if (serviceName == 0 && !checkboxApi.checked) return
|
||
if (serviceName == 1 && !checkboxMailer.checked) return
|
||
if (serviceName == 2 && !checkboxStorage.checked) return
|
||
if (serviceName == 3 && !checkboxSse.checked) return
|
||
if (serviceName == 4 && !checkboxWs.checked) return
|
||
|
||
addMessage(serviceCode, messageType, serviceType, serviceName, data.Msg, timestamp)
|
||
}
|
||
}
|
||
}
|
||
|
||
ws.onclose = (e) => {
|
||
console.log("closed", e.reason.code)
|
||
|
||
connectionStatus.style.backgroundColor = connectionStatusColors[1]
|
||
|
||
if (e.reason.code === 1005) return
|
||
|
||
console.log("ws closed", e)
|
||
setTimeout(() => connectWS(), 100)
|
||
}
|
||
|
||
ws.onerror = (err) => {
|
||
console.warn("err:", err)
|
||
}
|
||
} |