SignalR 404 error when trying to negotiate

Question

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:

public class ReportHub : Hub
{
    public void SendReportProgress(IList<ReportProgress> reportProgress)
    {                
        this.Clients.All.broadcastReportProgress(reportProgress);
    }

    public override Task OnConnected()
    {
        this.Clients.All.newConnection();

        return base.OnConnected();
    }
}

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

public void Configuration(IAppBuilder app)
{           
    HttpConfiguration config = new HttpConfiguration();
    config.Services.Replace(typeof(IHttpControllerActivator), new NinjectFactory());
    config.MessageHandlers.Add(new MessageHandler());

    //set up OAuth and Cors
    this.ConfigureOAuth(app);
    config.EnableCors();
    config.IncludeErrorDetailPolicy = IncludeErrorDetailPolicy.Always;

    // Setting up SignalR
    app.Map("/signalr", map =>
    {
        map.UseCors(CorsOptions.AllowAll);
        map.RunSignalR(new HubConfiguration { EnableJSONP = true });
    });

    //set up json formatters
    FormatterConfig.RegisterFormatters(config.Formatters);

    WebApiConfig.Register(config);

    app.UseWebApi(config);
}

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

angular
.module("mainApp")
.factory("reportHubService", ["$rootScope", "Hub", reportHubService]);

/// The factory function
function reportHubService($rootScope, Hub) {
    var vm = this;
    vm.reportName = "None";

    // Setting up the SignalR hub
    var hub = new Hub("reportHub", {
        listeners: {
            'newConnection': function(id) {
                vm.reportName = "SignalR connected!";
                $rootScope.$apply();
            },
            'broadcastReportProgress': function (reportProgress) {
                vm.reportName = reportProgress.reportName;
                $rootScope.$apply();
            }
        },
        errorHandler: function(error) {

        },
        hubDisconnected: function () {
            if (hub.connection.lastError) {
                hub.connection.start();
            }
        },
        transport: 'webSockets',
        logging: true
        //rootPath: 'http://localhost:60161/signalr'
    });

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 to http://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?

UPDATE: upon further debugging i found out the problem is most likely being caused by the ProtocolVersion property being different between the client and the result here:

Because of that it seems it just exists and fails to establish connection.

Answer 1

I figured out what the problem was. My SignalR dependencies were out of date and because of that my client and server versions differed. All I had to do was update (via NuGet Package Manager) all SignalR dependencies to the latest version and now it works.

As a side note, SignalR was not very good at telling me what was wrong. In fact, no error message was displayed, unless of course there was some additional logging somewhere that had to be found or turned on, in addition to the logging I already had (turned on). Either way, it's either not logging certain errors or it makes it difficult to figure out how to turn on all logging. I had to go and debug the JQuery SignalR api to figure out what the problem was, which was a time consuming endeavour.