From 0d2ecc9d3d93cafc2c1310a290b7c042ad2d1e38 Mon Sep 17 00:00:00 2001
From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com>
Date: Thu, 20 Mar 2025 00:53:16 +0530
Subject: [PATCH 1/2] proxy websocket url

---
 client/src/contexts/WebSocketContext.tsx | 2 +-
 client/vite.config.ts                    | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/contexts/WebSocketContext.tsx b/client/src/contexts/WebSocketContext.tsx
index c345a18..eaca89c 100644
--- a/client/src/contexts/WebSocketContext.tsx
+++ b/client/src/contexts/WebSocketContext.tsx
@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useEffect, useState } from "react";
 
-const WEBSOCKET_URL = "ws://localhost:8000/ws/freqsplit/";
+const WEBSOCKET_URL = "/ws/freqsplit/";
 
 interface WebSocketContextType {
     socket: WebSocket | null;
diff --git a/client/vite.config.ts b/client/vite.config.ts
index 12f020c..700d569 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -10,6 +10,11 @@ export default defineConfig({
         target: 'http://localhost:8000',
         changeOrigin: true,
       },
+      '/ws': {
+        target: "ws://localhost:8000",
+        ws: true,
+        changeOrigin: true,
+      }
     },
   },
 })

From cab21ad4959c95c0585da4ec3e648dd8670292a9 Mon Sep 17 00:00:00 2001
From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com>
Date: Thu, 20 Mar 2025 18:45:07 +0530
Subject: [PATCH 2/2] do not enable input if websocket connection failed

---
 client/src/Pages/UploadPage.tsx | 61 +++++++++++++++++++++++----------
 1 file changed, 43 insertions(+), 18 deletions(-)

diff --git a/client/src/Pages/UploadPage.tsx b/client/src/Pages/UploadPage.tsx
index 0dc6379..a1243d4 100644
--- a/client/src/Pages/UploadPage.tsx
+++ b/client/src/Pages/UploadPage.tsx
@@ -35,29 +35,54 @@ function UploadPage() {
     const startLogs = async () => {
       setLogs([formatLogMessage("Initializing freqsplit")]);
   
-      setTimeout(() => {
-        setLogs((prevLogs) => [...prevLogs, formatLogMessage("Connecting to server")]);
+      setLogs((prevLogs) => [
+        ...prevLogs,
+        formatLogMessage("Connecting to server"),
+      ]);
   
-        // Send GET request to /api/ping
-        axios.get("/api/ping")
-          .then((ping_resp) => {
-            if (ping_resp.status === 200) {
-              setTimeout(() => {
-                setLogs((prevLogs) => [...prevLogs, formatLogMessage("Connection established successfully")]);
+      axios
+        .get("/api/ping")
+        .then((ping_resp) => {
+          if (ping_resp.status === 200) {
+            setLogs((prevLogs) => [
+              ...prevLogs,
+              formatLogMessage("Connection established successfully"),
+            ]);
+            setLogs((prevLogs) => [
+              ...prevLogs,
+              formatLogMessage("Waiting for WebSocket connection"),
+            ]);
+  
+            const checkWebSocketConnection = () => {
+              if (isConnected) {
+                setLogs((prevLogs) => [
+                  ...prevLogs,
+                  formatLogMessage("WebSocket connected"),
+                ]);
                 setInputEnabled(true);
-              }, 80);
-            } else {
-              setLogs((prevLogs) => [...prevLogs, formatLogMessage("Failed to connect to server")]);
-            }
-          })
-          .catch(() => {
-            setLogs((prevLogs) => [...prevLogs, formatLogMessage("Failed to connect to server")]);
-          });
-      }, 90);
+              } else {
+                setTimeout(checkWebSocketConnection, 100);
+              }
+            };
+  
+            checkWebSocketConnection();
+          } else {
+            setLogs((prevLogs) => [
+              ...prevLogs,
+              formatLogMessage("Failed to connect to server"),
+            ]);
+          }
+        })
+        .catch(() => {
+          setLogs((prevLogs) => [
+            ...prevLogs,
+            formatLogMessage("Failed to connect to server"),
+          ]);
+        });
     };
   
     startLogs();
-  }, []);
+  }, [isConnected]);
  
   const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();