Initial frontend SSE implementation (WIP)

- Current assignment state will be send on connect
- Changes will not yet be send to event source

backend/src/routes/admin.ts

@@ -10,7 +10,7 @@ import {
   SubmissionAdminOverviewEntry,
   TerminalStateType,
 } from "../Environment";
-import ActiveEnvironmentTracker from "../trackers/ActiveEnvironmentTracker";
+import TrackerSSEHandler from "../sse/TrackerSSEHandler";
 
 export default (persister: Persister): Router => {
   const router = Router();
@@ -391,10 +391,23 @@ export default (persister: Persister): Router => {
     "/environments",
     authenticationMiddleware,
     adminRoleMiddleware,
-    (_, res) => {
-      res
-        .status(200)
-        .json(Object.fromEntries(ActiveEnvironmentTracker.getActivityMap()));
+    (req, res) => {
+      res.writeHead(200, {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache",
+        Connection: "keep-alive",
+      });
+
+      const reqWithUser = req as RequestWithUser;
+
+      TrackerSSEHandler.addClient(res, reqWithUser.user.username);
+
+      req.on("close", () => {
+        TrackerSSEHandler.removeClient(reqWithUser.user.username);
+        res.end();
+      });
+
+      TrackerSSEHandler.sendInitialActivityData(res);
     },
   );
 

backend/src/sse/TrackerSSEHandler.ts

@@ -0,0 +1,34 @@
+import { ServerResponse } from "http";
+import ActiveEnvironmentTracker from "../trackers/ActiveEnvironmentTracker";
+
+export default class TrackerSSEHandler {
+  private static clients: Map<string, ServerResponse> = new Map();
+
+  public static clientAlreadyConnected(username: string): boolean {
+    return this.clients.has(username);
+  }
+
+  public static addClient(client: ServerResponse, username: string): void {
+    this.forceCloseStaleConnection(username);
+    this.clients.set(username, client);
+  }
+
+  public static removeClient(username: string): void {
+    this.clients.delete(username);
+  }
+
+  public static sendInitialActivityData(client: ServerResponse): void {
+    const data = JSON.stringify(
+      Object.fromEntries(ActiveEnvironmentTracker.getActivityMap()),
+    );
+
+    client.write(`data: ${data}\n\n`);
+  }
+
+  public static forceCloseStaleConnection(username: string): void {
+    if (this.clientAlreadyConnected(username)) {
+      const client = this.clients.get(username);
+      client?.end();
+    }
+  }
+}

frontend/package.json

@@ -18,6 +18,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@fontsource/roboto": "^5.0.13",
+    "@microsoft/fetch-event-source": "^2.0.1",
     "@monaco-editor/react": "^4.4.5",
     "@mui/icons-material": "^5.15.20",
     "@mui/lab": "^5.0.0-alpha.170",

frontend/src/components/ActiveEnvironmentTracker.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useRef } from "react";
+import { fetchEventSource } from "@microsoft/fetch-event-source";
+import { APIBasePath } from "../api/Request";
+import { useAuthStore } from "../stores/authStore";
+
+const ActiveEnvironmentTracker = (): JSX.Element => {
+  const abortControllerRef = useRef(new AbortController());
+
+  useEffect(() => {
+    const abortController = new AbortController();
+    abortControllerRef.current = abortController;
+
+    const initSSE = async () => {
+      try {
+        console.log("initSSE");
+        await fetchEventSource(`${APIBasePath}/admin/environments`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "text/event-stream",
+            Authorization: useAuthStore.getState().token,
+          },
+          onmessage(ev) {
+            console.log("SSE message");
+            console.log(ev.data);
+          },
+          onclose() {
+            console.log("SSE closed");
+            stopResponseSSE();
+          },
+          async onopen(response) {
+            console.log(response);
+            if (response.ok) {
+              console.log("SSE open");
+            } else {
+              console.log("SSE failed to open");
+            }
+            return Promise.resolve();
+          },
+          onerror(ev) {
+            console.error(ev);
+            throw new Error("SSE error");
+          },
+          signal: abortController.signal,
+        });
+      } catch (error) {
+        console.log("Error initializing SSE:", error);
+      }
+    };
+
+    initSSE().catch((error) => {
+      console.log(error);
+    });
+
+    return () => {
+      console.log("Cleanup");
+      stopResponseSSE();
+    };
+  }, []);
+
+  function stopResponseSSE() {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      console.log("SSE connection aborted");
+    }
+    abortControllerRef.current = new AbortController();
+  }
+
+  return <p>Hello</p>;
+};
+
+export default ActiveEnvironmentTracker;

frontend/src/views/Administration.tsx

@@ -14,6 +14,7 @@ import AddEntryDialog from "../components/AddEntryDialog";
 import SubmissionOverview from "../components/SubmissionOverview";
 
 import { APIRequest } from "../api/Request";
+import ActiveEnvironmentTracker from "../components/ActiveEnvironmentTracker";
 
 const assignmentValidator = z.object({
   _id: z.string(),
@@ -357,6 +358,7 @@ function Administration(): JSX.Element {
               "Assign Users",
               "Course Assignments",
               "Submission Overview",
+              "Active Environments",
             ]}
           >
             <UserAssignment
@@ -375,6 +377,7 @@ function Administration(): JSX.Element {
               key="submissionOverview"
               assignments={assignments}
             ></SubmissionOverview>
+            <ActiveEnvironmentTracker key="activeEnvironments"></ActiveEnvironmentTracker>
           </AdminTabs>
         </Grid>
       ) : null}