diff --git a/dist/index.html b/dist/index.html
index fea362e..26eb8e3 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 cd24dcc..1ca8b48 100644
--- a/dist/script.js
+++ b/dist/script.js
@@ -48,6 +48,12 @@ const serviceTypesColors = [
"#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"
/**
@@ -57,6 +63,7 @@ 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 connectionStatus = document.getElementById("connection-status")
const messages = document.getElementById("messages")
let autoScroll = true;
@@ -171,10 +178,13 @@ window.onload = () => {
}
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) => {
@@ -202,6 +212,9 @@ function connectWS() {
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)
diff --git a/dist/style.css b/dist/style.css
index 5766f9f..488dd42 100644
--- a/dist/style.css
+++ b/dist/style.css
@@ -93,4 +93,23 @@ input[type="checkbox" i] {
position: absolute;
top: 65px;
right: 0;
+}
+
+.connection-status-container {
+ position: absolute;
+ top: 10px;
+ position: -webkit-sticky; /* Safari */
+ position: sticky;
+ color: #fff;
+}
+
+#connection-status {
+ position: absolute;
+ top: 16px;
+ right: 180px;
+ height: 20px;
+ width: 20px;
+ background-color: gray;
+ border-radius: 50%;
+ display: inline-block;
}
\ No newline at end of file