SignalR: $.connection is undefined

Question

I'm using Visual Studio 2012 Ultimate RC, SignalR 0.5.1 and Jquery 1.7.2 in an MVC4 application.

I have looked at: MVC4 SignalR "signalr/hubs" 501 Not Implemented Error

But it does not affect my issue (I am using IIS Express to debug).

When I try to utilize SignalR the $.connection variable is undefined. My server side code:

[HubName("tenantHub")]
public class TenantHub : Hub
{
    ...
    void TenantChange(CrudAction action, Tenant tenant)
    {
        Clients.eventOccurred(action.ToString(), tenant);
    }
}

Client side:

$(function() { var test = $.connection.tenantHub; });

Client side SignalR/hubs is being referenced and I can see the JS code, it does not throw any errors. But referencing $.connection throws a Uncaught TypeError: Cannot read property 'tenantHub' of undefined. Also tried to do the default chat example, it gives the same error. Is SignalR unsupported when utilized in VS2012 or am I just being stupid?

Solution 1

Try taking [HubName("tenantHub")] off your class. Mine wouldn't work if I had those on there. Also try putting your hubs into a folder called "Hubs" at the root of your project.

Solution 2

Try removing the BundleConfig.RegisterBundles(BundleTable.Bundles); from Global.asax.cs, and see if that helps?

Solution 3

This us usually caused due to loading jQuery twice. Usually we are into the habit of loading the jQuery in the footer. Since the signalr complains and forces you to include jQuery library before the signalr-x.js.

You can include the jQuery before the signalr-x.js and you can do something like this in the footer where you include the jQuery plugin to avoid loading it twice:

<script type="text/javascript">
    !window.jQuery && document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"><\/script>');
    !window.jQuery && document.write('<script src="/public/js/vendor/jquery-1.9.1.min.js"><\/script>');
</script>

Hope this helps. :)

Solution 4

I had the same problem in VS2012 RTM.

The problem was that I first added signalr in BundleConfig.cs and expected it to just work. But then using 'View Source' in the browser I noticed that signalr.js was included before jquery.js. signalr.js was included in the top of the page, jquery was included in the bottom of the page.

After some fiddling with BundleConfig signalr.js was included after jquery.js, and now signalr works like a charm!

Solution 5

Try putting RouteTable.Routes.MapHubs(); as the very first item on Application_Start() in Global.asax.cs

I have a sample code/project here

View more solutions

Comments

[Rocklan]

This worked for me! Figured out why, by default the MVC4 template includes jQuery right at the bottom of your layout file (unexpected, and seems stupid considering it includes modernizr at the top). So my page was including jquery twice which screwed everything up. Thanks Thiem :)

[cortijon]

This was exactly the problem for me when I used the default MVC 4 template. Thank you!!

[Lorenzo Dematté]

Actually, it helps, but the right way to do it is to include your additional scripts in the scripts sections @section scripts {} IF you want to use the default layout, OR change the layout to suit your needs (scripts at top, no jquery in layout, etc.)

[army]

Indeed! Big +1 :) (although rookie mistake from me..)