[#SIGNALR] Error: Html client does not raise OnConnected() method on Server Hub

Hola!

And nor more SignalR stuff. Today is an issue, a tricky one. When in an HTML app the signalR html client does not raise the OnConnected() event on the hub. Sometime ago I wrote a post with a patter to deliver different set of messages to different groups of clients in the same hub..

Inside this code, the main approach is to add some work in the OnConnected(). And at this point this event became more important, because is the first contact of a client with the hub. If you think in the Hub code, can be something like this.

	public override System.Threading.Tasks.Task OnConnected()
	{
	// some weird stuff here
	return base.OnConnected();
	}
	public void JoinToArea(string area)
	{
	Groups.Add(Context.ConnectionId, area);
	}

view raw

ElBrunoSignalRHtmlClientOnConnectedOnHubI

hosted with ❤ by GitHub

So in the other side, we can create a very simple Html app. This app will connect to the hub and when the connection is established, it will call the JoinToArea() function

	<script type="text/javascript">
	var hub;
	$(window).ready(function () {
	console.log("windows ready para SignalR");
	hub = $.connection.SampleHub;
	$.connection.hub.start().done(
	function () {
	var area = 'default';
	console.log("hub started, area:" + area);
	hub.server.JoinToArea(area);
	});
	});
	</script>

view raw

ElBrunoSignalRHtmlClientOnConnectedOnHubII

hosted with ❤ by GitHub

So far the code is good. But if you add some trace and debug you’ll see that, even if the call goes fine to the JoinToArea() function in the hub, it never get registered in the OnConnected() event hub. The main issue is because the client is never initialized in the page.

So, to fix this, let´s call a dummy function before we invoke the JoinToArea(). Line 7 and it’s done

	<script type="text/javascript">
	var hub;
	$(window).ready(function () {
	console.log("windows ready para SignalR");
	hub = $.connection.SampleHub;
	// dummy call to force the [OnConnected()] method on signalR hub
	hub.client.foo = function () { };
	$.connection.hub.start().done(
	function () {
	var area = 'default';
	console.log("hub started, area:" + area);
	hub.server.JoinToArea(area);
	});
	});
	</script>