CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcsignalrsignalr-hub
Robert Ross
Robert Ross

Reputation: 1189

Cannot read property 'counterHub' of undefined

I am trying to make a simple user counter with SignalR, but for unknown reasons to me I am getting this error in the console. I am very new to signalR and asp.net, but what I have make sense to me, and I don't know why am I getting the error. Can somebody please help me solve this and possibly explain why it is happening?

Here is the code in the Index view.

<div class="row">
Number of online users <strong id="counter"></strong>
<script src="@Url.Content("~/Scripts/jquery-3.1.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.signalR-2.2.1.min.js")"></script>
<script src="@Url.Content("~/signalr/hubs")"></script>

<script>
    $(function () {
        var counterHub = $.connection.counterHub;
        $.connection.hub.start().done(function () {

        });
        counterHub.client.UpdateCount = function (count) {
            $("#counter").text(count);
        }
    });

</script>

The hub class : 

public class CounterHub : Hub
{
    static long counter = 0;
    public override System.Threading.Tasks.Task OnConnected()
    {
        counter = counter + 1;
        Clients.All.UpdateCount(counter);
        return base.OnConnected();
    }

    public override System.Threading.Tasks.Task OnDisconnected(bool stopCalled)
    {
        counter = counter - 1;
        Clients.All.UpdateCount(counter);
        return base.OnDisconnected(stopCalled);
    }

    //public void Hello()
    //{
    //    Clients.All.hello();
    //}
}

And the Startup.cs : 

public partial class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();

            ConfigureAuth(app);

        }
    }

Upvotes: 3

Views: 892

Answers (2)

Robert Ross
Robert Ross

Reputation: 1189

Not sure why, but this made it work for me finally. I just surrounded the script tags with @section scripts : 

    @section scripts{
    <script src="~/Scripts/jquery.signalR-2.2.1.min.js"></script>

<script src="~/signalr/hubs"></script>
<script>
        $(function () {
            var myHub = $.connection.counterHub;
            $.connection.hub.start().done(function () {

            });
            myHub.client.UpdateCount = function (count) {
                $("#counter").text(count);
            }
        });

</script>
    }

Upvotes: 1

Farzin Kanzi
Farzin Kanzi

Reputation: 3435

Is your chat files in the root of application?

The only thing that I think is your page has not connected to Hub proxy javascript file:

ASP.NET SignalR JavaScript Library v1.0.0

This file has some methods to connect to hub, consists:

$.hubConnection.prototype.createHubProxies = function () {
    var proxies = {};
    this.starting(function () {
        // Register the hub proxies as subscribed
        // (instance, shouldSubscribe)
        registerHubProxies(proxies, true);

        this._registerSubscribedHubs(); .......

That lack of this method caused your error:

Cannot read property 'counterHub' of undefined

Because it can not connect to hob and create objec named counterHub.

So please test this: After loading your application in another tab of your browser test this url:

Your-App-Url/signalr/hubs

That in local host is some thing like this:

http://localhost:53398/signalr/hubs

And see if you get the javascript file or not. If not I suggest you to start another project(If it is test).

Upvotes: 0

Related Questions