Invoking server method from client using SignalR

In this series I will show you people to how to invoke a method defined in the server side code from javascript and then invoke a method in the client side to show the message returned by the server code. In the earlier post, I have explained in detail the various the steps needed to incorporate SignalR in your project and you read that here if you want to recollect it.

First, let’s implement the view, server method invocation and the callback method that needs to be fired from the server which will show the message sent from the server in the view.

var clientRequest = $.connection.clientRequestHub;

$.connection.hub.start().done(function () {
     clientRequest.server.requestFromClient("Hello Server !!!!");
});

The above code will call the RequestFromClient method defined in the server and pass a string as the input parameter to the function. You will notice that the casing in different in code snippet because SignalR is following the Convention over implementation guidelines. 

Now we will define the callback method which will update the UI based on the info send by the server code.

clientRequest.client.clientRequestCallback = function (message) {
      $("#clientRequest").prepend('<li><strong>' + message + '</strong></li>')
};

And here’s the cshtml code in full

    <div id="clientRequest">
    
    </div>
    <script>
        $(function () {
            var clientRequest = $.connection.clientRequestHub;
            clientRequest.client.clientRequestCallback = function (message) {
                $("#clientRequest").prepend('<li><strong>' + message + '</strong></li>')
            };

            $.connection.hub.start().done(function () {
                clientRequest.server.requestFromClient("Hello Server !!!!");
            });
        });
    </script> H

Let’s see what we have in the server code. As explained in earlier post, the class inherited from the Hub class acts as the server and it’s the one responsible for handling all the requests from the clients connected to the hub. The method will get the string sent from the client and then appends the server response to that and then invokes the callback method to show it in the UI. Here, notice that I am using Clients.Caller method to despatch the message which makes sure that the calling client will only get the response and not all the clients connected to the server.

namespace SignalRIntro.Business
{
    public class ClientRequestHub : Hub
    {

        public void RequestFromClient(string msg)
        {
            for (int i = 0; i < 50; i++)
            {
                Clients.Caller.ClientRequestCallback("Message " + (i+1).ToString() +" -> <span style='color:green'>" + msg + "</span><br/><span style='color:red'>Server Response at " + DateTime.Now.ToString() + "</span><br>");
                Thread.Sleep(10000);
            }
        }
    }
}

Now hit F5 to run the project in the default browser and after some time open the same url in another browser and you can see that the each client is showing the message differently.