79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
import React from "react";
|
|
import { JsonView, darkStyles } from "react-json-view-lite";
|
|
import "react-json-view-lite/dist/index.css";
|
|
import { WsApi, type WsMessage } from "../api/WsApi";
|
|
import { useSnackbar } from "../hooks/contexts_provider/SnackbarProvider";
|
|
import { time } from "../utils/DateUtils";
|
|
import { useUserInfo } from "../widgets/dashboard/BaseAuthenticatedPage";
|
|
import { MatrixGWRouteContainer } from "../widgets/MatrixGWRouteContainer";
|
|
import { NotLinkedAccountMessage } from "../widgets/NotLinkedAccountMessage";
|
|
|
|
const State = {
|
|
Closed: "Closed",
|
|
Connected: "Connected",
|
|
Error: "Error",
|
|
} as const;
|
|
|
|
type TimestampedMessages = WsMessage & { time: number };
|
|
|
|
export function WSDebugRoute(): React.ReactElement {
|
|
const user = useUserInfo();
|
|
if (!user.info.matrix_account_connected) return <NotLinkedAccountMessage />;
|
|
|
|
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"}>
|
|
<div>
|
|
State:{" "}
|
|
<span style={{ color: state == State.Connected ? "green" : "red" }}>
|
|
{state}
|
|
</span>
|
|
</div>
|
|
{messages.map((msg, id) => (
|
|
<div style={{ margin: "10px", backgroundColor: "black" }}>
|
|
<JsonView
|
|
key={id}
|
|
data={msg}
|
|
shouldExpandNode={(level) => level < 2}
|
|
style={{
|
|
...darkStyles,
|
|
container: "",
|
|
}}
|
|
/>
|
|
</div>
|
|
))}
|
|
</MatrixGWRouteContainer>
|
|
);
|
|
}
|