Add base debug WS route

matrixgw_frontend/src/routes/WSDebugRoute.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { WsApi, type WsMessage } from "../api/WsApi";
+import { useSnackbar } from "../hooks/contexts_provider/SnackbarProvider";
+import { time } from "../utils/DateUtils";
+import { MatrixGWRouteContainer } from "../widgets/MatrixGWRouteContainer";
+
+const State = {
+  Closed: "Closed",
+  Connected: "Connected",
+  Error: "Error",
+} as const;
+
+type TimestampedMessages = WsMessage & { time: number };
+
+export function WSDebugRoute(): React.ReactElement {
+  const snackbar = useSnackbar();
+
+  const [state, setState] = React.useState<string>(State.Closed);
+  const wsRef = React.useRef<WebSocket | undefined>(undefined);
+
+  const [messages, setMessages] = React.useState<TimestampedMessages[]>([]);
+
+  React.useEffect(() => {
+    const ws = new WebSocket(WsApi.WsURL);
+    wsRef.current = ws;
+
+    ws.onopen = () => setState(State.Connected);
+    ws.onerror = (e) => {
+      console.error(`WS Debug error! ${e}`);
+      snackbar(`WebSocket error! ${e}`);
+      setState(State.Error);
+    };
+    ws.onclose = () => {
+      setState(State.Closed);
+      wsRef.current = undefined;
+    };
+
+    ws.onmessage = (msg) => {
+      const dec = JSON.parse(msg.data);
+      setMessages((l) => {
+        return [{ time: time(), ...dec }, ...l];
+      });
+    };
+
+    return () => ws.close();
+  }, []);
+
+  return (
+    <MatrixGWRouteContainer label={"WebSocket Debug"}>
+      State: {state}
+      {JSON.stringify(messages)}
+    </MatrixGWRouteContainer>
+  );
+}