Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SignalR $.connection is undefined

I admit it, I don't know what I'm doing.

I'm attempting to learn how to use SignalR and I'm following various samples online almost verbatim and I can't get pasted $.connection being undefined. I'm working in MVC 4.0 and trying to use either nuget-downloaded signalR js files or those from sample projects. These are my script references.

@Scripts.Render("~/Scripts/jquery-1.7.2.min.js") @Scripts.Render("~/Scripts/knockout-2.0.0.js") @Scripts.Render("~/Scripts/jquery.signalR.js") @Scripts.Render("~/signalr/hubs") 

The scripts seem to load - I've even put alerts at the start of them which fire, but $.connection is always undefined.

In a bizarre turn of events, I have a different project where I'm trying to use a different jQuery library and it uses $. and that object is ALSO always undefined.

I'm just looking for any possible explanation of what I might be doing wrong. Thanks very much in advance.

like image 518
Danny Ellis Jr. Avatar asked Jun 26 '12 00:06

Danny Ellis Jr.


People also ask

What is SignalR connection?

SignalR handles connection management automatically, and lets you broadcast messages to all connected clients simultaneously, like a chat room. You can also send messages to specific clients.

Does SignalR keep connection alive?

You can handle this event if you want your application to take some action when a transport connection is lost. The default keepalive timeout period is currently 20 seconds. If your client code tries to call a Hub method while SignalR is in reconnecting mode, SignalR will try to send the command.

What is SignalR in JavaScript?

Introduction. The SignalR automatically creates the JavaScript proxy script, which helps us to create the SignalR client in JavaScript, but sometimes we don't want to use the proxy script or we are not able to use the proxy script.


1 Answers

I got the same problem today.

Your answer pointed me in the right direction, because I had the EXACT same setup for script loading.

I had all my script tags on the top of the page (head) in the following order.

  • JQuery
  • SignalR
  • /signalr/hubs
  • my-script.js

And of course, the @Layout.cshtml was so thoughtful to add @Scripts.Render("~/bundles/jquery") at the bottom of the <body> tag.

Here's what's happening.

In this configuration, when the page loads, it loads up all the scripts in the head tag, in the order they're specified.

so it loads JQuery, then SignalR, which setup $.connection then the auto-generated hubs script which sets up the $.connection.hubName,then the site's custom script.

At this point your custom code runs. BUT your code at some point, waits for the body.onload or document.onReady before accessing the $.connection

By the time this event fires, the script bundle which the Layout template added for you at the end of body tag also downloads and executes. This bundle has the jquery library again.... which resets everything SignalR setup on $ and now your $.connection is not defined anymore.

How to Solve It

Easy fix, make sure you don't load JQuery twice, once before SignalR and once after SignalR. I moved all my scripts to load after the bundle and it fixed the issue. Best practice here is to use the 'scripts' section provided by the template.

@section scripts{     @*/* load your scripts here. You can exclude jQuery,        coz it's already in the template */ *@ } 

So this is not a SignalR error at all...

That's 2 hours of my life... I'll never get back ...

Hope This Helps.

like image 102
Madushan Avatar answered Sep 22 '22 12:09

Madushan