Hi,
I have been playing a bit with your wrapper. I haven't found any way to handle errors with it - the equivalent of:

$.connection.hub.error(function (error) {
    console.log('SignalR error: ' + error)
});

am I missing anything?

So I am very new to SignalR, in fact I've only been using it for a couple of days now. Anyway, I am getting the error below when my application first starts up:

The code for the application in question is located in two projects, a Web API and a Single Page Application (SPA). The first one has my backend code (C#) and the second one my client-side code (AngularJS). I think the problem might be due to the fact that the projects in question run on different ports. The Web API, where my SignalR hub lives, is on port 60161 and the SPA is on 60813. My hub is declared like so:

and then in my Startup.cs file for my Web API I initialize SignalR like this:

For my client-side code I use an Angular SignalR API called angular-signalr-hub (Angular-signalr-hub). The client-side follows:

I did some googling yesterday and one of the suggestions I came upon was to set the SignalR URL to the one of my Web API, which I did (the commented out line above). When I uncomment the line in question, that does seem to do something because if I now go tohttp://localhost:60161/signalr/hubs in my browser, it does show me the dynamically generated proxy file:

and when I run my application I no longer get the error above, but now it doesn't seem to connect. It gets to the negotiate line and it stops there:

I think it should look like this (this is from a SignalR tutorial I found):

In addition, none of my listeners (declared in my Angular code above) get called, so something is still now working quite right. There should be more lines in the log to the effect that connection was successfully established, etc. What could be the problem here?

I'm always checking the releases and there never is a change log so I have to go through all the commits. This would be a huge help to your loyal fans :)

I have attempted to obtain the signalr connection Id without success.

When I do this : var conn = hub.connection; and console.log(conn); I see the id of the connection in the log, its something like this: id: "235ds-sdre65-sfde3d-sfd4rs" but when I do
var conn = hub.connection.id and log it, its says id is undefined.

How do I obtain it? I can obtain all the other fields of the connection except id and token.

Hi!

how i do requests which using jsonp?

Is there a way to fake a hub that doesn't exist with angular-signalr-hub?
It would be nice to have a service like angular-mocks ngMockE2E in a backend-less app.

by looking at the signalr code,looks like when URL is supplied, It is not necessary to pass the useDefaultPath:false object.

I am getting CORS issue when this flag is passed. No issues when the object with flag is not passed.

$.hubConnection(options.rootPath) WORKS.
$.hubConnection(options.rootPath, { useDefaultPath: false }); Throws CORS error.

SignalR code ref

if (!url || settings.useDefaultPath) {
url = (url || "") + "/signalr";
}

with this when a URL is passed, it doesn't require the flag.

I apologize in advance if this is purely a misunderstanding on my part.

I can't seem to figure out, how to make sure the hub connection has been established, before I try to bind the result to the view.
I keep getting this error:

SignalR: Connection has not been fully initialized. Use .start().done() or .start().fail() to run logic after the connection has started.

Is there a way to only return the hub from the routeprovider, after the connection has been established?

Hi,

Is it possible to remove the Nuget package dependency to "AngularJS Core" ?
It is in conflict with the "Angular JS" (complete package) in my project.

Some other packagers of extensions didn't set dependency to either AngularJS packages to let developpers choose either...

Thanks :)

I try using your library with typescript, so I have the following angular factory:

export class ChatFactory implements IChatFactory {

    public hub: ngSignalr.Hub;

    $inject = ["$rootScope", "Hub"];

    static factory($rootScope: angular.IRootScopeService, Hub: ngSignalr.HubFactory) {
        return new ChatFactory($rootScope, Hub);
    }

    constructor($rootScope: angular.IRootScopeService, Hub: ngSignalr.HubFactory) {

        var options: ngSignalr.HubOptions = {
            // options
        };
        this.hub = new Hub("chat", options);
    }
}

This results in an error, because the url isn't correct:

But the default way to initialize a hub works:

var chat = $.connection.chat;
$.connection.hub.start({ transport: 'auto'}, function () {
    chat.server.join()
        .done(function (success) {
            if (success === false) {
            }
        });
});

If I have to pass in the url, I have to pass it from the view through ng-init to the controller, to the service, and then initialize the hub with the given rootUrl. This still doesn't work though, with the same error message. What am I doing wrong here?

