I have an Angular application where certain routes listen for certain SignalR messages and some messages are listened for by multiple routes. Everything is working fine but when I navigate from Route A to Route B, Route A's handler functions for the SignalR events are still being fired. I'm using an Angular service to wrap the SignalR hub and keep track of callback functions. I considered just resetting the array of callback functions on every route change but I get the feeling that's not the right way to do this. Given there should only be one hub connection and route-specific event handling, what's the appropriate way to do this?
Angular SignalR Service
app.factory('SignalRService', [function () {
var eventCallbacks = [];
var entityHub = $.connection.entityHub;
entityHub.client.event = function (payload) {
angular.forEach(eventCallbacks, function (callback, idx) {
callback(payload);
});
};
$.connection.hub.start({ transport: 'longPolling' })
.done(function () { })
.fail(function () { });
return {
subscribeToEvent: subscribeToEvent
};
function subscribeToEvent(callback) {
eventCallbacks.push(callback);
}
}]);