Post
Ask Question

ASP.NET SignalR: FAQs on SignalR Script Exceptions

Introduction

ASP.NET SignalR is quite new and a very exciting feature in ASP.NET. You might want to play around with it and may encounter some hiccups during your implementation. This article will cover some issues that you may encounter and how to avoid it.

The Scenario

If you have declared the following scripts in your View (.cshtml/.aspx):

  1. <script src="~/Scripts/jquery.signalR-1.0.1.min.js"></script>  
  2. <script src="/signalr/hubs" type="text/javascript"></script>  
  3. <script type="text/javascript">  
  4.      $(function () {  
  5.          var chat = $.connection.yourHub;  
  6.      });  
  7. </script>  
And run the page you will end up getting the following error below:

Exception 1: 0x800a139e - JavaScript runtime error: SignalR: jQuery not found. Please ensure jQuery is referenced before the SignalR.js file.

Why? Well the error above is pretty logical. It  simply means that the jQuery script should be added before the SignalR script.

Now most likely you will then go ahead and add a reference to jQuery at the very top before you reference any scripts. So your updated script reference order will now be:
  1. <script src="~/Scripts/jquery-1.8.2.min.js"></script>   
  2. <script src="~/Scripts/jquery.signalR-1.0.1.min.js"></script>   
  3. <script src="/signalr/hubs" type="text/javascript"></script>   
  4. <script type="text/javascript">   
  5.   $(function () {   
  6. var chat = $.connection.yourHub;   
  7. });   
  8. </script>  
Running the page again will give you the exception below:

Exception 2: JavaScript runtime error: Unable to get property 'yourHub' of undefined or null reference JavaScript runtime error: Unable to get property 'yourHub' of undefined or null reference

Heck, why is that? Here's the thing. If you look at the _Layout.cshtml file you will see that the default template in MVC 4.5 has added the bundling below for jQuery scripts at the bottom before the closing tag of the <body> element.

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

So in this case when the page loads up it will give you this script reference order: 
  • jQuery script
  • SignalR script
  • /signalr/hubs
  • your custom defined script
  • jQuery script

If you noticed the reference to jQuery gets duplicated which causes the exception above.

To avoid that exception you must remove the reference to your jQuery in your View (.cshtml/.aspx) because has already bundled it for you for page performance/optimization. And instead you can put all your remaining scripts within the scripts section defined in @RenderSection. So the code will be like this:

  1. @section scripts{   
  2.      @Scripts.Render("~/Scripts/jquery.signalR-1.0.1.min.js")   
  3.      @Scripts.Render("/signalr/hubs")   
  4.      <script type="text/javascript">   
  5.          $(function () {   
  6.              var chat = $.connection.yourHub;   
  7.          });   
  8.     </script>   
  9. }   
And finally, make sure that you have defined this line below in your Global.asax.cs within the Application_Start() event to avoid exception 3:

RouteTable.Routes.MapHubs();

Note

Make sure that MapHubs() is called before RegisterRoutes() in your Application_Start event.

Exception 3: 0x800a138f - JavaScript runtime error: Unable to get property 'client' of undefined or null reference0x800a138f - JavaScript runtime error: Unable to get property 'client' of undefined or null reference

That's it! I hope someone finds this post useful.


Similar Articles