Originally posted on: http://geekswithblogs.net/shaunxu/archive/2014/05/30/signalr-auto-disconnect-when-page-changed-in-angularjs.aspx

If we are using SignalR, the connection lifecycle was handled by itself very well. For example when we connect to SignalR service from browser through SignalR JavaScript Client the connection will be established. And if we refresh the page, close the tab or browser, or navigate to another URL then the connection will be closed automatically. This information had been well documented here.

In a browser, SignalR client code that maintains a SignalR connection runs in the JavaScript context of a web page. That's why the SignalR connection has to end when you navigate from one page to another, and that's why you have multiple connections with multiple connection IDs if you connect from multiple browser windows or tabs. When the user closes a browser window or tab, or navigates to a new page or refreshes the page, the SignalR connection immediately ends because SignalR client code handles that browser event for you and calls the "Stop" method.

But unfortunately this behavior doesn't work if we are using SignalR with AngularJS. AngularJS is a single page application (SPA) framework created by Google. It hijacks browser's address change event, based on the route table user defined, launch proper view and controller. Hence in AngularJS we address was changed but the web page still there. All changes of the page content are triggered by Ajax. So there's no page unload and load events. This is the reason why SignalR cannot handle disconnect correctly when works with AngularJS.

If we dig into the source code of SignalR JavaScript Client source code we will find something below. It monitors the browser page "unload" and "beforeunload" event and send the "stop" message to server to terminate connection. But in AngularJS page change events were hijacked, so SignalR will not receive them and will not stop the connection.

   1: // wire the stop handler for when the user leaves the page

   2: _pageWindow.bind("unload", function () {

   3:     connection.log("Window unloading, stopping the connection.");

   4:  

   5:     connection.stop(asyncAbort);

   6: });

   7:  

   8: if (isFirefox11OrGreater) {

   9:     // Firefox does not fire cross-domain XHRs in the normal unload handler on tab close.

  10:     // #2400

  11:     _pageWindow.bind("beforeunload", function () {

  12:         // If connection.stop() runs runs in beforeunload and fails, it will also fail

  13:         // in unload unless connection.stop() runs after a timeout.

  14:         window.setTimeout(function () {

  15:             connection.stop(asyncAbort);

  16:         }, 0);

  17:     });

  18: }

Problem Reproduce

In the codes below I created a very simple example to demonstrate this issue. Here is the SignalR server side code.

   1: public class GreetingHub : Hub

   2: {

   3:     public override Task OnConnected()

   4:     {

   5:         Debug.WriteLine(string.Format("Connected: {0}", Context.ConnectionId));

   6:         return base.OnConnected();

   7:     }

   8:  

   9:     public override Task OnDisconnected()

  10:     {

  11:         Debug.WriteLine(string.Format("Disconnected: {0}", Context.ConnectionId));

  12:         return base.OnDisconnected();

  13:     }

  14:  

  15:     public void Hello(string user)

  16:     {

  17:         Clients.All.hello(string.Format("Hello, {0}!", user));

  18:     }

  19: }

Below is the configuration code which hosts SignalR hub in an ASP.NET WebAPI project with IIS Express.

   1: public class Startup

   2: {

   3:     public void Configuration(IAppBuilder app)

   4:     {

   5:         app.Map("/signalr", map =>

   6:             {

   7:                 map.UseCors(CorsOptions.AllowAll);

   8:                 map.RunSignalR(new HubConfiguration()

   9:                     {

  10:                         EnableJavaScriptProxies = false

  11:                     });

  12:             });

  13:     }

  14: }

Since we will host AngularJS application in Node.js in another process and port, the SignalR connection will be cross domain. So I need to enable CORS above.

In client side I have a Node.js file to host AngularJS application as a web server. You can use any web server you like such as IIS, Apache, etc..

Below is the "index.html" page which contains a navigation bar so that I can change the page/state. As you can see I added jQuery, AngularJS, SignalR JavaScript Client Library as well as my AngularJS entry source file "app.js".

   1: <html data-ng-app="demo">

   2:     <head>

   3:         <script type="text/javascript" src="jquery-2.1.0.js"></script>
   1:  
   2:         <script type="text/javascript" src="angular.js">
   1: </script>
   2:         <script type="text/javascript" src="angular-ui-router.js">
   1: </script>
   2:         <script type="text/javascript" src="jquery.signalR-2.0.3.js">
   1: </script>
   2:         <script type="text/javascript" src="app.js">
