SignalR - connection.hubName is undefined

Question

I have the following SignalR hub class (only the top is shown):

[HubName("DataServiceHub")]
public class DataServiceHub : Hub, IDataServiceHub, IDisconnect, IConnected
{
.
.      

I'm then self hosting the hub in a Console App using the following code in Main function:

string hubsUrl = appSettingsReader.GetValue("hubsUrl", typeof(string)).ToString();
var hubsServer = new Server(hubsUrl);
hubsServer.Configuration.DisconnectTimeout = TimeSpan.Zero;
hubsServer.MapHubs();
hubsServer.Start();

The values of hubsUrl is "http://localhost:4322/"

Once I've run up the Console App If I browse in Chrome "http://localhost:4322/signalr/hubs" I can see the SignalR javascript and my hub at the bottom:

signalR.dataServiceHub = {
    _: {
        hubName: 'dataServiceHub',

I'm trying to connect to this hub from an MVC3 app running on a HTTPS/SSL setup (i.e. the site url prefix is "https://localhost/"

In my Razor page I definately include the SignalR js:

<script src="/Website/Scripts/kendo/2012.2.710/jquery.min.js" type="text/javascript"></script>
<script src="/Website/Scripts/jquery.signalR-0.5.3.min.js" type="text/javascript"></script>
<script src="http://localhost:4322/signalr/hubs" type="text/javascript"></script>

Note that we're using Kendo so the jquery js include is via that.

Then in the $(document).ready(function () { I have the following:

jQuery.support.cors = true;
var connection = $.hubConnection('http://localhost:4322');
var hub = connection.dataServiceHub;

But 'hub' is always 'undefined'.

What am I missing here?

If this is cross domain problem - how do I resolve it?

Solution

Hubs have 2 programming models and you're mixing them:

1. http://www.asp.net/signalr/overview/hubs-api/hubs-api-guide-javascript-client
2. http://www.asp.net/signalr/overview/guide-to-the-api/hubs-api-guide-javascript-client

If you scroll to the bottom of those pages, there's an example that shows you what you need to do to use cross domain in each of the models.