EDIT
Postfixing the given rooturl with 'signalr/' does work, but I still don't know why the library would pick a different rooturl than the $.connection.hub

Hi Justin,
Quick question. I know browser's websocket client doesn't allow custom headers to be set. But I get error that the url is too long when I try to pass my bearer token within the queryParams. Obviously because my token is actually really long. Any idea how I can solve this issue?
Many thanks in advance.

Hi,

It would be nice if there was method to unsubscribe events.
There is:
if (options && options.listeners) {
Object.getOwnPropertyNames(options.listeners)
.filter(function (propName) {
return typeof options.listeners[propName] === 'function';
})
.forEach(function (propName) {
Hub.on(propName, options.listeners[propName]);
});
}

so would be nice to be able to do 'off'
Yes, it's possible to do hub.proxy.off('broadcastMessage');
But maybe you will add something more elegant.

I'm having an issue where signalr client side events are not being triggered when the server fires them.

I've tracked the problem down to using different hubs on different controllers.

Whatever hubs are active on my first page load those hubs will work perfectly. Any hubs that are subsequently setup by new controllers will not receive their client side events called from the server.

I believe this is because the client code determines which hubs to connect to on the server and because there are no client events subscribed to for the inactive hubs it never initializes the connection for those inactive hubs. [See note listed here: http://www.asp.net/signalr/overview/signalr-20/hubs-api/hubs-api-guide-javascript-client#establishconnection]

Then when the controllers become active, and the client events are subscribed to, the connection is never re-established because the globalConnection variable has already been given a value.

I've confirmed this is the problem by commenting out the conditional around initGlobalConnection(options). Whenever this method fires every time a hub is created the client side events are always properly triggered by the server. This of course isn't a suitable long term fix, but it did prove out the theory.

I think the long-term solution to this is probably to reset the global connection whenever the active hubs on the client change. I'll probably explore this, but I figured I'd post this to open a dialog in case I was missing something obvious.

Example:

PageOneController
uses HubA
Has Client Side Event ReceivedGreeting

PageTwoController
uses HubB
Has Client Side Event UpdateTicker

If PageOneController is the initial controller hit, ReceivedGreeting client event fires properly and UpdateTicker client event does not.

If PageTwoController is the initial controller, UpdateTicker client event fires properly and ReceivedGreeting client event does not fire properly.

Please publish as NPM package as well 👍

https://www.npmjs.com/

I'm using Typescript. Controller is created on each navigate to one of my pages. I create a new "Hub" inside my controller constructor. When I navigate away from the page, scope & controller are removed, but the "Hub" is never cleaned up and - through usage of my app for a while - I end up with many, many open hub proxies, with no way to clean them up.

Is this an issue, or is there a way to clean up a hub proxy when it's no longer in "scope"/used? (whilst still leaving the underlying connection open)

Reconnecting using $.conneciton.hub.start() or stop() doesn't trigger stateChanged listener
Tried with $.hubConnection() too. no luck

Any advice?

Hello,

Thanks for the great plugin, great job. I came across this piece of code and I was trying to make sure i'm using it right.

First I'm creating a Hub object

                var hub = new Hub('carbonSignalHub', {
                    rootPath: '/signalr',
                    methods: ['stepCreated', 'stepUpdated']
                });

Now I want to call a message on the server, so I

                    hub.connect().done(function () {
                        hub.stepCreated(JSON.stringify(step_loading));
                    }); 

But what if i want to call another function, how do I keep track that the connection is established, do I create another hub.connect().done(.. call as before or should I be keeping track of the connection status?

How to use the reconnect feature?

You recently released version 1.3.1 on GitHub, but the NuGet Packages are already at Version 1.3.3, but still contain version 1.3.0 of the script.

It would be nice if you could have version numbering of in sync between GitHub releases and NuGet Packages and NuGet Packages always up to date.

How do I get the User name listed with the Context.ConnectionId? I've add the name string to the OnConnected() override but getting lost in Ng.

string name = Context.User.Identity.Name;

Hi, I currently have 3 separate hubs for different parts of our website (angular, requirejs). Things work just fine if I make a different signalr connection for each hub, but we found an issue with IE/Chrome that prevents the website open on more than 2 tabs (in our case). so I've been working on having all 3 hubs share the same connection.

2 of them work just fine, and the OnConnected for both get called at the same time since they're both part of a directive that loads at the same time.

now the 3rd hub... that one gets loaded and called on a specific page of the application. if you're going to the url of that page directly then all is good...the OnConnected function gets called too on the server side. BUT if you load the web app from a different page snf then go to the page that needs that third hub, the onconnected doesn't get called (since it should already be connected which is fine). but I can't call Client.Caller.DoSomething() from the server at all...the angular hub doesn't seem to be listening for anything...any ideas? let me know if I need to explain more please

steps to reproduce:

1. • client connects to the signalr enpoint
2. • client successfully sends data and receives data from signalr
3. • kill the server
4. • the hub throws an error: Error: WebSocket closed.
5. • state changed: 2
6. • bring up the server
7. • hub goes in reconnecting mode
8. • state changed: 1 (yes we got a connection again!!!)

so far so good.

but when I try to run step 2, the call is made to the hub but not passed to the server.
Fiddler even doesn't show anyting there.

Hi,

it's me again, i am using your angular signalr hub a couple of weeks and so far everything
worked fine but now i ran into a problem, maybe it's a general signalR roblem or a config thing, i don't know right now.
I was hosting my testapp on the ASP development Server where everyting worked fine, now i was trying to host it on my local IIS 8.5 and it's not working anymore. I receive an error while starting the hub ("Error during negotiation request -> Page not Found 404"), therefore i have also tested your sample Grid on my local IIS and i received the same error. Any ideas what i am doing wrong, i read a lot about crossdomain access and stuff like that, but i dont think that this is the problem.

Kind Regards
Manuel

Hi.

Is there a way to know the moment when the connection was succeeded? I need to notify the server as soon as the page loads, and sometimes at that moment the connection to the hub has not been estabilished yet.

Thanks!
Robson

Hi,

Send you a private mesage as well - hope you don't mind.

Really like your module and the approach you took in wrapping the Hub.

Pending this: https://github.com/yyankowski/angularjsmodules/blob/master/signalR.module.js - think it would be wise to implement something similar to _safeApply in your wrapper ?

Also - error handlers for connections ?

Regards

I'm trying to read data returned from a hub method, but done function doesn't seem to run... Could you let me know how to read the returned data? Thank you.

hub code
public string serverMethod(string param)
{
return "result";
}

client code
hub.serverMethod('param').done(function (result) {
console.log('result', result);
});

We are using this package. It is awesome. But we need to specify list of supported transports over options. Current sources already have this code, but version 1.3.0 that is exist in bower still doesn't have such functionality.

Are you planning new release and update bower package?

I am seeking advice on this, from those more experienced with AngularJS and the use of this hub script. My application is structured like this:

1. Unauthenticated user opens page/refreshes page, no connection is made to server
2. User logs in, I call an APP WIDE FACTORY to initialize signalr connection (passing token via qs)
3. In this app-wide factory I register all my listeners that would be used across multiple controllers.
4. Irrespective of what controller is in scope, or view in display, server-side pushes to the app are received by the not-active controllers and their views updated so that when I go to those views I can see the sent messages.
5. So what this means is, I have only one factory that manages signalr, as opposed to one factory per controller, and this factory is injected into each of the controllers that need it.

Is this a good design from AngularJS standpoint? In a way, I reason that this is consistent with the generated proxy in signalr.

Is this a good design? (I am new to AngularJS and this whole SPA thing kills me. A simple page refresh on Angular app can do wonders and cause untold damages! NOTE: I have no problem how to implement this, just if it is a good design, or if there is a better alternative and a description of that alternative approace)

I'm struggling with the factory and the async nature of it as a AngularJS newbie, unfortunately the provided chat app does not handle my problem:

MetronicApp.factory('Meter', [
    '$rootScope', 'Hub', function ($rootScope, Hub) {

        var hub = new Hub('meterHub', {
            listeners: {
                'SendCurrentActuals': function (message) {
                    $rootScope.$broadcast('SendDataEvent', message);
                }
            },

            methods: ['GetCurrentActuals'],

            errorHandler: function (error) {
                console.error(error);
            },

            hubDisconnected: function () {
                if (hub.connection.lastError) {
                    hub.connection.start();
                }
            }
        });

        var getCurrentActuals = function () {
                return hub.GetCurrentActuals();
        };
        return {
            getNumbers: getCurrentActuals
        };

    }]);

MetronicApp.controller('DashboardController', function ($rootScope, $scope, Meter) {
    console.log(Meter.getNumbers());
});

Gives Error: SignalR: Connection must be started before data can be sent. Call .start() before .send(). I'm struggling how to incorporate the hub.promise.done in the code above to execute only when the hub has connected. I tried several approaches with no luck..

Thanks!

Is it possible to use this hub for cross-domain signalr?
I've tried with rootPath options (rootPath: 'http://localhost:50803') but looks like it's not working.

Thanks

Hi,
I have written following module like described in your sample application:

angular.module('com', ['SignalR'])
.factory('com', ['Hub', function (Hub) {
var hub = new Hub('isyshub', {
listeners: {},
methods: ['getEvents'],
errorHandler: function (error) {
alert(error);
}
});
return hub;
}]);

Now i have the following problem, when i call the severside method getEvents(), I receive an exception, that i need to start the hub first. I cant find out where you start the hub in your sample application. I have worked with jquery signalr and there exists a function called start() on the hub object. Am i doing something wrong?

Thanks Manuel.

Hi, I am using SignalR in an Ionic app and I am testing a scenario when a user (with an established SignalR connection) logs out and than logs back in. Application disconnects from SignalR hub by calling hub.disconnect() method. When the user logs back in, a new Hub is created, but now the stateChanged with $.signalR.connectionState.connected is invoked twice. It seems that event handlers remain active after hub disconnection. Has anyone else encountered this problem?

A typescript definition currently doesn't exist for this at the moment. I'm working on creating it, and I will eventually submit it to DefinitelyTyped so it can be used for those who are working with this Hub factory in a Typescript project.

Here's a link to my fork of DefinitelyTyped:
https://github.com/AdamSantaniello/DefinitelyTyped

Variable globalConnections are recycling connection by the conection rootpath.
In my app, I use the same rootpath for two hubs, but when the connection is created, I suppose the connecion store hub name information, so its not reusable with another hub.
I solve the problem setting useSharedConnection in false, but that is only deactivating this facility.

If you have two hubs, then one register first, then the other reuse the connection of the first. And that make the second hub fail. But it fails silently. You still can send commands to the server, but the commands received by the server are ignored. Even the signalR library don`t log it (with log enabled of course).

Sorry my english :D

Is this supported out of the box? What is the default behavior?

The current NuGet Package has a dependency on the angularjs NuGet Package. There exist other packages which are more modular: http://www.nuget.org/packages/AngularJS.Core/

It would be nice if there would also be a NuGet Package available which has a dependency on the required modular NuGet Packages instead of angularjs.

I can't get it to work when i'm using an angular routing. Do you know how to solve this issue?

I test the plugin as described in the example. The only difference is that the server is hosted in another IP, i.e, http://localhost:5587 while the client is on http://localhost. I have allowed the CORS using Microsoft.Owin.CORS. However, the console gives me following error.

Error: SignalR: Connection has not been fully initialized. Use .start().done() or .start().fail() to run logic after the connection has started.
r.prototype.send@http://localhost/website1/signalr/jquery.signalR-2.1.2.min.js:24:11752
i.prototype.invoke@http://localhost/website1/signalr/jquery.signalR-2.1.2.min.js:24:32954
Hub.invoke@http://localhost/website1/signalr-hub.js:41:11
Hub[method]@http://localhost/website1/signalr-hub.js:68:13

I think it make sense to be able to define it in one place and then be used by multiple hubs, so you will only need to manage them in one place. It will just be an option and it can be overridden on a definition of a Hub

I am new to AngularJS and have been looking hard for a signalr wrapper. I downloaded this and tried severally to produce (without success) just a simple chat viz: a simple factory, and a controller that sends a message to the server-side hub, and a broadcast of that message to all connected clients. The sample I found using this wrapper is too complicated. Pls can someone provide a simple chat factory and a controller? Must I go the web api route to use this?

Like I keep asking myself "what's this lock and unlock anyway? Who wants to lock a chat?" This is so frustrating for those of use learning angularjs, who want to use mature libraries such as this. PLEASE!

In order for angular to update our UI magically, we need $rootScope.$digest() to occur after any of our app code is executed. When angular-signalr-hub receives an incoming event from the hub, it does not trigger a digest afterwards--so any data changes we make in our event listeners will not be automatically picked up by angular.

This can be solved by either manually calling $rootScope.$apply() or $rootScope.$digest() after running the user's event callbacks (à la $TimeoutProvider) or by simply wrapping the callbacks in a $timeout() call (See: angular-socket-io).

I failed to find a way to pass connectionData to the connection. It is always empty array.

While making a non .net project, I noticed that you made the NuGet package dependant on Microsoft.AspNet.SignalR.
While in fact, you have only need for Microsoft.AspNet.SignalR.JS . Just the JavaScript client side.

I think you should consider modifying that. It might reach more people that way.

Hi !

Using SignalR with Angularjs looks great !

Do you think you can go a step further by adding a custom proxy generator for signalr, so all hub proxies are generated and added as an angular module, that relies on your hub wrapper ?

Hi, I had some hard time with the SignalR hub. I have a IIS hosted ASP.NET app where it worked fine and client was connecting to server hub and then I have a self hosted OWIN app with the same hub (added as linked file) where it did not work. I also share the script files, etc.

After quite a lot of debugging I discovered that the version of SignalR that is used in Microsoft.AspNet.SignalR.Owin interface is 1.2:

{"Url":"/signalr", "ConnectionToken":"...", "ConnectionId":"...", "ProtocolVersion":"1.2"}

the web Microsoft.AspNet.SignalR.Owin is using SignalR version 1.4.

{"Url":"/web/signalr", "ConnectionToken":"...", "ConnectionId":"...", "ProtocolVersion":"1.4"}

That's not a big issue, I can downgrade the web app. The problem is that the error was swallowed and not written to console until I added following code to my controller:

$hub.promise.fail(function (reason) { 
   console.error(reason); 
});

I tried to push the code "up" to your signar-hub.js, but it was never invoked.

Can you add this to your code and/or tell me how to make it work globally in your code.

Thanks,
Karel

The link to the Simple Chat Demo in the readme is broken.

I haven't managed to get the signalrgrid demo working either. Some of the dependencies won't resolve even though I've tried downloading and installing them with NuGet. Does it perhaps need to be updated?

Also, the documentation for this is pretty unclear. Ideally we'd want to see a clear absolute minimum example which only displays the simplest possible data (first example shouldn't even modify the data: do that in a more advanced example) and compare what the code would look like with angular-signalr-hub versus doing it with just angular and signalr.

On second thought, it might be even better to have the absolute minimum example not even do anything except display "Hello world!" from the server calling a client method. Most SignalR tutorials and documentation I find online seem to be piling too many things on at once.

The example with "Employees" seems to be using the same word "Employees" to describe clients on the web site AND the data being displayed, and that is very confusing. An example that sharply distinguishes between these things in it's choice of identifier names would help in understanding how to use this. Also, I'm not clear on why it depends on OData instead of just the Web API: that makes it difficult to untangle the OData dependent parts from the pure angular-signalr-hub parts,

I'd like to add some event handlers for the state change events, but it doesn't seem to be working.

  stateChanged: function(state){
                switch (state.newState) {
                    case $.signalR.connectionState.connecting:
                        eventsHub.status = "Connecting";
                        $rootScope.$digest();
                        break;
                    case $.signalR.connectionState.connected:
                        eventsHub.status = "Connected";
                        $rootScope.$digest();
                        break;
                    case $.signalR.connectionState.reconnecting:
                        eventsHub.status = "Reconnecting";
                        $rootScope.$digest();
                        break;
                    case $.signalR.connectionState.disconnected:
                        eventsHub.status = "Disconnected";
                        $rootScope.$digest();
                        break;
                }
            }

The state changed function never seems to be called.

There is an arguments argument which is not matching with param.

Is there a way to change query params on runtime? Should I close all connection and start new?

queryParams:{
'token': 'exampletoken'
},

Hi,
I'm using OAuth in my angular web appliction. How can I send my oauth bearer token when making signalR hub calls so that all my requests are authenticated?