Reconnect on error. Show connection status. Use JQuery.

2020-10-22 12:45:23 -07:00
parent 2050daae13
commit 13f1203a65
1 changed files with 73 additions and 11 deletions
--- 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');
+
+      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 => {
-        const template = document.querySelector('#logline').content.cloneNode(true);
-        document.querySelector('#log').appendChild(template);
+            clearTimeout(ping);
+            keepalive();
          });
+
          sse.addEventListener('ring', msg => {
-        const template = document.querySelector('#ring').content.cloneNode(true);
-        document.querySelector('#log').appendChild(template);
+            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>