refactor: add close websocket

This commit is contained in:
Mauricio Siu
2024-10-05 16:04:28 -06:00
parent e32afde973
commit 84009c5e9b

View File

@@ -16,6 +16,7 @@ interface Props {
export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => { export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
const [data, setData] = useState(""); const [data, setData] = useState("");
const endOfLogsRef = useRef<HTMLDivElement>(null); const endOfLogsRef = useRef<HTMLDivElement>(null);
const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
useEffect(() => { useEffect(() => {
if (!open || !logPath) return; if (!open || !logPath) return;
@@ -24,12 +25,25 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
const wsUrl = `${protocol}//${window.location.host}/listen-deployment?logPath=${logPath}${serverId ? `&serverId=${serverId}` : ""}`; const wsUrl = `${protocol}//${window.location.host}/listen-deployment?logPath=${logPath}${serverId ? `&serverId=${serverId}` : ""}`;
const ws = new WebSocket(wsUrl); const ws = new WebSocket(wsUrl);
wsRef.current = ws; // Store WebSocket instance in ref
ws.onmessage = (e) => { ws.onmessage = (e) => {
setData((currentData) => currentData + e.data); setData((currentData) => currentData + e.data);
}; };
return () => ws.close(); ws.onerror = (error) => {
console.error("WebSocket error: ", error);
};
ws.onclose = () => {
console.log("WebSocket connection closed");
wsRef.current = null; // Clear reference on close
};
return () => {
ws.close();
wsRef.current = null;
};
}, [logPath, open]); }, [logPath, open]);
const scrollToBottom = () => { const scrollToBottom = () => {
@@ -46,6 +60,11 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
onOpenChange={(e) => { onOpenChange={(e) => {
onClose(); onClose();
if (!e) setData(""); if (!e) setData("");
if (!e && wsRef.current) {
wsRef.current.close(); // Close WebSocket when modal closes
setData("");
}
}} }}
> >
<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}> <DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>