Adding a client-side method on the proxy and calling it from the server

The previous recipe taught us how to call a server-side method exposed by a Hub and how to receive its return value, if any. As we already explained in Chapter 2, Using Hubs, SignalR really shines when we have to push information to several connected clients at the same time, and we illustrated the various APIs available to do this. In this recipe, we'll concentrate again on those strategies, and in particular on notifying the caller, but our focus will be on explaining the client-side mechanics involved when receiving server-to-client calls.

How to do it…

We need to prepare our Hub, and to do this we need to perform the following steps:

  1. Add a Hub-derived type that we'll call EchoHub.
  2. Add an OWIN Startup class bootstrapping SignalR with a call to app.MapSignalR(); inside its Configuration() method.

For more details on these steps, you can check the previous chapters.

Then, let's start adding the code for this specific sample by performing the next set of steps:

  1. We first need to edit the server-side EchoHub and make it look like the following code:
     using Microsoft.AspNet.SignalR;
 using Microsoft.AspNet.SignalR.Hubs;

 [HubName("echo")]
 public class EchoHub : Hub
 {
     public void Say(string message)
     {
         Clients.Caller.greetings(message);
     }
 }

    The content is trivial and similar to many samples that we saw in Chapter 2, Using Hubs. Our Say() method is just pushing the supplied message parameter back to the caller. We could have pushed it to any of the several connection sets available, which we saw earlier. If you want to change this particular aspect of this recipe, please go back to Chapter 2, Using Hubs, for some inspiration.

    The highlighted portion of the preceding code is the invocation of the greetings() method. We already saw in Chapter 2, Using Hubs, how such a method call is dynamically resolved.

  2. Let's move to the client portion. To do this, we need to add an HTML page that we'll call index.html.
  3. We add the usual JavaScript references as follows:
    <script src="Scripts/jquery-2.1.0.js"></script>
<script src="Scripts/jquery.signalR-2.0.2.js"></script>
<script src="/signalr/hubs"></script>
  4. Now, let's proceed step by step with the real code. We start by adding an empty script block as follows:
    <script>
...
</script>
  5. As usual, we add a jQuery document ready call inside this block (using the shorthand version) as follows:
    $(function() {
...
});
  6. Inside the document ready call, we take a reference to both the hub object and the echo Hub proxy, whose roles have been already explained in the previous recipe. This is shown in the following code:
    var hub  = $.connection.hub;
var echo = $.connection.echo;
  7. This is where we start differentiating from the previous recipe. Here we use the client member of the echo object to dynamically add a greetings() function expecting one parameter, as shown in the following code:
    echo.client.greetings = function(message) {
    $('#message').html(message);
};

    This signature corresponds to that of the method invoked from inside the Hub method on the Clients.Caller member, as illustrated in step 1. SignalR will wire this definition when the connection starts, and it will be able to match it to the corresponding server-side call so that the invocation from inside the Hub method triggers a call to the client. The received argument will have the same value as the value that is used during the server-side invocation.

    All these callback definitions must be added to the client member. It's interesting to note that while these definitions go all together inside this specific member of the proxy, the corresponding server-side invocations can be triggered from any of the several Clients members, such as Caller or Others; each one of them corresponds to a different set of connected clients as explained in Chapter 2, Using Hubs.

    The actual body of the client-side function is not very important. It just uses jQuery to find a specific DOM element that is filled with the value carried by message.

  8. We are ready to connect using the following line of code:
    var started = hub.start();

    The start() call returns a JavaScript promise object that we'll use to set up a function to be called back when the connection is ready. It's this call that wires our client-side greetings() function so that the server-side call matches it.

  9. Let's fill the callback that we mentioned in the previous step with the following code:
    started.done(function() {
    echo.server.say("hello!");
});

    The done() method and the server member have already been explained in the previous recipe. What is going on here is just a simple call to the server-side Say() method and performed inside the done() callback. We ensure that it's triggered when the connection startup has been completed successfully. The Say() method will be called on the server, and from there the greetings() invocation will go back to the calling client.

Again, we wrote some pretty verbose code to illustrate these steps. The exercise of making it simpler and more synthetic is left to you!

If we now visit the index.html page, we will see a hello! message printed on the page as a result of a process where the following actions were performed:

  1. We wait for the page to be loaded.
  2. We asynchronously connect to the server.
  3. We wait until the connection is ready (first done() callback).
  4. We asynchronously perform a remote method call.
  5. From inside the server-side method, we push back a value to the caller (Clients.Caller member).
  6. We receive the message value inside the greetings() method that we added to the echo.client member and print it.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset