2

I am currently trying to use SignalR in a .NET web app. After reviewing numerous posts/articles, I'm still stumped. On page load, I am receiving an error:

Uncaught TypeError: Cannot read property 'client' of undefined

My current implementation is as follows:

BundleConfig.cs:

//note jquery is rendered in a shared bundle in _layout.cshtml. I have
//verified in Chrome debugger it is loaded before the bundles shown here
bundles.Add(new ScriptBundle("~/bundles/signalr").Include(
                  "~/Scripts/jquery.signalR-2.2.3.js"));

bundles.Add(new ScriptBundle("~/bundles/home")
        .Include("~/Scripts/Home/Index.js"));

Bundles rendered in view:

@section scripts {
     @Scripts.Render("~/bundles/signalr")
     @Scripts.Render("~/bundles/home")
}

Startup.cs:

public void Configuration(IAppBuilder app)
{
  app.MapSignalR();
}

DashboardHub.cs:

namespace Sample.SignalR
{
  [HubName("dashboardHub")]
  public class DashboardHub : Hub
  {
    public void sendMessage(string message)
    {
      Clients.All.receiveMessage(notes);
    }
  }
}

Index.js:

$(function () {
    var messageHub = $.connection.dashboardHub;

    //send message to hub so hub updates other clients
    $(document).on("submit", "#messageForm", function () {
        messageHub.server.sendMessage($("#Message").val());
    });

    //receive message
    messageHub.client.receiveMessage= function (message) {  
        $("#Message").empty();
        $("#Message").text(notes);
    }

    $.connection.hub.start();
});

The error is being thrown on page load in the script on line:

messageHub.client.receiveNotesUpdate = function (notes) {

Some things I've checked and double checked:

  • scripts are rendered on the page in the correct order
  • hub names and method names match between client and server (have tried with and without the [HubName("dashboardHub")] annotation)
  • hub class is public

I'm not sure why messageHub is undefined at the point. How can I resolve this?

GregH
  • 5,125
  • 8
  • 55
  • 109

1 Answers1

3

I think you missed to add the autogenerated SignalR Hub Script

<script src="signalr/hubs"></script>

On my case, my signalr hub is on a webapi. I included the domain where my api is:

<script src="somedomainorinstance/signalr/hubs"></script>

Also on your page load, you can add this to see if the connection is being established

$.connection.hub.url = url + "/signalr/hubs";
$.connection.hub.logging = true;
$.connection.hub.start()
    .done(function () { console.log("Signal R connected"); })
    .fail(function () { console.log("Could not Connect to signal R hub!"); });

//I added this to established the connection again in case of a disconnect
$.connection.hub.disconnected(function () {
    setTimeout(function () {
        $.connection.hub.start();
    }, 5000); // Re-start connection after 5 seconds
});

//put the rest of your code here

That's how mine is setup as of now. And it is working nicely.

I hope this helps! Cheers!

Luke Villanueva
  • 2,030
  • 8
  • 44
  • 94
  • 1
    Thanks so much! In case it helps others, if you want to add this file to a bundle, you need to do it something like KTW's answer here: https://stackoverflow.com/questions/11556110/signalr-and-mvc-bundle – GregH Apr 18 '18 at 03:29
  • 1
    Glad to be of help! +1 on the nice reference on bundles. Cheers! – Luke Villanueva Apr 18 '18 at 03:51