$.connections can not read the hub of undefined (SignalR)

Question

I will try to send data to the server whit SignalR 2. But I get this error:

Uncaught TypeError: Cannot read property 'meldingenHub' of undefined

Here is the C# code on the server:

public class MeldingenHub : Hub
{
    public void Meld(string blogitem, string verdiendePunten)
    {
        Clients.All.BroadcastMessage(blogitem, verdiendePunten);
    }
}

Here I include all the file that is needed:

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.1.2.min.js"></script>
<script src="~/signalr/hubs"></script>

Here is the Client code that gives the error on the bold code.

var medlingenHub = $.connection.meldingenHub;

medlingenHub.client.broadcastMessage = function (blogitem, verdiendePunten) {
    $("#verdiendepunten").html(verdiendePunten);
};

$.connection.hub.start().done(function () {

    var json = {
        ID: parseInt(this.dataset.id),
        Type: this.dataset.type,
        GebruikerID: "@(Model.DeBlog.Gebruiker.Id)",
        Punten: parseInt(this.dataset.punten),
        GestemdeGebruikerID: "@(Model.AangemeldeGebruiker)"
    };

    $.ajax({
        url: "../api/Stem/[email protected]",
        type: "PUT",
        data: json,
        success: function (returnData) {

            if (returnData.Oke == false) {

                toonError(returnData)
            }
            else {

                plaatsKleuren(returnData);
                medlingenHub.server.meld(data.ID, data.Punten);
            }
        }
    });
});

Note by the code above: the code executes when I click on a button.

I've also added this line on the Startup.Auth.cs file:

public void ConfigureAuth(IAppBuilder app)
{
    app.MapSignalR();
    // other code
}

I follow a tutorial on asp.net. Can anyone help me?

@SirwanAfifi Unless you want the hub name to differ from the class you shouldn't use the HubName attribute. This has been known to cause issues for some, including messing up the signalr/hubs.js file. — Corey
Have you checked to see that there are no errors at the client side when opening the page? Check for 404 errors in the client's network trace (F12 to open dev tools on Chrome, Firefox or IE). Use the console in the dev tools to see if $.connection is defined and has the hub member defined as well. — Corey

H. Pauwelyn H. Pauwelyn · Accepted Answer · 2015-12-05T11:48:49

I've found it. I was working with a wrong scope of the $.connection. Here is my complete code I've made:

var punten = document.getElementsByClassName("punten-do-ajax");
var aantal = punten.length;

var conn = $.connection;

for (var i = 0; i < aantal; i++) {

    punten[i].addEventListener("click", function () {

        @if (Model.DeBlog.StemmenToegelaten)
        {
            <text>
            votes(conn, this);
            </text>
        }
    });
}

function votes(conn, sender) {
    var medlingenHub = conn.meldingenHub;

    medlingenHub.client.broadcastMessage = function (blogitem, verdiendePunten) {
        $("#verdiendepunten").html(verdiendePunten);
    };

    conn.hub.start().done(function () {

        var json = {
            ID: parseInt(sender.dataset.id),
            Type: sender.dataset.type,
            GebruikerID: "@(Model.DeBlog.Gebruiker.Id)",
            Punten: parseInt(sender.dataset.punten),
            GestemdeGebruikerID: "@(Model.AangemeldeGebruiker)"
        };

        $.ajax({
            url: "../api/Stem/[email protected]",
            type: "PUT",
            data: json,
            success: function (returnData) {

                if (returnData.Oke == false) {

                    toonError(returnData)
                }
                else {

                    plaatsKleuren(returnData);
                    medlingenHub.server.meld(returnData.ID, returnData.Punten);
                }
            }
        });
    });
}

$.connections can not read the hub of undefined (SignalR)

1 Answers