Amazon Ad

Thursday 6 June 2013

ASP.NET SignalR, $.connection.chatHub is undefined

Hi Folks,

I was working with SignalR and was not able to run the program due the error $.connection.chatHub is undefined, i.e my Hub object was undefined in javascript. Here is how i was able to solve the problem :

I am assuming that you already have got all the files from NuGet command prompt for VS2010 or Have installed aspnetcomponents for VS2012.

If not for VS 2010

Go to nuget command and type

PM> Install-Package Microsoft.AspNet.SignalR -pre

For VS2012

Download the asp.net components installer for VS2012 to get the SignalR template.

Please go step by step

Step 1. Check global.asax file, Make sure you have

<%@ Import Namespace="Microsoft.AspNet.SignalR" %>

<%@ Import Namespace="Microsoft.AspNet.SignalR.Hosting" %>

void Application_Start(object sender, EventArgs e)
 {

        // Code that runs on application startup
        RouteTable.Routes.MapHubs();
 
}

Step 2. Check the javascript files, The problem might be the old version of javascript files. Please make sure you have
<script src="js/jquery1.8.js" type="text/javascript"></script>
<script src="js/json2.js" type="text/javascript"></script>
<script src="js/jquery.signalR-1.1.2.min.js" type="text/javascript"></script>
<script src='<%: ResolveClientUrl("~/signalr/hubs") %>' type="text/javascript"></script>

make sure that its not <%= ResolveClientUrl("~/signalr/hubs") %> it should be <%: ResolveClientUrl("~/signalr/hubs") %> in the src of the script tag
referencing javascript.

Step 3. Make sure that the Hub class is in App_Code folder, For ex. here the Hub class (i.e ChatHub class) is defined as

using System;

using System.Collections.Generic;

using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using System.Collections.Concurrent;
using System.Threading.Tasks;
using Microsoft.AspNet.SignalR.Hubs;

public class ChatHub : Hub

{

    public override Task OnConnected()
    {
        return base.OnConnected();
    }

    public override System.Threading.Tasks.Task OnDisconnected()
    {
        return base.OnDisconnected();
    }

 

   public void Send(string message)
 
   {
     
Clients.All.broadcastMessage(message);
   }

    public void Send(string message, string ConnectionId)
    {
        Clients.Client(ConnectionId).addMessage(message);
    }


}

Step 4: In my aspx page my SignalR code is
   <body>
    <script src="js/jquery1.8.js" type="text/javascript"></script>
    <script src="js/json2.js" type="text/javascript"></script>
    <script src="js/jquery.signalR-1.1.2.min.js" type="text/javascript"></script>
    <script src='<%: ResolveClientUrl("~/signalr/hubs") %>' type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
        var chat = $.connection.chatHub;
        $.connection.hub.start().done(function () {
            alert('Connected');
            //Send Data to Hub Class
            chat.server.send("Welcome to SignalR, SignalR Demo Message From Client");
        });
        //To get the server message broadcasted
       chat.client.addMessage = function (message) {
           alert('Message from server '+message);
       });
   </script>
</body>
And here you go, Run the program and the error would be resolved. Still in case you are getting any problem/error please revert back.

For MVC4

Do the Following :

Step 1. Your Global.asax file should look like

            RouteTable.Routes.MapHubs(new HubConfiguration { EnableCrossDomain = true });
            BundleConfig.RegisterBundles(BundleTable.Bundles);
            RouteConfig.RegisterRoutes(RouteTable.Routes);

i.e RouteTable.Routes.MapHubs(new HubConfiguration { EnableCrossDomain = true }); line should be there before, BundleConfig and RouteConfig.

Step 2. In _Layout.cshtml, After meta tag your code should look like

       @Styles.Render("/Content/css")
        @Scripts.Render("/bundles/modernizr")
        @*@Scripts.Render("/Scripts/jquery-1.8.2.min.js")*@
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("/Scripts/jquery.signalR-1.1.2.min.js")
        @Scripts.Render("/signalr/hubs")
        <script type="text/javascript">
            $(document).ready(function ()
            {
                var chatHubClient = $.connection.chatHub;
                alert(chatHubClient);
                $.connection.chatHub.start(function () {
                    chatHubClient.join('TEST');
                });
            });
        </script>

Please note that i have commented the jquery-1.8.2.min.js as MVC jquery bundle would fulfill the jquery package requirement.

Step 3. Create your Hub Class, Please make sure that its NOT in App_Code folder, otherwise you would receive the error "An item with the same key has already been added.".

Follow these simple steps and you will be able to run the SignalR code in MVC4.


Thanks
Ritesh Tandon

10 comments:

Arivazhagan said...

Hi! I am arivazhagan I have follow all the above steps, It will works only Localhost. if i configure
IIS it get error (Chat is undefined)

var chat = $.connection.chatHub;
chat.client.sendMessage = function (message, name) {
//code..
}

Please help me..

Thanks in Advance...

Ritesh said...

Please send your code so that i can do the needful.

Arivazhagan said...

I have a problem with iis6...

is it possible iis6 + windos2003 + VS10(Service pack1)+SignalR

Ritesh said...

Please post your code.

guru said...

Hi,

I am trying to add signalr functionaltiy in my asp.net web application for the group chat option.I have created hub class inheriting Hub,refered all the jquery references,added '<%:ResolveClientUrl("~/signalr/hubs")%>'.still getting the error saying that error loading Hubs,please check the hub reference is correct.what is the problem?please help me..I am using vs 2010 sp1 and content page for the group chat embedded in master page

Ritesh said...

Please provide your complete code so that the needful can be done.

Unknown said...

Thank you, Ritesh Tandon. You saved my day.

Ritesh said...

Glad it helped victor. Thanks.

Unknown said...

Shall i post my code???

Anonymous said...
This comment has been removed by the author.

Post a Comment

Comments are welcome, Please join me on my Linked In account

http://in.linkedin.com/pub/ritesh-tandon/21/644/33b

How to implement Captcha v3 in ASP.NET

 I was facing an issue of dom parsing in my website. I finally resolved it by using Google Captcha V3. Step 1: Get your keys from https:...