SSE reconnect, task switcher state/inbox/new task, stream throttle

web/src/api.ts

@@ -94,10 +94,58 @@ export const post = <P extends PathsWith<"post">>(path: P, opts?: Options<Op<P,
 export const put = <P extends PathsWith<"put">>(path: P, opts?: Options<Op<P, "put">>) => request("put", path, opts);
 export const del = <P extends PathsWith<"delete">>(path: P, opts?: Options<Op<P, "delete">>) => request("delete", path, opts);
 
-export function subscribe(after: number, onEvent: (ev: ByreEvent) => void, onState: (connected: boolean) => void): EventSource {
-  const source = new EventSource(`/api/events?after=${after}`);
-  source.onopen = () => onState(true);
-  source.onerror = () => onState(false);
-  source.onmessage = (msg: MessageEvent<string>) => onEvent(JSON.parse(msg.data) as ByreEvent);
-  return source;
+const staleAfterMs = 40_000;
+const retryAfterMs = 2_000;
+
+export function subscribe(after: number, onEvent: (ev: ByreEvent) => void, onState: (connected: boolean) => void): void {
+  let last = after;
+  let heard = Date.now();
+  let source: EventSource | undefined;
+  let retry = 0;
+
+  const connect = () => {
+    clearTimeout(retry);
+    source?.close();
+    heard = Date.now();
+    const s = new EventSource(`/api/events?after=${last}`);
+    source = s;
+    s.onopen = () => {
+      heard = Date.now();
+      onState(true);
+    };
+    s.onerror = () => {
+      onState(false);
+      if (s.readyState === EventSource.CLOSED) {
+        retry = setTimeout(connect, retryAfterMs);
+      }
+    };
+    s.addEventListener("ping", () => {
+      heard = Date.now();
+    });
+    s.onmessage = (msg: MessageEvent<string>) => {
+      heard = Date.now();
+      const ev = JSON.parse(msg.data) as ByreEvent;
+      if (ev.seq > last) {
+        last = ev.seq;
+      }
+      onEvent(ev);
+    };
+  };
+
+  const check = () => {
+    if (Date.now() - heard < staleAfterMs) {
+      return;
+    }
+    onState(false);
+    connect();
+  };
+
+  setInterval(check, 5_000);
+  addEventListener("online", connect);
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState === "visible") {
+      check();
+    }
+  });
+  connect();
 }