SignalR not working in website but works in web application

Question

I followed this simple tutorial and managed to create a test web application with signalR. But when I tried to recreate it using ASP.NET website and then browse for the html page, I got the following error:

TypeError: $.connection is undefined
var chat = $.connection.chatHub;

This is the structure of my project if this matters:

Based on what I found, setting runAllManagedModulesForAllRequests to true in web.config is necessary, so I already did it. Also the tutorial I followed is a little bit outdated since I use VS 2010(ie .NET Framework 4) which is only compatible with SignalR v 1.1.3.

How come I can't get this working in a website but works perfectly in a web application?

Update:

One solution (which I believe to be right) suggests to

Put my code behind file in a seperate .cs file and put that cs file in App_Code folder

So I tried to change my html file into a .aspx file. This way I have a code behind file (ie .aspx.cs) But I'm confused on what it is meant to move the code behind file because nesting my .aspx file to a .aspx.cs file residing in App_Code folder is not allowed.

What does that quoted answer above means?

Update:

Here are my script references in HTMLPage.htm together with the main function.

<!--Reference the jQuery library. -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--Reference the SignalR library. -->
<script src="/Scripts/jquery.signalR-1.1.3.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="/signalr/hubs"></script>
<!--Add script to update the page and send messages.--> 
<script type="text/javascript">
    $(function () {
        // Declare a proxy to reference the hub. 
        var chat = $.connection.chatHub;
        // Create a function that the hub can call to broadcast messages.
        chat.client.broadcastMessage = function (name, message) {
            // Html encode display name and message. 
            var encodedName = $('<div />').text(name).html();
            var encodedMsg = $('<div />').text(message).html();
            // Add the message to the page. 
            $('#discussion').append('<li><strong>' + encodedName
                + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
        };
        // Get the user name and store it to prepend to messages.
        $('#displayname').val(prompt('Enter your name:', ''));
        // Set initial focus to message input box.  
        $('#message').focus();
        // Start the connection.
        $.connection.hub.start().done(function () {
            $('#sendmessage').click(function () {
                // Call the Send method on the hub. 
                chat.server.send($('#displayname').val(), $('#message').val());
                // Clear text box and reset focus for next comment. 
                $('#message').val('').focus();
            });
        });
    });
</script>

Answer 1

You should always check the console when something doesn't work - in your case, the page simply can't find the references to the SignalR script and to /signalr/hubs (and it says so in the console). If you change the urls to "/WebSite18/Scripts/jquery.signalR-1.1.3.js" and "/Website18/signalr/hubs", it will work.