</script>

   4:     </head>

   5:     <body>

   6:         <h1>SignalR Auto Disconnect with AngularJS by Shaun</h1>

   7:         <div>

   8:             <a href="javascript:void(0)" data-ui-sref="view1">View 1</a> | 

   9:             <a href="javascript:void(0)" data-ui-sref="view2">View 2</a>

  10:         </div>

  11:         <div data-ui-view></div>

  12:     </body>

  13: </html>

Below is the "app.js". My SignalR logic was in the "View1" page and it will connect to server once the controller was executed. User can specify a user name and send to server, all clients that located in this page will receive the server side greeting message through SignalR.

   1: 'use strict';

   2:  

   3: var app = angular.module('demo', ['ui.router']);

   4:  

   5: app.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {

   6:     $stateProvider.state('view1', {

   7:         url: '/view1',

   8:         templateUrl: 'view1.html',

   9:         controller: 'View1Ctrl' });

  10:  

  11:     $stateProvider.state('view2', {

  12:         url: '/view2',

  13:         templateUrl: 'view2.html',

  14:         controller: 'View2Ctrl' });

  15:  

  16:     $locationProvider.html5Mode(true);

  17: }]);

  18:  

  19: app.value('$', $);

  20: app.value('endpoint', 'http://localhost:60448');

  21: app.value('hub', 'GreetingHub');

  22:  

  23: app.controller('View1Ctrl', function ($scope, $, endpoint, hub) {

  24:     $scope.user = '';

  25:     $scope.response = '';

  26:  

  27:     $scope.greeting = function () {

  28:         proxy.invoke('Hello', $scope.user)

  29:             .done(function () {})

  30:             .fail(function (error) {

  31:                 console.log(error);

  32:             });

  33:     };

  34:  

  35:     var connection = $.hubConnection(endpoint);

  36:     var proxy = connection.createHubProxy(hub);

  37:     proxy.on('hello', function (response) {

  38:         $scope.$apply(function () {

  39:             $scope.response = response;

  40:         });

  41:     });

  42:     connection.start()

  43:         .done(function () {

  44:             console.log('signlar connection established');

  45:         })

  46:         .fail(function (error) {

  47:             console.log(error);

  48:         });

  49: });

  50:  

  51: app.controller('View2Ctrl', function ($scope, $) {

  52: });

When we went to View1 the server side "OnConnect" method will be invoked as below.

And in any page we send the message to server, all clients will got the response.

If we close one of the client, the server side "OnDisconnect" method will be invoked which is correct.

But is we click "View 2" link in the page "OnDisconnect" method will not be invoked even though the content and browser address had been changed. This might cause many SignalR connections remain between the client and server. Below is what happened after I clicked "View 1" and "View 2" links four times. As you can see there are 4 live connections.

Solution

Since the reason of this issue is because, AngularJS hijacks the page event that SignalR need to stop the connection, we can handle AngularJS route or state change event and stop SignalR connect manually. In the code below I moved the "connection" variant to global scope, added a handler to "$stateChangeStart" and invoked "stop" method of "connection" if its state was not "disconnected".

   1: var connection;

   2: app.run(['$rootScope', function ($rootScope) {

   3:     $rootScope.$on('$stateChangeStart', function () {

   4:         if (connection && connection.state && connection.state !== 4 /* disconnected */) {

   5:             console.log('signlar connection abort');

   6:             connection.stop();

   7:         }

   8:     });

   9: }]);

Now if we refresh the page and navigated to View 1, the connection will be opened. At this state if we clicked "View 2" link the content will be changed and the SignalR connection will be closed automatically.

Summary

In this post I demonstrated an issue when we are using SignalR with AngularJS. The connection cannot be closed automatically when we navigate to other page/state in AngularJS. And the solution I mentioned below is to move the SignalR connection as a global variant and close it manually when AngularJS route/state changed. You can download the full sample code here.

Moving the SignalR connection as a global variant might not be a best solution. It's just for easy to demo here. In production code I suggest wrapping all SignalR operations into an AngularJS factory. Since AngularJS factory is a singleton object, we can safely put the connection variant in the factory function scope.

Hope this helps,

Shaun