From 13f1203a65919f8c35c96a74b0d198c2d002e897 Mon Sep 17 00:00:00 2001
From: Jared Burce <jaredr@gmail.com>
Date: Thu, 22 Oct 2020 12:45:23 -0700
Subject: [PATCH] Reconnect on error. Show connection status. Use JQuery.

---
 static/main.html | 84 +++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 73 insertions(+), 11 deletions(-)
diff --git a/static/main.html b/static/main.html
index 976df28..bd1f589 100644
--- a/static/main.html
+++ b/static/main.html
@@ -3,28 +3,90 @@
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>Fáfnir Doorbell</title>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
   </head>
   <body>
+    <section id="status">
+      Status:
+      <span id="status_line"></span>
+    </section>
     <section id="log">
       <h1>Incoming Events</h1>
     </section>
-    <template id="logline">
-      <p>Ping
+    <template id="connected">
+      <span class="connected">Connected</span>
+    </template>
+    <template id="disconnected">
+      <span class="disconnected">Disconnected</span>
     </template>
     <template id="ring">
       <p>Ring!
     </template>
     <script>
       "use strict";
-      let sse = new EventSource('events');
-      sse.addEventListener('ping', msg => {
-        const template = document.querySelector('#logline').content.cloneNode(true);
-        document.querySelector('#log').appendChild(template);
-      });
-      sse.addEventListener('ring', msg => {
-        const template = document.querySelector('#ring').content.cloneNode(true);
-        document.querySelector('#log').appendChild(template);
-      });
+
+      const CONNECT_TIMEOUT = 1_000;
+      const KEEPALIVE_TIMEOUT = 10_000;
+
+      let sse;
+      let reconnect;
+      let ping;
+
+      connect();
+      function connect() {
+        console.log('connecting');
+        set_status('disconnected');
+        if (sse) {
+          sse.onopen = undefined;
+          sse.close();
+        }
+        if (ping) { clearTimeout(ping); }
+        sse = new EventSource('events');
+
+        sse.onopen = () => {
+          console.log('connected');
+          set_status('connected');
+          clearTimeout(reconnect);
+          keepalive();
+
+          sse.onerror = () => {
+            console.log('sse error');
+            connect();
+          };
+
+          sse.addEventListener('ping', msg => {
+            clearTimeout(ping);
+            keepalive();
+          });
+
+          sse.addEventListener('ring', msg => {
+            const template = get_template('ring');
+            $('#log').append(template);
+          });
+        };
+
+        reconnect = setTimeout(connect, CONNECT_TIMEOUT);
+      }
+
+      function get_template(name) {
+        return $('#' + name).map((_, n) => n.content).clone();
+      }
+
+      function keepalive() {
+        ping = setTimeout(() => {
+          console.warn('keepalive ping timed out');
+          connect();
+        }, KEEPALIVE_TIMEOUT);
+      }
+
+      function set_status(status_template) {
+        const template = get_template(status_template);
+        const status_line = $('#status_line');
+        status_line.empty();
+        status_line.append(template);
+      }
+
+
     </script>
   </body>
 </html>
