I'm experiencing intermittent signalr connection problems
sometimes it fails, sometimes it doesn't...
Here is the setup...
I have a list of orders, each order has a unique signalr connection. Currently there are 230 orders on a single page. The purpose of having a signalr connection is so users can see any real time updates on each order (who is viewing, editing, etc). I've decided to have a separate connection for each order so that I don't have to manage the order that is currently being viewed, edited, etc. So far, for the orders that have successfully connected, the updates are correct and smooth.
Here is my list with a sample of another user viewing an order (a photo of that user is being shown)
Here is my code that connects to the signalr hubs
crimeassure.factory('hubProxy', ['$rootScope', function ($rootScope) {
function hubProxyFactory(hubName) {
var _hubConnection = $.hubConnection();
_hubConnection.logging = true;
var _hubProxy = _hubConnection.createHubProxy(hubName);
return {
on: function (eventName, callback, failCallback) {
_hubProxy.on(eventName, function (result) {
$rootScope.$apply(function () {
if (callback) {
callback(result);
}
});
})
},
invoke: function (methodName, data) {
_hubProxy.invoke(methodName, data)
.done(function (result) {
//$rootScope.$apply(function () {
// if (callback) {
// callback(result);
// }
//});
});
},
start: function (successCallback, failCallback) {
_hubConnection.start({ transport: 'webSockets' }).done(successCallback).fail(failCallback);
},
hubConnection: _hubConnection,
};
};
return hubProxyFactory;
}]);
crimeassure.directive('componentLiveUpdates', function () {
return {
restrict: 'E',
scope: {
componentId: '=',
},
templateUrl: '/scripts/templates/directive-templates/component-live-updates.html',
controllerAs: 'vm',
bindToController: true,
controller: ["$scope", "$rootScope", "appData", "hubProxy",
function componentLiveUpdates($scope, $rootScope, appData, hubProxy) {
var vm = (this);
var user = appData.getCurrentUser();
vm.componentActivity = [];
var reQueueHub = hubProxy('researcherExpressQueueHub');
var componentActivityChanged = function (component) {
if (component.ActivityValue === 'ComponentModalClose') {
var idx = vm.componentActivity.indexOf(component);
vm.componentActivity.splice(idx, 1);
}
if (component.ActivityValue === 'ComponentModalOpen') {
vm.componentActivity.push(component);
}
}
var successCallback = function () {
console.log('connected to signalR, connection ID =' + reQueueHub.hubConnection.id + '--' + vm.componentId);
reQueueHub.invoke('joinGroup', vm.componentId);
$rootScope.reQueueHubs.push({
ComponentId: vm.componentId,
Hub: reQueueHub
});
}
var failCallback = function (e) {
console.log('Error connecting to signalR = ' + vm.componentId);
console.log(e);
//startHubConnection();
}
var startHubConnection = function () {
reQueueHub.start(successCallback, failCallback);
}
var initialize = function () {
reQueueHub.on('updateComponentActivity', componentActivityChanged);
startHubConnection();
}
initialize();
}],
}
});
and here is my hub class
public class ResearcherExpressQueueHub : Hub
{
public void UpdateComponentActivity(ComponentItem item)
{
Clients.Group(item.ComponentId.ToString()).updateComponentActivity(item);
}
public void ComponentModalOpen(ComponentItem item)
{
item.Activity = ComponentActivity.ComponentModalOpen;
Clients.Group(item.ComponentId.ToString()).updateComponentActivity(item);
}
public void ComponentModalClose(ComponentItem item)
{
item.Activity = ComponentActivity.ComponentModalClose;
Clients.Group(item.ComponentId.ToString()).updateComponentActivity(item);
}
public Task JoinGroup(string componentId)
{
return Groups.Add(Context.ConnectionId, componentId);
}
public Task LeaveGroup(string componentId)
{
return Groups.Remove(Context.ConnectionId, componentId);
}
}
so my questions are,
Why am i experiencing a disconnect "WebSocket is closed before the connection is established"
Is my approach the best way to approach this type of requirement?
Use grouping mechanisme of signalr and NOT create multiple connections for your usecase!
There are limitations from IIS and also from browsers. Some browser have a limit of 4 or 5 paralell connections. You can test it by yourself by opening multiple different browsers.
Details about grouping:
Working with groups in signalr is really simple. Details you will find here: https://learn.microsoft.com/en-us/aspnet/signalr/overview/guide-to-the-api/working-with-groups
Related
Let's say i have two or more hubs in my server application. My javascipt client (Angular SPA) initialy needs a connection to the first hub, and needs to subscribe to a method like this:
connection = $.hubConnection(appSettings.serverPath);
firstHubProxy = connection.createHubProxy('firstHub');
firstHubProxy('eventFromFirstHub', function () {
console.log('Method invokation from FirstHub');
});
connection.start().done(function (data) {
console.log("hub started");
});
Everything is working fine. Now a user of my Angular SPA may decide to put a widget on his page, which needs to subcribe to a method from the second hub:
secondHubProxy = connection.createHubProxy('firstHub');
secondHubProxy('eventFromSecondHub', function () {
console.log('Method invokation from SecondHub');
});
The method from the second hub is not working. I guess because it was created after connection.start().
My example is simplified, in my real appplication there will be 20+ hubs to which users may or may not subscribe by adding or removing widgets to their page.
As far as i can tell i have two options:
call connection.stop() and then connection.start(). Now both hub subscriptions are working. This just doesn't feel right, because on all hubs, the OnConnected() event fires, and my application will be starting and stopping all the time.
create hub proxy objects for all possible hubs, subscribe to a dummy
method on all possible hubs, so the application can subscibe to hub
methods later if desired. This also doesn't feel right, because i
need to create 20+ hub proxies, while i may need just a few of
those.
Is anybody aware of a pattern which i can use to accomplish this? Or am i missing something very simple here?
Personally I use #2. I have a hub service that subscribes to all client methods. Any of my other angular components then pull that hub service in and subscribe to its events as needed.
Here it is;
hub.js
(function () {
'use strict';
angular
.module('app')
.factory('hub', hub);
hub.$inject = ['$timeout'];
function hub($timeout) {
var connection = $.connection.myHubName;
var service = {
connect: connect,
server: connection.server,
states: { connecting: 0, connected: 1, reconnecting: 2, na: 3, disconnected: 4 },
state: 4
};
service = angular.extend(service, OnNotify());
activate();
return service;
function activate() {
connection.client.start = function (something) {
service.notify("start", something);
}
connection.client.anotherMethod = function (p) {
service.notify("anotherMethod", p);
}
// etc for all client methods
$.connection.hub.stateChanged(function (change) {
$timeout(function () { service.state = change.newState; });
if (change.state != service.states.connected) service.notify("disconnected");
console.log("con:", _.invert(service.states)[change.oldState], ">", _.invert(service.states)[change.newState]);
});
connect();
}
function connect() {
$.connection.hub.start({ transport: 'auto' });
}
}
})();
OnNotify
var OnNotify = function () {
var callbacks = {};
return {
on: on,
notify: notify
};
function on(name, callback) {
if (!callbacks[name])
callbacks[name] = [];
callbacks[name].push(callback);
};
function notify(name, param) {
angular.forEach(callbacks[name], function (callback) {
callback(param);
});
};
}
Then I can subscribe to things as needed, for example in a controller;
(function () {
'use strict';
angular
.module('app')
.controller('MyController', MyController);
MyController.$inject = ['hub'];
function MyController(hub) {
/* jshint validthis:true */
var vm = this;
vm.something = {};
hub.on('start', function (something) {
$timeout(function () {
console.log(something);
vm.something = something;
});
});
}
})();
I have a serious issue here. My application relies on SignalR functionality, but because of that I am unable to write unit tests. I am new to testing frameworks and have used Jasmine only in simple cases. SignalR has proven to be too much of a challenge for me, but I need to understand how I can successfully test it.
This is my CommsApp.ts file [typescript]:
/// <reference path="References.ts" />
var commsAnimationsModule = angular.module('forge.communications.animations', ['ngAnimate']);
var commsDirectivesModule = angular.module('forge.communications.directives', []);
var commsServicesModule = angular.module('forge.communications.services', []);
var commsFiltersModule = angular.module('forge.communications.filters', []);
var commsApp = angular.module('forge.communications.CommsApp',
[
'ngRoute',
'ngAnimate',
'cfValidation',
'ui.bootstrap',
'forge.communications.animations',
'forge.communications.directives',
'forge.communications.services',
'forge.communications.filters',
'angularFileUpload',
'timeRelative'
]);
commsApp.config(function ($routeProvider: ng.route.IRouteProvider, $locationProvider: any) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/scheduled-messages', {
templateUrl: '/forge/CommsApp/js/Controllers/ScheduledMessageList/ScheduledMessageList.html',
controller: 'ScheduledMessageListController'
}).
when('/geotriggered-messages', {
templateUrl: '/forge/CommsApp/js/Controllers/GeoMessageList/GeoMessageList.html',
controller: 'GeoMessageListController'
}).
when('/scheduled-message/create', {
templateUrl: '/forge/CommsApp/js/Controllers/CreateScheduledMessage/CreateScheduledMessage.html',
controller: 'CreateScheduledMessageController'
}).
when('/scheduled-message/edit/:id', {
templateUrl: '/forge/CommsApp/js/Controllers/EditScheduledMessage/EditScheduledMessage.html',
controller: 'EditScheduledMessageController'
}).
when('/geotriggered-message/create', {
templateUrl: '/forge/CommsApp/js/Controllers/CreateGeotriggeredMessage/CreateGeotriggeredMessage.html',
controller: 'CreateGeotriggeredMessageController'
}).
when('/geotriggered-message/edit/:id', {
templateUrl: '/forge/CommsApp/js/Controllers/EditGeotriggeredMessage/EditGeotriggeredMessage.html',
controller: 'EditGeotriggeredMessageController'
}).
otherwise({
redirectTo: '/scheduled-messages'
});
});
commsApp.run(function ($rootScope: ICommsRootScope, commsSignalrEventService: CommsSignalrEventService, commsMgmtHttpService: CommsMgmtHttpServiceClient) {
// set up the items on the root scope
$rootScope.SelectedLocale = 'en-ie';
$rootScope.ForgeApplicationKey = "9496B737-7AE2-4FBD-B271-A64160759177";
$rootScope.AppVersionString = "1.0.0";
$rootScope.SessionToken = getCookie("ForgeSessionToken");
commsSignalrEventService.initialize().done(() => {
// send any messages about a new user logging in to the application here.
});
// call this at app startup to pre-cache this data for the create and edit pages
commsMgmtHttpService.GetUpdateMessageEditorOptions();
});
function getCookie(name:string) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) return parts.pop().split(";").shift();
}
This is the test file (I removed most of the code since it's not working anyway, I have been chasing my own tail here):
describe('forge.communications.CommsApp', function () {
beforeEach(module('forge.communications.CommsApp'));
var route, rootScope, proxy, commsSignalrEventService;
beforeEach(inject(function (_$route_, _$rootScope_, _commsSignalrEventService_) {
route = _$route_,
rootScope = _$rootScope_;
commsSignalrEventService = _commsSignalrEventService_;
}));
describe("should map routes to controllers and templates", function () {
it("/scheduled-messages route should be mapped to ScheduledMessageListController", function () {
expect(2).toEqual(2);
expect(route.routes['/scheduled-messages'].controller).toBe('ScheduledMessageListController');
});
});
});
This is CommsSignalREventService.ts file:
var servicesModule: ng.IModule = angular.module('forge.communications.services');
servicesModule.factory('commsSignalrEventService', function ($rootScope): CommsSignalrEventService {
return new CommsSignalrEventService($rootScope);
});
class CommsSignalrEventService {
private $rootScope: ng.IScope;
private proxy:any = null;
constructor($rootScope) {
this.$rootScope = $rootScope;
}
public initialize(): JQueryPromise<any>{
this.proxy = $.connection['communicationsCenterHub'];
console.log('proxy',this.proxy);
//scheduled messages
this.proxy.client.broadcastScheduledMessageCreatedEvent = (messageId: number) => {
this.$rootScope.$broadcast('comms-message-created', { messageId: messageId });
};
this.proxy.client.broadcastScheduledMessageUpdatedEvent = (messageId: number) => {
this.$rootScope.$broadcast('comms-message-updated', { messageId: messageId });
};
this.proxy.client.broadcastScheduledMessageStateChangedEvent = (messageId: number) => {
this.$rootScope.$broadcast('comms-message-statechanged', { messageId: messageId });
};
this.proxy.client.broadcastScheduledMessageDeletedEvent = (messageId: number) => {
this.$rootScope.$broadcast('comms-message-deleted', { messageId: messageId });
};
//geotriggered messages
this.proxy.client.broadcastGeoMessageCreatedEvent = (messageId: number) => {
this.$rootScope.$broadcast('comms-geomessage-created', { messageId: messageId });
};
this.proxy.client.broadcastGeoMessageUpdatedEvent = (messageId: number) => {
this.$rootScope.$broadcast('comms-geomessage-updated', { messageId: messageId });
};
this.proxy.client.broadcastGeoMessageStateChangedEvent = (messageId: number) => {
this.$rootScope.$broadcast('comms-geomessage-statechanged', { messageId: messageId });
};
this.proxy.client.broadcastGeoMessageDeletedEvent = (messageId: number) => {
this.$rootScope.$broadcast('comms-geomessage-deleted', { messageId: messageId });
};
var promise = $.connection.hub.start();
promise.done(function () {
//console.log('comms signalr hub started');
});
return promise;
}
public RegisterScheduledMessageCreated(messageId: number): void{
this.proxy.server.registerScheduledMessageCreated(messageId);
}
public RegisterScheduledMessageUpdated(messageId: number): void {
this.proxy.server.registerScheduledMessageUpdated(messageId);
}
public RegisterScheduledMessageDeleted(messageId: number): void {
this.proxy.server.registerScheduledMessageDeleted(messageId);
}
public RegisterScheduledMessageStateChanged(messageId: number): void {
this.proxy.server.registerScheduledMessageStateChanged(messageId);
}
public RegisterGeoMessageCreated(messageId: number): void {
this.proxy.server.registerGeoMessageCreated(messageId);
}
public RegisterGeoMessageUpdated(messageId: number): void {
this.proxy.server.registerGeoMessageUpdated(messageId);
}
public RegisterGeoMessageDeleted(messageId: number): void {
this.proxy.server.registerGeoMessageDeleted(messageId);
}
public RegisterGeoMessageStateChanged(messageId: number): void {
this.proxy.server.registerGeoMessageStateChanged(messageId);
}
}
The error I am seeing constantly in the command line, whenever I run karma, is forge.communications.CommsApp encountered a declaration exception FAILED
TypeError: Cannot read property 'client' of undefined at CommsSignalREventService, meaning that the 'proxy' variable in CommsSignalREventService.ts file is undefined:
this.proxy = $.connection['communicationsCenterHub'];
console.log('proxy', this.proxy); //resolves to UNDEFINED in tests, works fine in the app
this.proxy.client.broadcastScheduledMessageCreatedEvent = function (messageId) {
_this.$rootScope.$broadcast('comms-message-created', { messageId: messageId });
};
I will appreciate any help, because the amount of time I have put trying to figure it out is beyond ridiculous at this stage.
I think your issue is that your actual app references JavaScript dynamically generated by SignalR at runtime. This script is generally found at "~/signalr/hubs" or "~/signalr/js".
This script is what creates the $.connection['communicationsCenterHub'] proxy for you. Without a reference to this script in your test, this proxy will be undefined.
I'm presuming that you are not running the SignalR server when you are running your Jasmine tests. If this is the case you have two options:
You can simply copy the script generated by SignalR at "~/signalr/hubs" to a file and reference that in your tests. You could manually do this by pointing your browser to the generated script URL and, but you would have to update this file anytime your hub changes. You can automate this by running signalr.exe ghp /path:[path to the .dll that contains your Hub class] as a post-build step which will generate this file for you.
You can just avoid using the generated proxy altogether. Look at the "Without the generated proxy" section of the SignalR JS API reference.
I would like to build an app for Instagram login. The problem is that i don't know how to initialize connection with instagram client id. I had done this with OAuth.initialize(), but it doesn't work. I am recieving 'OAuthException'.
My code so far:
return {
initialize: function() {
//initialize OAuth.io with public key of the application
OAuth.initialize('e6u0TKccWPGCnAqheXQYg76Vf2M', {cache:true});
authorizationResult = OAuth.create('instagram');
console.log(authorizationResult);
},
isReady: function() {
return (authorizationResult);
},
connectInstagram: function() {
var deferred = $q.defer();
OAuth.popup('instagram', {cache:true}, function(error, result) {
if (!error) {
authorizationResult = result;
deferred.resolve();
console.log('case');
} else {
console.log('case2');
}
});
return deferred.promise;
},
clearCache: function() {
OAuth.clearCache('instagram');
authorizationResult = false;
}
For starters, the only acceptable argument for OAuth.initialize is "public key".
Remove the second parameter.
I have implemented authentication system and after upgrading from angular 1.0.8 to 1.2.x,
system doesn't work as it used to. When user logs in it gets a token. When token is expired,
a refresh function for new token is called. New token is successfully created on a server and it is
stored to database. But client doesn't get this new token, so it requests a new token again,
and again and again until it logs out. Server side (MVC Web Api) is working fine, so problem must
be on client side. The problem must be on a retry queue. Below I pasted relevant code and
a console trace for both versions of applications (1.0.8 and 1.2.x).
I am struggling with this for days now and I can't figure it out.
In the link below, there are 5 relevant code blocks:
interceptor.js (for intercepting requests, both versions)
retryQueue.js (manages queue of retry requests)
security.js (manages handler for retry queue item and gets a new token from api)
httpHeaders.js (sets headers)
tokenHandler.js (handles tokens in a cookies)
Code: http://pastebin.com/Jy2mzLgj
Console traces for app in angular 1.0.8: http://pastebin.com/aL0VkwdN
and angular 1.2.x: http://pastebin.com/WFEuC6WB
interceptor.js (angular 1.2.x version)
angular.module('security.interceptor', ['security.retryQueue'])
.factory('securityInterceptor', ['$injector', 'securityRetryQueue', '$q',
function ($injector, queue, $q) {
return {
response: function(originalResponse) {
return originalResponse;
},
responseError: function (originalResponse) {
var exception;
if (originalResponse.headers){
exception = originalResponse.headers('x-eva-api-exception');
}
if (originalResponse.status === 401 &&
(exception === 'token_not_found' ||
exception === 'token_expired')){
queue.pushRetryFn(exception, function retryRequest() {
return $injector.get('$http')(originalResponse.config);
});
}
return $q.reject(originalResponse);
}
};
}])
.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('securityInterceptor');
}]);
retryQueue.js
angular.module('security.retryQueue', [])
.factory('securityRetryQueue', ['$q', '$log', function($q, $log) {
var retryQueue = [];
var service = {
onItemAddedCallbacks: [],
hasMore: function(){
return retryQueue.length > 0;
},
push: function(retryItem){
retryQueue.push(retryItem);
angular.forEach(service.onItemAddedCallbacks, function(cb) {
try {
cb(retryItem);
}
catch(e){
$log.error('callback threw an error' + e);
}
});
},
pushRetryFn: function(reason, retryFn){
if ( arguments.length === 1) {
retryFn = reason;
reason = undefined;
}
var deferred = $q.defer();
var retryItem = {
reason: reason,
retry: function() {
$q.when(retryFn()).then(function(value) {
deferred.resolve(value);
}, function(value){
deferred.reject(value);
});
},
cancel: function() {
deferred.reject();
}
};
service.push(retryItem);
return deferred.promise;
},
retryAll: function() {
while(service.hasMore()) {
retryQueue.shift().retry();
}
}
};
return service;
}]);
security.js
angular.module('security.service', [
'session.service',
'security.signin',
'security.retryQueue',
'security.tokens',
'ngCookies'
])
.factory('security', ['$location', 'securityRetryQueue', '$q', /* etc. */ function(){
var skipRequests = false;
queue.onItemAddedCallbacks.push(function(retryItem) {
if (queue.hasMore()) {
if(skipRequests) {return;}
skipRequests = true;
if(retryItem.reason === 'token_expired') {
service.refreshToken().then(function(result) {
if(result) { queue.retryAll(); }
else {service.signout(); }
skipRequests = false;
});
} else {
skipRequests = false;
service.signout();
}
}
});
var service = {
showSignin: function() {
queue.cancelAll();
redirect('/signin');
},
signout: function() {
if(service.isAuthenticated()){
service.currentUser = null;
TokenHandler.clear();
$cookieStore.remove('current-user');
service.showSignin();
}
},
refreshToken: function() {
var d = $q.defer();
var token = TokenHandler.getRefreshToken();
if(!token) { d.resolve(false); }
var session = new Session({ refreshToken: token });
session.tokenRefresh(function(result){
if(result) {
d.resolve(true);
TokenHandler.set(result);
} else {
d.resolve(false);
}
});
return d.promise;
}
};
return service;
}]);
session.service.js
angular.module('session.service', ['ngResource'])
.factory('Session', ['$resource', '$rootScope', function($resource, $rootScope) {
var Session = $resource('../api/tokens', {}, {
create: {method: 'POST'}
});
Session.prototype.passwordSignIn = function(ob) {
return Session.create(angular.extend({
grantType: 'password',
clientId: $rootScope.clientId
}, this), ob);
};
Session.prototype.tokenRefresh = function(ob) {
return Session.create(angular.extend({
grantType: 'refresh_token',
clientId: $rootScope.clientId
}, this), ob);
};
return Session;
}]);
Thanks to #Zerot for suggestions and code samples, I had to change part of the interceptor like this:
if (originalResponse.status === 401 &&
(exception === 'token_not_found' || exception === 'token_expired')){
var defer = $q.defer();
queue.pushRetryFn(exception, function retryRequest() {
var activeToken = $cookieStore.get('authorization-token').accessToken;
var config = originalResponse.config;
config.headers.Authorization = 'Bearer ' + activeToken;
return $injector.get('$http')(config)
.then(function(res) {
defer.resolve(res);
}, function(err)
{
defer.reject(err);
});
});
return defer.promise;
}
Many thanks,
Jani
Have you tried to fix the error you have in the 1.2 log?
Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: project in client.projects, Duplicate key: string:e
That error is at the exact point where you would need to see the $httpHeaders set line. It looks like your session.tokenrefresh is not working(and that code is also missing from the pastebin so I can't check.)
Interceptors should always return a promise.
So in responseError, you should better return $q.reject(originalResponse); instead of just return originalResponse.
Hope this helps
I think that your interceptor returns wrong result in errorResponse method.
I faced some "undebuggable" issue for the same reason.
With this code you could fall in some infinite loop flow...
Hope this helps.
I just started building an app using the Ionic Framework. But it basically uses Angular.js so the question should be easy to answer :)
The challenge: I have a list of dummy contacts which I can get from a ContactService. Now I'd like to get the actual contacts of my phone. The problem is, that I have to wait for the app to load before I can access the contacts. So I have to wrap it inside an event listener. This is my code, how can I make it work (the success function gets an array of contacts, I checked that)?
document.addEventListener('deviceready', function() {
StatusBar.styleDefault();
function onSuccess(contacts) {
ContactService.add(contacts);
};
function onError(contactError) {
alert('onError!');
};
var options = new ContactFindOptions();
options.multiple = true;
var fields = ['displayName', 'name'];
navigator.contacts.find(fields, onSuccess, onError, options);
}, false);
angular.module('starter.services', [])
.factory('ContactService', function() {
var contacts = [];
return {
add: function(result) {
contacts = result;
},
all: function() {
return contacts;
},
get: function(contactId) {
return contacts[contactId];
},
count: function() {
return contacts.length;
}
}
});