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?

Answer 1

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

Answer 2

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.

Answer 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. :)

Answer 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!

Answer 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

Answer 6

If none of these work for you, make sure that in your final html source not only the reference to the SignalR script appears after jQuery, but also that the version matches the actual file that you have in your scripts folder.

<script src="~/Scripts/jquery.signalR-2.0.2.js"></script> 

For instance this one matches 2.0.2 version of SignalR, if you upgrade SignalR via package then you'll have to manually edit this line.

Answer 7

I had a similar issue, mine was working form visual studio 2010 debug but not on localhost (IIS7.5 windows 7). I found that I had an extra slash in the definition for "signalr/hubs", I was using "/signalr/hubs". I also added JSON 2 js reference for browser compatibility. Note the order of declaring .js is important.

<script src="Scripts/JSON2.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.signalR-1.1.2.min.js" type="text/javascript"></script>
<script src="signalr/hubs" type="text/javascript"></script>
<script type="text/javascript">

To find this issue I turned on logging as follows and looked in the console of the dev tools to see the error when deployed on localhost.

// Logs errors to the browser dev 'f12' console
$.connection.hub.logging = true;

Hope this helps someone else. I'm playing with chrome, IE9, 10 on multiple PC's now - what a great library!

Answer 8

Ensure you don't have a duplicate hub name; [HubName("tenantHub")] - that is two or more hub classes decorated with the same name.

Answer 9

In reverse to John,

I had to add a / to the signalr/hubs declaration

ie.

<script src="signalr/hubs" type="text/javascript"></script>

Became

<script src="/signalr/hubs" type="text/javascript"></script>