I am currently working on a page that is utilizing SignalR, Angular, and Typescript. Upon the destruction of the current $scope (such as during a page change), I make an attempt to disconnect the client from the SignalR server:
Controller.ts
$scope.$on("$destroy", () => Service.Disconnect());
In my frontend service, I have implemented the following function:
Service.ts
public Disconnect() {
this.hub.disconnect();
}
Upon changing the page, the client successfully disconnects from the hub. This can be confirmed through console logs:
SignalR: Stopping connection.
SignalR: Closing the Websocket.
SignalR: Fired ajax abort async = true.
SignalR: Stopping the monitoring of the keep alive.
This process works flawlessly. However, upon loading a new state and reconnecting, it appears that the old connection is somehow retained, leading to multiple connection attempts. Subsequently, each navigation back and forth causes additional connection attempts.
EDIT
It seems like the stateChanged event is being triggered multiple times, correlating with the number of previous connection setups. This behavior has been mitigated by introducing a simple logic check for "if already connected" upon initial connection establishment, although this workaround is not ideal.
Is there a best practice for handling client disconnection? Should the server/backend hub also manage disconnection processes? Are there any additional steps that should be taken aside from disconnecting the client when the $scope is destroyed?