SignalR in Asp.net MVC 3: hub is undefined - asp.net-mvc-3

Question

I'm a newbie in SignalR. I'm trying to do this Progress Bar example.
I can't download and install the packages via NuGet, cause there is a proxy in my work that denies the access. So I include de DLLs and the scripts in project by myself.
My view code is below:
<h2>#ViewBag.Message</h2>
<input type="button" id="bookButton" value="Book flight" />
<br />
<b>Status:</b> <span id="msg"></span>
<hr />
<input type="button" id="percButton" value="Process pending emails" />
<div id="bar" style="border: #000 1px solid; width: 300px;">
</div>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/gauge-bar.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/json2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.signalr.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/signalr/hubs")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/simple-gauge-bar.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var bookingHub = $.connection.bookingHub;
$("#percButton").click(function () {
bookingHub.processPendingEmails();
});
$("#bookButton").click(function () {
bookingHub.bookFlight("fco", "jfk");
});
bookinghub.updategaugebar = function (perc) {
$("#bar").html(gaugebar.generate(perc));
};
bookinghub.displaymessage = function (message) {
$("#msg").html(message);
};
$.connection.hub.start();
});
</script>
My Hub code:
public class BookingHub : Hub
{
public void Send(String message)
{
// Call the addMessage method on all clients.
Clients.displayMessage(message);
}
public void BookFlight(String from, String to)
{
// Book first leg
Clients.displayMessage(String.Format("Booking flight: {0}-{1} ...", from, to));
Thread.Sleep(2000);
// Book return
Clients.displayMessage(String.Format("Booking flight: {0}-{1} ...", to, from));
Thread.Sleep(3000);
// Book return
Clients.displayMessage(String.Format("Booking flight: {0}-{1} ...", to, from));
Thread.Sleep(2000);
// Some return value
Clients.displayMessage("Flight booked successfully.");
}
public void ProcessPendingEmails()
{
Clients.updateGaugeBar(10);
Thread.Sleep(2000);
Clients.updateGaugeBar(40);
Thread.Sleep(3000);
Clients.updateGaugeBar(64);
Thread.Sleep(2000);
Clients.updateGaugeBar(77);
Thread.Sleep(2000);
Clients.updateGaugeBar(92);
Thread.Sleep(3000);
Clients.updateGaugeBar(99);
Thread.Sleep(2000);
Clients.updateGaugeBar(100);
}
}
When I ran the project, I noticed the bookingHub is undefined, and I've got null reference errors at this point.
What Am I doing wrong to get this error?
Thanks in advance.

Answer 1

Are you missing the attribute,
[HubName("bookingHub")]
on your BookingHub class? e.g.
[HubName("bookingHub")]
public class BookingHub : Hub
{
public void Send(String message)
{
// Call the addMessage method on all clients.
Clients.displayMessage(message);
}
...

Answer 2

Add Global.asax to your web app and add this to global.ajax.cs:
namespace SampleWebApplication
{
public class Global : System.Web.HttpApplication
{
protected void Application_Start(object sender, EventArgs e)
{
RouteTable.Routes.MapHubs();
}
}
}
See https://github.com/SignalR/SignalR/wiki/QuickStart-Hubs