[SignalR][Client][TS] Unable to unsubscribe from SignalR connection state change events

[imekachi]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

I am integrating SignalR into my React code. Currently, there is no way to listen to all connection state changes.
A workaround I found is to use onclose, onreconnecting and onreconnected. However, there is no way to unsubscribe from these events.

On the client code, I preserve and reuse the connection instance. When a component needs to access the SignalR connection, it will get the same connection instance if one has already been created, and then subscribe to the changes.
When the component unmounts, it has no way to unsubscribe so the stale handlers are stuck in the connection instance(this._closedCallbacks, this._reconnectingCallbacks, and this._reconnectedCallbacks). When the component is remounted, new handlers are added. This causes memory leak on the client side.

Describe the solution you'd like

• Add a way to unsubscribe from connection status change events. For example,
  • Returns the unsubscribe function when calling onclose, onreconnecting, and onreconnected (Preferred, the consumer doesn't have to cache the callback reference manually).
  • Or provides offclose, offreconnecting, and offreconnected (the naming can be changed).
• Or add a new method onConnectionStateChange which will be fired every time this._connectionState changes and do one of the following,
  • Returns the unsubscribe function (Preferred, the consumer doesn't have to cache the callback reference manually).
  • Or provides offConnectionStateChange (the naming can be changed).

Additional context

The issue can be addressed by updating this file src/SignalR/clients/ts/signalr/src/HubConnection.ts

[h5aaimtron]

@imekachi for the connection state changes, you pass in a handler which is what you're describing as "subscribing". To "unsubscribe", you would pass in null.

function handleClose(error: Error | undefined) {
  console.log("Closed:", error);
}

// 'subscribing'
connection.onclose(handleClose);

// 'unsubscribe'
connection.onclose(null);

[imekachi]

aspnetcore/src/SignalR/clients/ts/signalr/src/HubConnection.ts

Lines 570 to 574 in 3e86bc0

	public onclose(callback: (error?: Error) => void): void {
	if (callback) {
	this._closedCallbacks.push(callback);
	}
	}

@h5aaimtron According to how the method is implemented, it wouldn't do anything.

[h5aaimtron]

@imekachi looking at the code, you are correct, however; I do believe that is intentional. SignalR's expectation is to stop() a connection and then set the connection = null to mark it for gc (includes callbacks). Honestly though, I think it depends on your use-case and what you're trying to do. If you can provide more information, perhaps we can brainstorm a solution.

In my previous cases, I used it for a chat lobby service. I wrapped the connection in a chat service and managed my own subscriptions to Subjects (rxjs). This allowed me to do things (within my app) like browse to another page temporarily while remaining connected to the chat lobby, then clicking a link back into the lobby with all the content that happened while I was gone. My chat lobby components only needed to subscribe/unsubscribe from the chat service events, not the hubconnection itself.

[0xbenon]

Hi @imekachi did you solve it? I'm in the same situation. I want to do some specific use case in some component when the connection was reconnected.

In my App.tsx I start the connection to my hub and store it in some zustand store, to reuse it in all the app. First, I tried this

const ComponentA = (): JSX.Element => {
    const { connection } = useHubConnectionStore(state => state.connection);

    useEffect(() => {
         connection?.onreconnected(async connectionId => {
             // do something specifically here
         });
     }, []);

But yeah, after the component is unmounted, the listener keeps alive... Then, I tried register the onreconnected in App.tsx but I need other global state from ComponentA for my logic:/ so this becomes more complex.

Now, my idea is maybe store the status in the hub zustand store, and detect this in ComponentA with useEffect, but idk, I don't lilke it at all