Introduction
In my previous post I made a SignalR server with Quartz.net and a consoleclient.
Now it was time to make a webclient. And that took just a bit longer than expected.
The client
First of all we go and read the documentation on how to do this.
I wish I would follow my advice from time to time.
Then I added an index.html page to my server code (and VS2012 really hated me for that).
then we add our code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>NewCases in Becare</title>
</head>
<body>
<h2 id="title">Waiting for messages</h2>
<p id="datetime"></p>
<p id="numberofcases"></p>
<ul id="messages">
</ul>
<script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.signalR-1.0.0-alpha2.min.js" type="text/javascript"></script>
<script src="signalr/hubs" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var connection = $.hubConnection('http://localhost/');
var proxy = connection.createHubProxy('beCare');
proxy.on('newCases', function (data) {
var d = new Date();
var time = d.toLocaleString();
$('#title').text('New cases');
$('#datetime').text('Last updated: ' + time);
$('#numberofcases').text('Number of cases found: ' + data.length);
$('#messages').empty();
$.each(data, function (i, val) { $('#messages').append('<li>' + val + '</li>'); });
});
connection.start();
});
</script>
</body>
</html>
Some gotchas. I had to give the url for the hubconnection to work. You have to be carefull with all the different syntaxes you might find all over the internet, they just loo similar. For instance $.connection.start(); does not work but might just work in other cases. You can even have a different syntax that should work with hubs too. But for some reason I never got that to work.
The above works just fine with the server I made earlier. Well it does if you are testing with chrome. It did not work if I asked my users to tests it on their browsers which is by default IE in all shapes and sizes. The error you get is.
No JSON parser found. Please ensure json2.js is referenced before the SignalR.js file if you need to support clients without native JSON parsing support, e.g. IE<8.
It might say <ie8 but it didn’t work on my IE9 either.
And of course there is a FAQ for that.
Why doesn’t SignalR work in browser IE6/IE7?
SignalR requires a JSON parser and ability to send xhr requests (for long polling). If your browser has none, you’ll need to include json2.js in your application (SignalR will throw an error telling your you need it as well). You can get it on NuGet.
But I did not read that before implementing this. Oops.
So you nuget json2 and add this line before the signalr script tag.
<script src=“Scripts/json2.min.js” type=“text/javascript”></script>
Conclusion
I should really read the docs before doing this kind of stuff…. nah, it’s much more fun this way.
Chris is awesome.
