Improve SSE listener reliability

app/components/lookbook/ui/app/router/router.js

@@ -7,6 +7,7 @@ export default AlpineComponent("router", (sseEndpoint = null) => {
   return {
     serverEventsListener: null,
     routerLogger: null,
+    lastUpdate: Date.now(),
 
     init() {
       this.routerLogger = new Logger("Router");
@@ -29,6 +30,7 @@ export default AlpineComponent("router", (sseEndpoint = null) => {
       await this.updateDOM(location, "router", {
         headers: { "X-Lookbook-Frame": "root" },
       });
+      this.lastUpdate = Date.now();
       this.routerLogger.info(`Page updated`);
       this.$dispatch("page-update:complete");
     },
@@ -41,6 +43,7 @@ export default AlpineComponent("router", (sseEndpoint = null) => {
       if (updateHistory) {
         history.pushState({}, "", result.url);
       }
+      this.lastUpdate = Date.now();
       this.routerLogger.debug(`Page loaded`);
       this.$dispatch("page-load:complete");
     },
@@ -69,8 +72,13 @@ export default AlpineComponent("router", (sseEndpoint = null) => {
       }
     },
 
-    handleVisibilityChange() {
-      if (this.serverEventsListener && !document.hidden) this.updatePage();
+    async handleVisibilityChange() {
+      if (this.serverEventsListener && !document.hidden) {
+        const response = await fetch(`${sseEndpoint}/ping`);
+        const lastServerUpdate = Date.parse(await response.text());
+
+        if (lastServerUpdate > this.lastUpdate) this.updatePage();
+      }
     },
 
     destroy() {

app/controllers/lookbook/events_controller.rb

@@ -30,5 +30,9 @@ def index
 
       head :ok
     end
+
+    def ping
+      render html: Engine.updated_at
+    end
   end
 end

assets/js/server_events_listener.js

@@ -4,18 +4,20 @@ export default class ServerEventsListener {
   constructor(endpoint) {
     this.endpoint = endpoint;
     this.source = null;
+    this.broadcastChannel = this.initBroadCastChannel();
     this.handlers = [];
     this.$logger = new Logger("EventsListener");
 
     addEventListener("visibilitychange", () => {
-      document.hidden ? this.stop() : this.start();
+      if (!document.hidden) this.start();
     });
   }
 
   start() {
     if (!this.source) {
       this.$logger.debug(`Starting`);
       this.source = this.initSource();
+      this.broadcastStart();
     }
   }
 
@@ -56,4 +58,23 @@ export default class ServerEventsListener {
 
     return source;
   }
+
+  initBroadCastChannel() {
+    const bc = new BroadcastChannel("lookbook_events");
+
+    bc.addEventListener("message", (event) => {
+      const data = JSON.parse(event.data);
+      if (data.type === "event-source-start") {
+        this.stop();
+      }
+    });
+
+    return bc;
+  }
+
+  broadcastStart() {
+    this.broadcastChannel.postMessage(
+      JSON.stringify({ type: "event-source-start" })
+    );
+  }
 }

config/routes.rb

@@ -14,7 +14,8 @@
 
     get "/embed", to: "embeds#show", as: :embed
 
-    resources :events, only: [:index]
+    get "/events", to: "events#index", as: :events
+    get "/events/ping", to: "events#ping", as: :ping
 
     match "*path", to: "application#not_found", via: :all
   end