feat: keep grpc&websocket connection

packages/insomnia/src/ui/hooks/use-close-grpc.ts

@@ -0,0 +1,27 @@
+import { useCallback, useEffect } from 'react';
+
+import { isGrpcRequestId } from '../../models/grpc-request';
+import uiEventBus, { UIEventType } from '../eventBus';
+
+export const useCloseGrpc = () => {
+  const closeGrpcConnection = useCallback((ids: 'all' | string[]) => {
+    if (ids === 'all') {
+      window.main.webSocket.closeAll();
+      return;
+    }
+
+    ids.forEach(id => {
+      if (isGrpcRequestId(id)) {
+        window.main.grpc.cancel(id);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    uiEventBus.on(UIEventType.CLOSE_TAB, closeGrpcConnection);
+
+    return () => {
+      uiEventBus.off(UIEventType.CLOSE_TAB, closeGrpcConnection);
+    };
+  }, [closeGrpcConnection]);
+};

packages/insomnia/src/ui/hooks/use-close-websocket.ts

@@ -0,0 +1,27 @@
+import { useCallback, useEffect } from 'react';
+
+import { isWebSocketRequestId } from '../../models/websocket-request';
+import uiEventBus, { UIEventType } from '../eventBus';
+
+export const useCloseWebSocket = () => {
+  const closeWebSocketConnection = useCallback((ids: 'all' | string[]) => {
+    if (ids === 'all') {
+      window.main.webSocket.closeAll();
+      return;
+    }
+
+    ids.forEach(id => {
+      if (isWebSocketRequestId(id)) {
+        window.main.webSocket.close({ requestId: id });
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    uiEventBus.on(UIEventType.CLOSE_TAB, closeWebSocketConnection);
+
+    return () => {
+      uiEventBus.off(UIEventType.CLOSE_TAB, closeWebSocketConnection);
+    };
+  }, [closeWebSocketConnection]);
+};

packages/insomnia/src/ui/routes/debug.tsx

@@ -105,6 +105,8 @@ import { getMethodShortHand } from '../components/tags/method-tag';
 import { RealtimeResponsePane } from '../components/websockets/realtime-response-pane';
 import { WebSocketRequestPane } from '../components/websockets/websocket-request-pane';
 import { INSOMNIA_TAB_HEIGHT } from '../constant';
+import { useCloseGrpc } from '../hooks/use-close-grpc';
+import { useCloseWebSocket } from '../hooks/use-close-websocket';
 import { useExecutionState } from '../hooks/use-execution-state';
 import { useInsomniaTab } from '../hooks/use-insomnia-tab';
 import { useReadyState } from '../hooks/use-ready-state';
@@ -452,13 +454,9 @@ export const Debug: FC = () => {
       }
     },
   });
-  // Close all websocket connections when the active environment changes
-  useEffect(() => {
-    return () => {
-      // window.main.webSocket.closeAll();
-      // window.main.grpc.closeAll();
-    };
-  }, [activeEnvironment?._id]);
+
+  useCloseWebSocket();
+  useCloseGrpc();
 
   const isRealtimeRequest =
     activeRequest &&