SignalR hub communication without using proxy and cross-domain communication

In my previous posts on SignalR, I was using the auto generated proxy script /signalr/hubs to connect and communicate with the server. Doing so, we are asking the client browser to download an additional script. If the hub consists of a number of methods or if there are multiple hubs defined on the server side, the script file will be bulky. Also, it is may not be possible to compress and minify the script file as it is generated dynamically. In this post, we will discuss about communication with hub without using the proxy script file.

The following listing shows connecting, creating proxy, calling a server function and handling callback.

Establishing connection with the server:

var connection = $.hubConnection();

Creating a proxy object of the Hub class on the server:

var proxy = connection.createHubProxy(‘hub-name’)

Starting the hub:

connection.start();

Invoking a server function:

proxy.invoke(‘function-name’);

Handling callback:

proxy.on(‘callback-name’,function(arg1, arg2, …){
 //function body
});

In my previous post, I created a small market application that modifies and displays prices of gold and silver. Let’s add another client page to that application. In this page, we will communicate with server without using the proxy script.

If you haven’t downloaded the code yet, download it now and run it on your PC.

Add a new HTML page to this application. Copy the references of script files (except the reference of /signalr/hubs script) and the mark-up inside the body tag from the GoldSilverPrices.html page into this page.


Handle jQuery’s ready event and initialize the variables and objects as shown:

$(function(){
var up = '▲';
var down = '▼';
var goldPriceSpan = $("#goldPrice");
var silverPriceSpan = $("#silverPrice");
var goldPriceHtml;
var silverPriceHtml;
var gsPrices = new Array();

gsPrices[0] = 0;
gsPrices[1] = 0;
});

Establish connection to the hub:

var connection = $.hubConnection();

Create the proxy object:

var proxy = connection.createHubProxy('priceHub');

Start the connection and invoke the getPrices function once the connection starts:

connection.start().done(function () {
 proxy.invoke('getPrices');
});

Handle the callback function using proxy.on:

proxy.on("populatePrices", function (prices) {
    if (gsPrices[0] != 0 && gsPrices[1] != 0) {
        if (gsPrices[0] < prices[0]) {
            goldPriceHtml = prices[0] + " " + up;
            goldPriceSpan.css("color", "green");
        }
        else if (gsPrices[0] > prices[0]) {
            goldPriceHtml = prices[0] + " " + down;
            goldPriceSpan.css("color", "red");
        }

        if (gsPrices[1] < prices[1]) {
            silverPriceHtml = prices[1] + " " + up;
            silverPriceSpan.css("color", "green");
        }
        else if (gsPrices[1] > prices[1]) {
            silverPriceHtml = prices[1] + " " + down;
            silverPriceSpan.css("color", "red");
        }
    }
    else {
        goldPriceHtml = prices[0];
        silverPriceHtml = prices[1];
    }

    goldPriceSpan.html(goldPriceHtml);
    silverPriceSpan.html(silverPriceHtml);
    gsPrices = prices;
    });
});

Open this page on the browser. This page should behave the same way as the other client page. We followed the same set of steps to create the client page. But, we used a different set of functions defined in the SignalR client script library to make the page functional.

Cross-domain communication

Now, let’s separate the client from the server. Create a new ASP.NET Empty application and add the NuGet package SignalR.Js to it. SignalR.Js consists of SignalR’s JavaScript client libraries alone, it doesn’t include the .NET assembly references.

Copy the client page created above to this project. Also, add the images which are used in the previous application. The only change to be made to this client page to make it work is passing URL while connecting to the hub:

var connection = $.hubConnection("http://localhost:port-no");

That’s it! View this page on the browser. Run the admin page and change the values. All clients should be in sync with the data modified on the admin page.

Happy coding!