Originally posted on: http://geekswithblogs.net/shaunxu/archive/2014/05/30/signalr-auto-disconnect-when-page-changed-in-angularjs.aspxIf 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
All documents and related graphics, codes are provided "AS IS" without warranty of any kind.
Copyright © Shaun Ziyan Xu. This work is licensed under the Creative Commons License.
