feat: setup event stream connection via web socket and display events

Author: OliverDudgeon

package.json

@@ -52,8 +52,8 @@
     "@rjsf/utils": "5.24.2",
     "@rjsf/validator-ajv8": "5.24.2",
     "@sentry/nextjs": "8.53.0",
-    "@squonk/account-server-client": "4.1.0",
-    "@squonk/data-manager-client": "3.3.0",
+    "@squonk/account-server-client": "4.2.0-rc.3",
+    "@squonk/data-manager-client": "3.3.1",
     "@squonk/mui-theme": "4.0.0",
     "@squonk/sdf-parser": "1.3.0",
     "@tanstack/match-sorter-utils": "8.19.4",
@@ -90,6 +90,7 @@
     "notistack": "3.0.2",
     "plotly.js-basic-dist": "2.35.3",
     "prismjs": "1.29.0",
+    "protobufjs": "^7.4.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-dropzone": "14.3.5",

pnpm-lock.yaml

@@ -0,0 +1,94 @@
+import { useEffect, useState } from "react";
+
+import {
+  useCreateEventStream,
+  useGetEventStream,
+} from "@squonk/account-server-client/event-stream";
+
+import { useSnackbar } from "notistack";
+import * as protobuf from "protobufjs";
+
+export const EventStream = () => {
+  const [eventStreamId, setEventStreamId] = useState<number | null>(null);
+  const [location, setLocation] = useState<string | null>(null);
+  const [websocket, setWebsocket] = useState<WebSocket | null>(null);
+  const [protoRoot, setProtoRoot] = useState<protobuf.Root | null>(null);
+  const { enqueueSnackbar } = useSnackbar();
+  const { data, error } = useGetEventStream();
+
+  useEffect(() => {
+    // Initialize protobuf root
+    const root = new protobuf.Root();
+    // You would typically load your proto definitions here
+    // For example: root.load("path/to/proto/file.proto", { keepCase: true })
+    setProtoRoot(root);
+  }, []);
+
+  useEffect(() => {
+    if (data) {
+      setEventStreamId(data.id);
+      setLocation(data.location);
+    }
+  }, [data]);
+
+  const { mutate: createEventStream } = useCreateEventStream({
+    mutation: {
+      onSuccess: (data) => {
+        setEventStreamId(data.id);
+        setLocation(data.location);
+      },
+    },
+  });
+
+  useEffect(() => {
+    if (error?.response?.status === 404) {
+      createEventStream();
+    }
+  }, [error, createEventStream]);
+
+  useEffect(() => {
+    if (location && protoRoot) {
+      // Create WebSocket connection
+      const ws = new WebSocket(location);
+
+      ws.addEventListener("open", () => {
+        enqueueSnackbar("Connected to event stream", {
+          variant: "success",
+          anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        });
+      });
+
+      ws.addEventListener("error", () => {
+        enqueueSnackbar("Failed to connect to event stream", {
+          variant: "error",
+          anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        });
+      });
+
+      ws.addEventListener("close", () => {
+        enqueueSnackbar("Disconnected from event stream", {
+          variant: "warning",
+          anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        });
+      });
+
+      ws.addEventListener("message", (event) => {
+        enqueueSnackbar(`Received event: ${event.data}`, {
+          variant: "info",
+          anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        });
+      });
+
+      setWebsocket(ws);
+
+      return () => {
+        ws.close();
+      };
+    }
+  }, [location, protoRoot, enqueueSnackbar]);
+
+  console.log(eventStreamId);
+  console.log(websocket);
+
+  return null;
+};

src/components/EventStream.tsx

@@ -17,6 +17,7 @@ import { SnackbarProvider } from "notistack";
 
 import { ThemeProviders } from "../components/app/ThemeProviders";
 import { TopLevelHooks } from "../components/app/TopLevelHooks";
+import { EventStream } from "../components/EventStream";
 import { openSansFont } from "../constants/fonts";
 import { AS_API_URL, DM_API_URL } from "../constants/proxies";
 import { MDXComponentProvider } from "../context/MDXComponentProvider";
@@ -65,6 +66,7 @@ const App = ({ Component, pageProps }: CustomAppProps) => {
             <QueryClientProvider client={queryClient}>
               <HydrationBoundary state={pageProps.dehydratedState}>
                 <SnackbarProvider>
+                  <EventStream />
                   <MDXComponentProvider>
                     <TopLevelHooks>
                       <Component {...pageProps} />