Cannot read property "client" of undefined using SignalR
I've been working on this all day with no luck. I've also tried (almost) every SO question, but I didn't get it to work ...
I am running a web api with a very simple SignalR signaling message and separately a simple interface to show this push message. In my case, the push message keeps changing the number.
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test app</title>
<script src="scripts/jquery-2.1.4.js"></script>
<script src="scripts/jquery.signalR-2.2.0.js"></script>
<script src="/signalr/hubs"></script>
</head>
<body>
<div id="testElm">TEST: </div>
<script type="text/javascript">
$(document).ready(function () {
$.connection.hub.url = "http://localhost:55833/signalr";
var hub = $.connection.displayHub;
hub.client.pushMessage = function (response) {
$('#testElm').text(response);
};
$.connection.hub.start();
});
</script>
</body>
</html>
my class hub
public class DisplayHub : Hub
{
public DisplayHub() : this(GlobalHost.ConnectionManager.GetHubContext<DisplayHub>().Clients) { }
public DisplayHub(IHubConnectionContext<dynamic> clients)
{
}
public void PushMessage(string message)
{
// generate random number and send it every 1s for testing
Clients.All.pushMessage(randomNumber);
}
}
When working with
$.connection.hub.logging = true;
this is the log I receive
2015-06-15 16:44:15 GMT+0100 (GMT Daylight Time)] SignalR: Auto detected cross domain url.
2015-06-15 16:44:15.314 jquery.signalR-2.2.0.js:81 [16:44:15 GMT+0100 (GMT Daylight Time)] SignalR: Negotiating with 'http://localhost:55833/signalr/negotiate?clientProtocol=1.5'.
2015-06-15 16:44:15.434 jquery.signalR-2.2.0.js:81 [16:44:15 GMT+0100 (GMT Daylight Time)] SignalR: webSockets transport starting.
2015-06-15 16:44:15.435 jquery.signalR-2.2.0.js:81 [16:44:15 GMT+0100 (GMT Daylight Time)] SignalR: Connecting to websocket endpoint 'ws://localhost:55833/signalr/connect?transport=webSockets&clientProtocol=1.5&connectionToken=h7UAGOrF6RP8JUE%2F82K84E8NSZOd8jsuijsCQ2Jyh1jRi7zXmIpoVnIP9tjEjlcWvxihtZBNt6BYdaAW2jp574B5nXS%2BJFEW%2F%2BdixsiV0yu3YwaN5ERh6yhYtkvztQSQ&tid=5'.
2015-06-15 16:44:15.451 jquery.signalR-2.2.0.js:81 [16:44:15 GMT+0100 (GMT Daylight Time)] SignalR: Websocket opened.
2015-06-15 16:44:15.510 jquery.signalR-2.2.0.js:81 [16:44:15 GMT+0100 (GMT Daylight Time)] SignalR: webSockets transport connected. Initiating start request.
2015-06-15 16:44:15.518 jquery.signalR-2.2.0.js:81 [16:44:15 GMT+0100 (GMT Daylight Time)] SignalR: The start request succeeded. Transitioning to the connected state.
2015-06-15 16:44:15.518 jquery.signalR-2.2.0.js:81 [16:44:15 GMT+0100 (GMT Daylight Time)] SignalR: Now monitoring keep alive with a warning timeout of 13333.333333333332, keep alive timeout of 20000 and disconnecting timeout of 30000
and i keep getting
Cannot read property 'client' of undefined
- checking "hub" shows hub undefined ...
- browsing http: // localhost: 55833 / signalr / hubs I can see the hub on the server I am creating.
- temporarily merging the API and the front end, everything will work fine, but if I save them separately, I get the above error ...
- using the [HubName ("displayHub")] attribute is irrelevant.
- CORS is configured correctly according to the log above
Any ideas what is causing the error? Is there a way I can debug signalR further to see what's going on?
Update 1:
after reading ASP.NET SignalR Hubs API Guide - JavaScript at http://www.asp.net/signalr/overview/guide-to-the-api/hubs-api-guide-javascript-client I changed my code to match without the generated proxy paragraph:
var conn = $.hubConnection("http://localhost:55833/signalr");
var hubProxy = conn.createHubProxy('displayHub');
hubProxy.on('pushMessage', function (response) {
$('#testElm').text(response);
});
conn.start();
and it started working ... Can someone explain why?
source to share
From your question, I understand you have 2 different client and server applications and you are using CORS. The reason your first attempt didn't work is because you didn't target the dynamic endpoint to the target server application. You should have changed this:
<script src="/signalr/hubs"></script>
in it:
<script src="http://localhost:55833/signalr/hubs"></script>
The reason is that the endpoint dynamically generates Javascript code representing the shape of your hubs, so it needs to be called in the application where the hubs are, hence the server.
source to share