From 75c12677d95a435ad525b5caa66439ec8b8c0877 Mon Sep 17 00:00:00 2001 From: soruh Date: Sun, 11 Jun 2023 05:29:59 +0200 Subject: [PATCH] add connected symbol --- build.rs | 16 +++++++++---- web/connected.svg | 1 + web/index.html | 2 +- web/main.css | 20 ++++++++++++++++ web/main.js | 61 +++++++++++++++++++++++++++++++++-------------- 5 files changed, 77 insertions(+), 23 deletions(-) create mode 100644 web/connected.svg diff --git a/build.rs b/build.rs index d13fe2e..697780e 100644 --- a/build.rs +++ b/build.rs @@ -2,9 +2,10 @@ fn main() { #[cfg(feature = "debug_server")] pack_debug_page().unwrap(); - println!("cargo:rerun-if-changed=main.js"); - println!("cargo:rerun-if-changed=index.html"); - println!("cargo:rerun-if-changed=main.css"); + println!("cargo:rerun-if-changed=web/main.js"); + println!("cargo:rerun-if-changed=web/index.html"); + println!("cargo:rerun-if-changed=web/main.css"); + println!("cargo:rerun-if-changed=web/connected.svg"); } #[cfg(feature = "debug_server")] @@ -17,6 +18,7 @@ fn pack_debug_page() -> Result<(), Box> { let js = std::fs::read_to_string("web/main.js").unwrap(); let html = std::fs::read_to_string("web/index.html").unwrap(); let css = std::fs::read_to_string("web/main.css").unwrap(); + let svg = std::fs::read_to_string("web/connected.svg").unwrap(); let mut out = Vec::new(); minify_js::minify( @@ -30,9 +32,15 @@ fn pack_debug_page() -> Result<(), Box> { let css = Minifier::default().minify(&css, Level::Three).unwrap(); + let (start, end) = html + .split_once("") + .expect("did not find svg split point in html"); + + let html = format!("{start}{svg}{end}"); + let (head, body) = html .split_once("") - .expect("did not find split point in html"); + .expect("did not find head split point in html"); let html = minify_html::minify( format!("{head}{body}").as_bytes(), diff --git a/web/connected.svg b/web/connected.svg new file mode 100644 index 0000000..aed3003 --- /dev/null +++ b/web/connected.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/index.html b/web/index.html index 7023650..b7732c0 100644 --- a/web/index.html +++ b/web/index.html @@ -9,7 +9,7 @@ - + 


     
diff --git a/web/main.css b/web/main.css
index 48ebbfc..a49dc75 100644
--- a/web/main.css
+++ b/web/main.css
@@ -1,3 +1,23 @@
 body {
     background-color: #eee;
+}
+
+#connected {
+    position: absolute;
+    top: 5%;
+    right: 5%;
+    width: 5%;
+    height: 5%;
+}
+
+.visible {
+    opacity: 1;
+    /* visibility: visible; */
+    transition: opacity 500ms linear;
+}
+
+.hidden {
+    /* visibility: hidden; */
+    opacity: 0.2;
+    transition: opacity 6000ms linear;
 }
\ No newline at end of file
diff --git a/web/main.js b/web/main.js
index bafe094..4e6673e 100644
--- a/web/main.js
+++ b/web/main.js
@@ -1,28 +1,53 @@
 window.onload = () => {
-    const evtSource = new EventSource("/events");
     const data = document.getElementById("data");
     const last_update = document.getElementById("last_update");
-    evtSource.addEventListener("change", event => {
-        console.log(event);
+    const connected = document.getElementById("connected");
 
-        last_update.innerText = `last update at ${new Date(+event.data * 1000)}`;
+    const timeout_duration = 10*1000;
+    const retry_timeout = 5*1000;
 
-        const newElement = document.createElement("li");
-        const eventList = document.getElementById("list");
-        newElement.textContent = `change at ${+event.data}`;
-        eventList.appendChild(newElement);
+    let reconnect_timeout;
+    let ping_timeout;
+    let evtSource;
 
-        fetch("/data").then(res => res.json().then(res => data.innerText = JSON.stringify(res, null, 1)));
-    });
 
-    evtSource.addEventListener("ping", event => {
-        console.log(event);
+    let connect_event_source = () => {
 
-        last_update.innerText = `last update at ${new Date(+event.data * 1000)}`;
+        clearTimeout(reconnect_timeout);
+        clearTimeout(ping_timeout);
+        ping_timeout = setTimeout(connect_event_source, timeout_duration);
+
+        evtSource && evtSource.close && evtSource.close();
+            
+        evtSource = new EventSource("/events");
+        evtSource.addEventListener("change", event => {
+            last_update.innerText = `last update at ${new Date(+event.data * 1000)}`;
+
+           
+            fetch("/data")
+                .then(res => res.json())
+                .then(res => data.innerText = JSON.stringify(res, null, 1));
+        });
+
+        evtSource.addEventListener("ping", event => {
+            clearTimeout(ping_timeout);
+            ping_timeout = setTimeout(connect_event_source, timeout_duration);
+
+            console.log("ping", new Date());
+
+            last_update.innerText = `last update at ${new Date(+event.data * 1000)}`;
+            connected.className = "visible";
+            setTimeout(() => connected.className = "hidden", 1000);
+        });
+
+
+        evtSource.onerror = () => {
+            clearTimeout(reconnect_timeout);
+            reconnect_timeout = setTimeout(connect_event_source, retry_timeout);
+        };
+    }
+    
+
+    connect_event_source();
 
-        const newElement = document.createElement("li");
-        const eventList = document.getElementById("list");
-        newElement.textContent = `ping at ${+event.data}`;
-        eventList.appendChild(newElement);
-    });
 };
\ No newline at end of file