Not getting distributed/disparate Angular site to talk to SignalR in WebAPI

Question

I very new to SignalR and I am trying to integrate it with an AngularJS site and WebAPI. I followed greate this example to begin with. However, as I mentioned, the website I am working on will live on a different server to the WebAPI project.

In my dev environment I have set up a local site for Angular, hosted in IIS on localhost:60000/127.0.0.1:60000 and the WebAPI lives on localhost:31374 (in VS2013, using IIS Express.) This is to simulate the 2 different servers the projects will live on.

In my Angular project I am trying to connect to the SignalR hub by doing the following:

var connection = $.hubConnection();

$.connection.hub.url = "http://localhost:31374/signalr";

//$.connection.url = "/signalr";
//$.conenction.baseUrl = "http://localhost:31374";

this.proxy = connection.createHubProxy('foos');

console.clear();
// start connection
console.log(connection);
connection.start();

this.proxy.on('newFoo', function (data) {
    $rootScope.$emit("newFoo", data);
});

The result in the console looks like this:

In my code you can see in that I am trying to set the hub url (and in the comments just below it, that I have tried to set the connection object's properties manually.) However, in the screenshot you can see that neither the URL or the baseURL is what I set it to be, in fact the baseURL still points back to the Angular site on http://127.0.0.1:60000/, in stead of http://localhost:31374/.

What am I missing?

Answer 1

This set up looks a little off. Specifically, perhaps your connection.start() call is not correct. I've done this in Angular with a cross domain server with the following setup which works fine

var proxy;

$(function () {

    $.connection.hub.url = 'http://localhost:31374/signalr';

    $.connection.hub.start({ xdomain: true })
        .done(function () { 
            console.log('Connected. connectionId : ' + $.connection.hub.id); 
        })
        .fail(function () {
            console.log('Could not connect!');
        });

    proxy = $.connection.yourServerHubName;

    proxy.client.yourClientHubMethod = function () {
        // your client hub functions
    };
});

Also be sure to check you are loading the proper generated .js file in your HTML

<script src="//localhost:31374/signalr/hubs"></script>