feat(tabs): keep connection for tabs-[INS-4778] #8266

CurryYangxx · 2024-12-24T02:56:34Z

Changes:

CurryYangxx · 2024-12-26T08:58:48Z

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

-  // Close all websocket connections when the active environment changes
-  useEffect(() => {
-    return () => {
-      window.main.webSocket.closeAll();
-      window.main.grpc.closeAll();
-    };
-  }, [activeEnvironment?._id]);


This a trade-off; Previously, we closed all connections when the active environment changed to avoid users not knowing which URL is currently used to connect if included some env.
Now, based on multiple tabs, we may have multiple WebSocket or grpc tabs from different workspaces, and we want to keep all the connections when the corresponding tab exists. When a workspace's active environment changes, finding which requests are affected and closing them will introduce more complexity.
So I just delete it and only close connection when tab close.

discuss with @ihexxa. I will try to emit an event through the event bus when modifying the active environment. So that we could get the workspaceId and filter the connections under the workspace then close them.

updated in this commit: f367b65

ihexxa · 2025-01-08T06:47:40Z

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

+export const useCloseConnection = () => {
+  // close websocket&grpc&SSE connections
+  const closeConnection = useCallback((_: string, ids: 'all' | string[]) => {
+    if (ids === 'all') {


If user just closse all tabs in one org, will this also close connections from other organizations?

Add a hook to close all connections when switching organizations now. We can decide if we should keep the connection for all organizations or alert a modal according to the user's feedback after the beta release.

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

jackkav · 2025-01-08T13:59:27Z

packages/insomnia/src/ui/eventBus.ts

 export enum UIEventType {
  CLOSE_TAB = 'closeTab',
+  CHANGE_AVTIVE_ENV = 'changeActiveEnv',
 }
 class EventBus {
  private events: Record<UIEventType, EventHandler[]> = {
    [UIEventType.CLOSE_TAB]: [],
+    [UIEventType.CHANGE_AVTIVE_ENV]: [],
  };


This should all ideally be modelled in the main context for consistency of implementation and in order to minimize bugs and surprises due to the deviation in implementation.

These logics will only run in the renderer process, so I think it is unnecessary to pass the event to the main process, to avoid the communication and IPC function code.
In my opinion, we could clarify the scope of the code according to the scenario. When the code is only effective in the rendering process, we need to try to avoid introducing it into the main process.
This eventbus class can be a common approach when we want to communicate between different components and not need the main process.

jackkav · 2025-01-08T14:02:33Z

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

+import { useInsomniaTabContext } from '../context/app/insomnia-tab-context';
+import uiEventBus, { UIEventType } from '../eventBus';
+
+// this hook is use for control when to close connections(websocket & SSE & grpc stream & graphql subscription)


a react hook is a mechanism to wrap react features into a observable function for reuse.

close all connections appears to be a fire and forget behavior.

why introduce all this complexity?

This scenario is indeed a bit complicated, we can't simply know when to close a connection, such as clicking a button and then closing the connection in the callback.
The connection may be closed because the user closed the tab manually or the user deleted the request or workspace. Using eventbus can decouple the connection control logic from the tab. Also I think abstract these logic into this custom hook could make the debug.tsx component simpler to read, and put the connection control logic together for easy maintenance.

jackkav · 2025-01-08T15:02:30Z

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

-  // Close all websocket connections when the active environment changes
-  useEffect(() => {
-    return () => {
-      window.main.webSocket.closeAll();
-      window.main.grpc.closeAll();
-    };
-  }, [activeEnvironment?._id]);


this use effect was clear about what happened and why, we close all connections when active env changes, the new hook is unclear about both of these questions.

Under the multiple-tabs scenario, when we switch to another tab that belongs to another workspace, activeEnvironment also changes and runs the logic in this useEffect. This is not as expected, we want to keep the connection when the tab exists, so we have to use another approach to implement it.

packages/insomnia/src/ui/components/environment-picker.tsx

* fix: runner not update * also delete folder runner tab when delete a folder * fix: keep websocket connection * feat: keep grpc&websocket connection * unify close connection after tab closed * del repeat func * close graphql subscription * resolve conflict * feat: close connections when active environment change * add desc for hooks * close connections when organization change

CurryYangxx marked this pull request as draft December 24, 2024 02:56

CurryYangxx force-pushed the feat/keep-websocket-connection branch from 00aee7b to 404d75e Compare December 24, 2024 03:05

CurryYangxx changed the title ~~feat(tabs): keep websocket connection~~ feat(tabs): keep connection for tabs Dec 26, 2024

CurryYangxx commented Dec 26, 2024

View reviewed changes

CurryYangxx changed the title ~~feat(tabs): keep connection for tabs~~ feat(tabs): keep connection for tabs-[INS-4778] Dec 26, 2024

CurryYangxx force-pushed the feat/keep-websocket-connection branch from 6469466 to 43fb92a Compare January 6, 2025 02:39

CurryYangxx marked this pull request as ready for review January 6, 2025 03:06

CurryYangxx requested review from ihexxa and cwangsmv January 6, 2025 03:07

CurryYangxx force-pushed the feat/multiple-tab branch from e0e0b04 to cbbc8c2 Compare January 6, 2025 06:20

CurryYangxx force-pushed the feat/keep-websocket-connection branch from 4e06cac to 2dc6493 Compare January 6, 2025 06:23

CurryYangxx force-pushed the feat/multiple-tab branch from cbbc8c2 to d0e9218 Compare January 6, 2025 09:09

CurryYangxx mentioned this pull request Jan 7, 2025

feat: multiple tabs - [INS-4225] #8151

Open

15 tasks

CurryYangxx force-pushed the feat/multiple-tab branch from 73e9a24 to ff9f748 Compare January 7, 2025 08:07

CurryYangxx force-pushed the feat/keep-websocket-connection branch from 8303eaa to db8f798 Compare January 7, 2025 08:11

ihexxa reviewed Jan 8, 2025

View reviewed changes

CurryYangxx requested a review from ihexxa January 8, 2025 08:14

ihexxa approved these changes Jan 8, 2025

View reviewed changes

packages/insomnia/src/ui/hooks/use-close-connection.ts Outdated Show resolved Hide resolved

jackkav reviewed Jan 8, 2025

View reviewed changes

packages/insomnia/src/ui/components/environment-picker.tsx Outdated Show resolved Hide resolved

CurryYangxx force-pushed the feat/keep-websocket-connection branch from 0b5f7f3 to 8f4715d Compare January 9, 2025 06:34

CurryYangxx requested a review from ihexxa January 9, 2025 07:58

CurryYangxx added 6 commits January 13, 2025 16:24

fix: runner not update

5d22417

also delete folder runner tab when delete a folder

5ae9187

fix: keep websocket connection

451b2ec

feat: keep grpc&websocket connection

3590e39

unify close connection after tab closed

362029e

del repeat func

15876f1

CurryYangxx added 5 commits January 13, 2025 16:24

close graphql subscription

f3a86f0

resolve conflict

9103598

feat: close connections when active environment change

8ae0636

add desc for hooks

88d6d94

close connections when organization change

241b4ec

CurryYangxx force-pushed the feat/keep-websocket-connection branch from 64fe62f to 241b4ec Compare January 13, 2025 08:24

CurryYangxx merged commit 6d5d421 into feat/multiple-tab Jan 13, 2025
8 checks passed

CurryYangxx deleted the feat/keep-websocket-connection branch January 13, 2025 08:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(tabs): keep connection for tabs-[INS-4778] #8266

feat(tabs): keep connection for tabs-[INS-4778] #8266

CurryYangxx commented Dec 24, 2024 •

edited

Loading

CurryYangxx Dec 26, 2024 •

edited

Loading

CurryYangxx Jan 8, 2025 •

edited

Loading

CurryYangxx Jan 8, 2025

ihexxa Jan 8, 2025

CurryYangxx Jan 13, 2025

jackkav Jan 8, 2025

CurryYangxx Jan 9, 2025 •

edited

Loading

jackkav Jan 8, 2025 •

edited

Loading

CurryYangxx Jan 9, 2025

jackkav Jan 8, 2025 •

edited

Loading

CurryYangxx Jan 9, 2025

feat(tabs): keep connection for tabs-[INS-4778] #8266

feat(tabs): keep connection for tabs-[INS-4778] #8266

Conversation

CurryYangxx commented Dec 24, 2024 • edited Loading

CurryYangxx Dec 26, 2024 • edited Loading

Choose a reason for hiding this comment

CurryYangxx Jan 8, 2025 • edited Loading

Choose a reason for hiding this comment

CurryYangxx Jan 8, 2025

Choose a reason for hiding this comment

ihexxa Jan 8, 2025

Choose a reason for hiding this comment

CurryYangxx Jan 13, 2025

Choose a reason for hiding this comment

jackkav Jan 8, 2025

Choose a reason for hiding this comment

CurryYangxx Jan 9, 2025 • edited Loading

Choose a reason for hiding this comment

jackkav Jan 8, 2025 • edited Loading

Choose a reason for hiding this comment

CurryYangxx Jan 9, 2025

Choose a reason for hiding this comment

jackkav Jan 8, 2025 • edited Loading

Choose a reason for hiding this comment

CurryYangxx Jan 9, 2025

Choose a reason for hiding this comment

CurryYangxx commented Dec 24, 2024 •

edited

Loading

CurryYangxx Dec 26, 2024 •

edited

Loading

CurryYangxx Jan 8, 2025 •

edited

Loading

CurryYangxx Jan 9, 2025 •

edited

Loading

jackkav Jan 8, 2025 •

edited

Loading

jackkav Jan 8, 2025 •

edited

Loading