Use SSE frontend #3

webassets/js/bands.js

@@ -1,3 +1,6 @@
+// How often to query the server?
+const REFRESH_INTERVAL_SEC = 60;
+
 // A couple of constants that must match what's in CSS. We need to know them before the content actually renders, so we
 // can't just ask the elements themselves for their dimensions.
 BAND_COLUMN_HEIGHT_EM = 62;

webassets/js/common.js

@@ -116,17 +116,20 @@ function toggleFilterButtons(filterQuery, state) {
 // Update the refresh timing display
 function updateRefreshDisplay() {
     if (lastUpdateTime != null) {
-        let count = REFRESH_INTERVAL_SEC;
         let secSinceUpdate = moment.duration(moment().diff(lastUpdateTime)).asSeconds();
-        updatingString = "Updating..."
-        if (secSinceUpdate < REFRESH_INTERVAL_SEC) {
-            count = REFRESH_INTERVAL_SEC - secSinceUpdate;
-            if (count <= 60) {
-                var number = count.toFixed(0);
-                updatingString = "<span class='nowrap'>Updating in " + number + " second" + (number != "1" ? "s" : "") + ".</span>";
-            } else {
-                var number = Math.round(count / 60.0).toFixed(0);
-                updatingString = "<span class='nowrap'>Updating in " + number + " minute" + (number != "1" ? "s" : "") + ".</span>";
+        let updatingString = " Connected to live spot server.";
+        if (typeof REFRESH_INTERVAL_SEC !== 'undefined' && REFRESH_INTERVAL_SEC != null) {
+            let count = REFRESH_INTERVAL_SEC;
+            updatingString = "Updating..."
+            if (secSinceUpdate < REFRESH_INTERVAL_SEC) {
+                count = REFRESH_INTERVAL_SEC - secSinceUpdate;
+                if (count <= 60) {
+                    var number = count.toFixed(0);
+                    updatingString = "<span class='nowrap'>Updating in " + number + " second" + (number != "1" ? "s" : "") + ".</span>";
+                } else {
+                    var number = Math.round(count / 60.0).toFixed(0);
+                    updatingString = "<span class='nowrap'>Updating in " + number + " minute" + (number != "1" ? "s" : "") + ".</span>";
+                }
             }
         }
         $("#timing-container").html("Last updated at " + lastUpdateTime.format('HH:mm') + " UTC. " + updatingString);

webassets/js/map.js

@@ -1,3 +1,6 @@
+// How often to query the server?
+const REFRESH_INTERVAL_SEC = 60;
+
 // Map layers
 var markersLayer;
 var geodesicsLayer;

webassets/js/spots.js

@@ -1,3 +1,6 @@
+// SSE event source
+let evtSource;
+
 // Load spots and populate the table.
 function loadSpots() {
     $.getJSON('/api/v1/spots' + buildQueryString(), function(jsonData) {
@@ -8,9 +11,36 @@ function loadSpots() {
         spots = jsonData;
         // Update table
         updateTable();
+        // Start SSE connection to fetch updates in the background
+        restartSSEConnection();
     });
 }
 
+// Start an SSE connection (closing an existing one if it exists). This will then be used to add to the table on the
+// fly.
+function restartSSEConnection() {
+    if (evtSource != null) {
+        evtSource.close();
+    }
+    evtSource = new EventSource('/api/v1/spots/stream');
+
+    evtSource.onmessage = function(event) {
+        // Store last updated time
+        lastUpdateTime = moment.utc();
+        updateRefreshDisplay();
+        // Add spot to table
+        newSpot = JSON.parse(event.data);
+        console.log(newSpot);
+        spots.unshift(newSpot);
+        spots = spots.slice(0, -1);
+        updateTable();
+    };
+
+    evtSource.onerror = function(err) {
+        setTimeout(restartSSEConnection(), 1000);
+    };
+}
+
 // Build a query string for the API, based on the filters that the user has selected.
 function buildQueryString() {
     var str =  "?";
@@ -316,9 +346,8 @@ function loadOptions() {
             $("#add-spot-button").show();
         }
 
-        // Load spots and set up the timer
+        // Load spots (this will also set up the SSE connection to update them too)
         loadSpots();
-        setInterval(loadSpots, REFRESH_INTERVAL_SEC * 1000);
     });
 }
 
@@ -384,8 +413,6 @@ function displayIntroBox() {
 $(document).ready(function() {
     // Call loadOptions(), this will then trigger loading spots and setting up timers.
     loadOptions();
-    // Update the refresh timing display every second
-    setInterval(updateRefreshDisplay, 1000);
     // Display intro box
     displayIntroBox();
 });

webassets/js/spotsbandsandmap.js

@@ -1,6 +1,3 @@
-// How often to query the server?
-const REFRESH_INTERVAL_SEC = 60;
-
 // Storage for the spot data that the server gives us.
 var spots = []