Improve WebSocket connection handling

- Updated the WebSocket connection logic to prevent multiple connections by checking for both OPEN and CONNECTING states.
- This change addresses potential issues in React strict mode where multiple connection attempts could occur.

Author: Dylan Huang

vite-app/src/App.tsx

@@ -23,8 +23,11 @@ const App = observer(() => {
   const reconnectAttemptsRef = useRef(0);
 
   const connectWebSocket = () => {
-    if (wsRef.current?.readyState === WebSocket.OPEN) {
-      return; // Already connected
+    if (
+      wsRef.current?.readyState === WebSocket.OPEN ||
+      wsRef.current?.readyState === WebSocket.CONNECTING
+    ) {
+      return; // Already connected or connecting. This will happen in React strict mode.
     }
 
     const ws = new WebSocket(getWebSocketUrl());