Track HiveGrid Cloud planning reference

hivegrid-cloud/apps/web/app/utils/stream/emitter.server.ts

@@ -0,0 +1,21 @@
+import { EventEmitter } from "events";
+import { loadRequiredWebConfig } from "@toolctrl/config";
+
+let emitter: EventEmitter;
+
+declare global {
+  var __emitter: EventEmitter | undefined;
+}
+
+const webConfig = loadRequiredWebConfig();
+
+if (webConfig.nodeEnv === "production") {
+  emitter = new EventEmitter();
+} else {
+  if (!global.__emitter) {
+    global.__emitter = new EventEmitter();
+  }
+  emitter = global.__emitter;
+}
+
+export { emitter };

hivegrid-cloud/apps/web/app/utils/stream/event-stream.ts

@@ -0,0 +1,81 @@
+interface SendFunctionArgs {
+  /**
+   * @default "message"
+   */
+  event?: string;
+  data: string;
+}
+
+interface SendFunction {
+  (args: SendFunctionArgs): void;
+}
+
+interface CleanupFunction {
+  (): void;
+}
+
+interface AbortFunction {
+  (): void;
+}
+
+interface InitFunction {
+  (send: SendFunction, abort: AbortFunction): CleanupFunction;
+}
+
+/**
+ * A response helper to use Server Sent Events server-side
+ * @param signal The AbortSignal used to close the stream
+ * @param init The function that will be called to initialize the stream, here you can subscribe to your events
+ * @returns A Response object that can be returned from a loader
+ */
+export function eventStream(signal: AbortSignal, init: InitFunction, options: ResponseInit = {}) {
+  let stream = new ReadableStream({
+    start(controller) {
+      let encoder = new TextEncoder();
+
+      function send({ event = "message", data }: SendFunctionArgs) {
+        controller.enqueue(encoder.encode(`event: ${event}\n`));
+        controller.enqueue(encoder.encode(`data: ${data}\n\n`));
+      }
+
+      let cleanup = init(send, close);
+
+      let closed = false;
+
+      function close() {
+        if (closed) return;
+        cleanup();
+        closed = true;
+        signal.removeEventListener("abort", close);
+        controller.close();
+      }
+
+      signal.addEventListener("abort", close);
+
+      if (signal.aborted) return close();
+    },
+  });
+
+  let headers = new Headers(options.headers);
+
+  if (headers.has("Content-Type")) {
+    // eslint-disable-next-line no-console
+    console.warn("Overriding Content-Type header to `text/event-stream`");
+  }
+
+  if (headers.has("Cache-Control")) {
+    // eslint-disable-next-line no-console
+    console.warn("Overriding Cache-Control header to `no-cache`");
+  }
+
+  if (headers.has("Connection")) {
+    // eslint-disable-next-line no-console
+    console.warn("Overriding Connection header to `keep-alive`");
+  }
+
+  headers.set("Content-Type", "text/event-stream");
+  headers.set("Cache-Control", "no-cache");
+  headers.set("Connection", "keep-alive");
+
+  return new Response(stream, { headers });
+}

hivegrid-cloud/apps/web/app/utils/stream/use-event-source.ts

@@ -0,0 +1,56 @@
+import { useEffect, useState, createContext, useContext } from "react";
+
+export interface EventSourceOptions {
+  init?: EventSourceInit;
+  event?: string;
+}
+
+export type EventSourceMap = Map<string, { count: number; source: EventSource }>;
+
+const context = createContext<EventSourceMap>(new Map<string, { count: number; source: EventSource }>());
+
+export const EventSourceProvider = context.Provider;
+
+/**
+ * Subscribe to an event source and return the latest event.
+ * @param url The URL of the event source to connect to
+ * @param options The options to pass to the EventSource constructor
+ * @returns The last event received from the server
+ */
+export function useEventSource(url: string | URL, { event = "message", init }: EventSourceOptions = {}) {
+  let map = useContext(context);
+  let [data, setData] = useState<string | null>(null);
+
+  useEffect(() => {
+    let key = [url.toString(), event, init?.withCredentials].join("::");
+
+    let value = map.get(key) ?? {
+      count: 0,
+      source: new EventSource(url, init),
+    };
+
+    ++value.count;
+
+    map.set(key, value);
+
+    value.source.addEventListener(event, handler);
+
+    // rest data if dependencies change
+    setData(null);
+
+    function handler(event: MessageEvent) {
+      setData(event.data || "UNKNOWN_EVENT_DATA");
+    }
+
+    return () => {
+      value.source.removeEventListener(event, handler);
+      --value.count;
+      if (value.count <= 0) {
+        value.source.close();
+        map.delete(key);
+      }
+    };
+  }, [url, event, init, map]);
+
+  return data;
+}