Eric lippert - Amazon Web Services

Connecting to the Hub
We can try this out in the same application as we have the server
running, by adding a new HTML page for adding and displaying
customers. Add a file called Client.html and add the following to
the header section to include the SignalR generated JavaScript,
jQuery and the SignalR common JavaScript:
The actual form will look very simple, it will only have two fields
and two buttons like you can see below in figure 5
myHub.server.all().done(function (result) {
var resultDiv = $(“#result”);
resultDiv.html(“”);
resultDiv.append(“”);
$(result).each(function (index, item) {
resultDiv.append(“(“+item.Id+”) “+ item.Name +
””);
});
resultDiv.append(“”);
})
});
This hooks up a click handler to the refresh button and if we have
any elements in the customer array, it will be displayed nicely on
the page. In order to test that, we need to add some elements. This
can be done in an equal manner by running the add() method we
created before and passing it a JSON object like this:
The HTML itself is equally simple:
Id:
Name:
$(“#add”).click(function () {
myHub.server.add({ id: $(“#id”).val(), name: $(“#name”).
val() });
});
Last but not least, we can initiate the connection to the server:
$.connection.hub.start();
Run this and ‘Add’ some names and click on Refresh. This will give
us an archaic looking list as we can see in Figure 6.
When the document has finished loading, we want to hook up
SignalR and perform some magic. First we get a reference to
myHubServer through the $.connection object like this:
var myHub = $.connection.myHubServer;
We can then use myHub to send and receive messages from the
server. For instance, in order to call all() we simply do this:
myHub.server.all();
There’s a common pattern here so we can append the method
done() after our calls, meaning that once all is finished, we can
execute a method with the result data. To do this and then add a
new list with the items returned from the server to the page, we
can simply do the following:
$(“#refresh”).click(function () {
Notice what happens if you open up a new tab in your browser,
navigate to the same html file and hit refresh, you’ll get a list of
all the names! Aside from the network latency and other factors,
this is so far a one-way-push-real-time network application!
What about if we want to notify the clients once a new customer
has been added and refresh automatically We could do this quite
easily. Let’s start off by adding an event handler on the client side
called refreshCustomers like this:
myHub.client.refreshCustomers = function (result) {
// Same code here as refresh click handler
};
DNcmagazine www.dotnetcurry.com | 19