unify close connection after tab closed

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

@@ -0,0 +1,40 @@
+import { useCallback, useEffect } from 'react';
+
+import * as models from '../../models';
+import { isGrpcRequestId } from '../../models/grpc-request';
+import { isEventStreamRequest, isRequestId } from '../../models/request';
+import { isWebSocketRequestId } from '../../models/websocket-request';
+import uiEventBus, { UIEventType } from '../eventBus';
+
+export const useCloseConnection = () => {
+  // close websocket&grpc&SSE connections
+  const closeConnection = useCallback((ids: 'all' | string[]) => {
+    if (ids === 'all') {
+      window.main.webSocket.closeAll();
+      window.main.grpc.closeAll();
+      window.main.curl.closeAll();
+      return;
+    }
+
+    ids.forEach(async id => {
+      if (isGrpcRequestId(id)) {
+        window.main.grpc.cancel(id);
+      } else if (isWebSocketRequestId()) {
+        window.main.webSocket.close({ requestId: id });
+      } else if (isRequestId(id)) {
+        const request = await models.request.getById(id);
+        if (request && isEventStreamRequest(request)) {
+          window.main.webSocket.close({ requestId: id });
+        }
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    uiEventBus.on(UIEventType.CLOSE_TAB, closeConnection);
+
+    return () => {
+      uiEventBus.off(UIEventType.CLOSE_TAB, closeConnection);
+    };
+  }, [closeConnection]);
+};

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

@@ -105,8 +105,7 @@ 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 { useCloseConnection } from '../hooks/use-close-connection';
 import { useExecutionState } from '../hooks/use-execution-state';
 import { useInsomniaTab } from '../hooks/use-insomnia-tab';
 import { useReadyState } from '../hooks/use-ready-state';
@@ -455,8 +454,7 @@ export const Debug: FC = () => {
     },
   });
 
-  useCloseWebSocket();
-  useCloseGrpc();
+  useCloseConnection();
 
   const isRealtimeRequest =
     activeRequest &&