SignalR - Publish Data From Win Forms Using Hub Proxies

Mira Javora
Page content

This article is a third in a series dedicated to SignalR. My previous article looked at pushing data using IHubContext.

A larger web projects would typically consist not only of front end web project, but would include additional class libraries and offload some of the heavy processing work to service or console apps. The common problem is then how do you update the front-end and signal the site that some work has been completed.

A crude way around this is to store a flag in your persistence and continuously poll the data whether the job has finished. This is grossly inefficient. SignalR offers a straightforward solution to exactly that problem. Using Hub proxies, you are able to push data all the way to the connected clients on the front-end.

Image Hub

In my example, I will use Win Forms app to poll Instagram for latest images based on a specific tag and push the latest images to the web clients using a hub proxy.

First of all, I need a Hub in the web project to which my clients will connect to.

1public class ImagesHub : Hub
2{
3    public void PublishPhoto(string url)
4    {
5        Clients.receive(url);
6    }
7}

The hub will receive the url of the latest image and pass it to the clients using the Clients dynamic property. We can add a bit of JavaScript to let the client connect to the hub and listen to the receive callback. Once the data is received on the client, I use jsrender to take the value and render the image in the div container.

 1var imagesHub = undefined;
 2
 3var init = function() {
 4    imagesHub = $.connection.imagesHub;
 5
 6    imagesHub.receive = function (value) {
 7        $(".images").html($(".image-template").render({ Image: value }));
 8    };
 9};
10
11init();

Creating a Connection and a Proxy

On the win forms side, we can then establish a hub connection. The HubConnection class takes url as its parameter. This is the url of your web project that contains the hubs. You can then create a proxy for the hub using the hub name and start the connection afterwards.

 1private HubConnection _connection;
 2private IHubProxy _imageHub;
 3 
 4private void Init()
 5{
 6    //...your init code  
 7 
 8    //create connection
 9    _connection = new HubConnection(EndPointUrl.Text);
10    //create proxy to the ImagesHub
11    _imageHub = _connection.CreateProxy("ImagesHub");
12    //start the connection
13    _connection.Start();
14 }

Invoke a method on the Hub using a Proxy

Once you establish the connection, you will be able to use the hub proxies to invoke the PublishPhoto method on the ImagesHub. Calling Invoke method will execute the IHub method asynchronously and return the Task.

 1var image = GetImageToPublish(...);
 2 
 3_imageHub.Invoke("PublishPhoto", image).ContinueWith(task =>
 4{
 5    if (task.IsFaulted)
 6    {
 7         //your failure logic
 8    }
 9    else
10    {
11         //your success logic
12    }
13});

Download the Sample

The code is available at GitHub, if you have any questions or comments give me a shout @mirajavora

SignalR – Introduction To SignalR SignalR – Publish Data Using IHubContext SignalR – Publish Data Using Proxies SignalR – Dependency Injection