Setup websocket reconnection logic

This commit is contained in:
2025-01-01 11:21:32 -06:00
parent d2ec94f578
commit e8fe3e8ec9

View File

@@ -25,6 +25,7 @@ function useSocket(): UseSocketResult {
const [downloads, setDownloads] = useState<Download[] | null>(null); const [downloads, setDownloads] = useState<Download[] | null>(null);
const [executables, setExecutables] = useState<Executable[] | null>(null); const [executables, setExecutables] = useState<Executable[] | null>(null);
const socketRef = useRef<WebSocket | null>(null); const socketRef = useRef<WebSocket | null>(null);
const allowReconnectRef = useRef<boolean>(true);
function deleteDownload(download_token: number) { function deleteDownload(download_token: number) {
if (socketRef.current == null) { if (socketRef.current == null) {
@@ -43,40 +44,56 @@ function useSocket(): UseSocketResult {
} }
useEffect(() => { useEffect(() => {
const socket = new WebSocket( function connect() {
(window.location.protocol === "https:" ? "wss://" : "ws://") + const socket = new WebSocket(
(import.meta.env.DEV ? "localhost:5800" : window.location.host) + (window.location.protocol === "https:" ? "wss://" : "ws://") +
"/ws" (import.meta.env.DEV ? "localhost:5800" : window.location.host) +
); "/ws"
socketRef.current = socket; );
socketRef.current = socket;
socket.onmessage = (event) => { socket.onmessage = (event) => {
const data = JSON.parse(event.data); const data = JSON.parse(event.data);
if (data.type == undefined) if (data.type == undefined)
throw new Error("Received message without type"); throw new Error("Received message without type");
switch (data.type) { switch (data.type) {
case "state": case "state":
setId(data.session.id as number); setId(data.session.id as number);
setDownloads(data.session.downloads as Download[]); setDownloads(data.session.downloads as Download[]);
break; break;
case "executables": case "executables":
setExecutables(data.executables as Executable[]); setExecutables(data.executables as Executable[]);
break; break;
default: default:
console.warn("Received unknown message type", data.type); console.warn("Received unknown message type", data.type);
} }
}; };
socket.onclose = (event) => { socket.onclose = (event) => {
console.log("WebSocket connection closed", event); console.log("WebSocket connection closed", event);
};
socketRef.current = null;
if (allowReconnectRef.current) {
setId(null);
setDownloads(null);
setExecutables(null);
setTimeout(() => {
connect();
}, 3000);
}
};
}
connect();
return () => { return () => {
// Close the socket when the component is unmounted // Close the socket when the component is unmounted
console.log("Unmounting, closing WebSocket connection"); console.log("Unmounting, closing WebSocket connection");
socket.close(); socketRef.current?.close();
allowReconnectRef.current = false;
}; };
}, []); }, []);