implement websocket connections

client/src/App.tsx

@@ -11,6 +11,7 @@ import {
 import { Home as HomeIcon } from '@mui/icons-material';
 import theme from './theme/theme';
 import { MediaProvider } from './contexts/MediaContext';
+import { WebSocketProvider } from './contexts/WebSocketContext';
 // Import pages
 import LandingPage from './Pages/LandingPage';
 import UploadPage from './Pages/UploadPage';
@@ -25,24 +26,26 @@ const App: React.FC = () => {
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <MediaProvider>
-        <Router>
-          <AppBar position="static">
-            <Toolbar>
-              <Typography variant="h6" sx={{ flexGrow: 1 }}>FreqSplit</Typography>
-              <Button color="inherit" href="/"> <HomeIcon sx={{ mr: 1 }} /> Home </Button>
-            </Toolbar>
-          </AppBar>
+        <WebSocketProvider>
+          <Router>
+            <AppBar position="static">
+              <Toolbar>
+                <Typography variant="h6" sx={{ flexGrow: 1 }}>FreqSplit</Typography>
+                <Button color="inherit" href="/"> <HomeIcon sx={{ mr: 1 }} /> Home </Button>
+              </Toolbar>
+            </AppBar>
 
-          <Routes>
-            <Route path="/" element={<LandingPage />} />
-            <Route path="/upload" element={<UploadPage />} />
-            <Route path="/preview" element={<PreviewPage />} />
-            <Route path="/processing" element={<ProcessingPage />} />
-            <Route path="/results" element={<ResultsPage />} />
-            <Route path="*" element={<Navigate to="/" replace />} />
-            <Route path='/audio' element={<AudioVisualizer />}/>
-          </Routes>
-        </Router>
+            <Routes>
+              <Route path="/" element={<LandingPage />} />
+              <Route path="/upload" element={<UploadPage />} />
+              <Route path="/preview" element={<PreviewPage />} />
+              <Route path="/processing" element={<ProcessingPage />} />
+              <Route path="/results" element={<ResultsPage />} />
+              <Route path="*" element={<Navigate to="/" replace />} />
+              <Route path='/audio' element={<AudioVisualizer />}/>
+            </Routes>
+          </Router>
+        </WebSocketProvider>
       </MediaProvider>
     </ThemeProvider>
   );

client/src/contexts/WebSocketContext.tsx

@@ -0,0 +1,54 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+const WEBSOCKET_URL = "ws://localhost:8000/ws/media/";
+
+interface WebSocketContextType {
+    socket: WebSocket | null;
+    isConnected: boolean;
+}
+
+const WebSocketContext = createContext<WebSocketContextType>({
+    socket: null,
+    isConnected: false,
+});
+
+export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const [socket, setSocket] = useState<WebSocket | null>(null);
+    const [isConnected, setIsConnected] = useState(false);
+
+    useEffect(() => {
+        const newSocket = new WebSocket(WEBSOCKET_URL);
+
+        newSocket.onopen = () => {
+            console.log("Connected to WebSocket!");
+            setIsConnected(true);
+        };
+
+        newSocket.onclose = () => {
+            console.warn("Disconnected from WebSocket");
+            setIsConnected(false);
+        };
+
+        newSocket.onerror = (error) => {
+            console.error("WebSocket error:", error);
+        };
+
+        newSocket.onmessage = (event) => {
+            console.log("Message from server:", event.data);
+        };
+
+        setSocket(newSocket);
+    
+        return () => {
+            newSocket.close();
+        };
+    }, []);
+
+    return (
+        <WebSocketContext.Provider value={{ socket, isConnected }}>
+            {children}
+        </WebSocketContext.Provider>
+    );
+};
+
+export const useWebSocket = () => useContext(WebSocketContext);