How to Push Data from Server to Client Using SignalR


Desktop-as-a-Service Designed for Any Cloud ? Nutanix Frame

In real-time environments the server is aware of the data updates, event occurrences, etc. but the client doesn’t know it unless the request is initiated by the client to the server seeking the updates. This is commonly achieved through methods like continuous polling, long polling, etc. and these methodologies incur a lot of traffic and load to the server.

The alternate approach to simplify and reduce the overhead is to make the server capable of notifying the clients. There are many technologies introduced to achieve this and some of them are WebSockets, SSE (Server Sent Events), Long polling, etc. Each of these methods has its own caveats like WebSockets are supported only on browsers that support HTML5 and SSE is not supported on Internet Explorer.

SignalR is an Asp.Net library, which is designed to use the existing transport technologies underneath based on the client nature and the support it offers. SignalR is capable of pushing the data to a wide variety of clients such as a Web page, Window application, Window Phone App, etc. The onus is now removed from the developers of worrying about which server push transport to use and deciding on the fallbacks in case of unsupported scenarios.

Composition of SignalR

To start with SignalR it is important to know the components. The server part of the SignalR technology requires hosting a PersistentConnection or a SignalR hub.

1. PersistentConnection – This is a server endpoint to push the messages to the clients. It allows the developers to access the SignalR features at a low level.

2. Hub – It is built on top of the PersistentConnection exposing high-level APIs and it allows the developers to make the server to client calls in an RPC fashion (Remote Procedure Call).

On the client front SignalR offers different client libraries to different clients like Windows App, Web Form, Windows Phone, iOS, Android, etc. The clients have to make use of the client libraries to get connected to the SignalR hub. These client libraries are available as NuGet packages.

Fig 1.0 shows a basic SignalR environment

Basic SignalR Environment
Fig 1.0: Basic SignalR Environment

Sample Application

Let us build a sample chat application that broadcasts the messages to all connected clients or to particular groups. In this example consider the clients to be a Windows application and a web form client.

Creating an Asp.Net SignalR Hub

Open Visual Studio and create an empty Asp.net MVC application named MyChatApplicationServer. Now open the NuGet packages, search and include Microsoft ASP.NET SignalR.

Now right click on the project, add the SignalR Hub class and name it as MyChatHub.  Add the following code to the class.

    public class MyChatHub : Hub
        public void BroadcastMessageToAll(string message)
        public void JoinAGroup(string group)
            Groups.Add(Context.ConnectionId, group);
        public void RemoveFromAGroup(string group)
            Groups.Remove(Context.ConnectionId, group);
        public void BroadcastToGroup(string message, string group)

The HUB class also provides the properties Clients, Groups, Context and events like OnConnected, etc.

Finally you should also add Owin startup class to map the available hubs as shown below.

[assembly: OwinStartup(typeof(MyChatApplicationServer.Startup))]
namespace MyChatApplicationServer
    public class Startup
        public void Configuration(IAppBuilder app)

Pushing Data to a Web Form Client

Now create a web form client project named WebClient and add a simple HTML file ChatWebClient.html with the following code. Add the references to the required script files.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <script src="Scripts/jquery-1.6.4.min.js"></script>
    <script src="Scripts/jquery.signalR-2.0.1.min.js"></script>
    <script src="http://localhost:32555/signalr/hubs/" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var myChatHub = $.connection.myChatHub;
            myChatHub.client.newMessageReceived = function (message) {
                $('#ulChatMessages').append('<li>' + message + '</li>');
            $.connection.hub.url = "http://localhost:32555/signalr";
            $.connection.hub.start().done(function () {
                $('#btnSubmit').click(function (e) {
                    myChatHub.server.broadcastMessageToAll($('#txtEnterMessage').val(), 'Web user');
            }).fail(function (error) {
        <label id="lblEnterMessage">Enter Message: </label>
        <input type="text" id="txtEnterMessage" />
        <input type="submit" id="btnSubmit" value="Send Message" />
        <ul id="ulChatMessages"></ul>

There are two ways of implementing the client function one with proxy and other without. The above example is the one without a proxy.

In the connection start you may also mention which transport SignalR should use.

Pushing Data to a Windows Application Client

Let us add a windows app and subscribe to the SignalR host. Create a new windows application named WinFormClient and from the nugget packages install Microsoft ASP.NET SignalR .NET client package. In the Program.cs add the following code.

namespace WinFormClient
    public partial class Form1 : Form
        HubConnection hubConnection;
        IHubProxy hubProxy;
        public Form1()
            hubConnection = new HubConnection("http://localhost:32555/signalr/hubs");
            hubProxy = hubConnection.CreateHubProxy("MyChatHub");
            hubProxy.On<string>("newMessageReceived", (message) => lstMessages.Items.Add(message));
        private void btnSubmit_Click(object sender, EventArgs e)
            hubProxy.Invoke("BroadcastMessageToAll", textBox1.Text, "Window App User").Wait();

Once done go ahead and run both the web and Windows client. Enter the messages and look at how the message is getting pushed across both the clients though they are of a different nature. Fig 2.0 shows a sample screenshot.

Web and Windows Clients
Fig 2.0: Web and Windows Clients

SignalR is capable of serving multiple connected clients irrespective of the client platform or technology. I hope this article provides a good amount of information about pushing data from the server to client using Asp.Net SignalR. Happy reading!

Related Articles


  • Thanks so much

    Posted by Jorge on 04/12/2019 10:44am

    Thanks so much!!

  • using same code but it is not connecting to hub. please help error accurd

    Posted by babu on 03/09/2018 02:04pm

    Can you pass the download link?

  • Can you pass the download link?

    Posted by Anas on 02/01/2018 07:16am

    Can you pass the download link?

  • Please send the complete solution

    Posted by rohit on 11/29/2017 07:14pm

    I tried everything as per you Article but it is not working. Please upload the solution on github or send it on my email id. It will be of great help

  • hola

    Posted by byron on 03/30/2017 11:43pm

    Can you pass the download link?

  • Thank you

    Posted by Chotkos on 02/28/2017 10:22am

    Thank you, this shown me exactly what i wanted :)

  • sample

    Posted by senol on 01/12/2017 03:10pm

    sample download brother

  • Signal R in Silverlight 4 OOB App

    Posted by krishna on 07/26/2016 10:51am

    We implemented signal R in SL4 using javascript without moving to SL5 . Now the problem we are getting with Out of browser app in SL due to javascript is not loading because of Default.aspx file is not invoked which is web browser related. Can you please suggest any solutions how we can implement in OOB app using Javascript or any other options. If possible can you please give a sample how we can implement signalr client using websockets using WCF.

    • Mr

      Posted by Saj on 08/04/2016 03:54pm

      You can wrap your web application in wpf using webcontrol, which loads the website residing on your IIS. But make sure that webcontrol is using updated version of IE (which supports JS) as by default it loads ActiveX related webbrowser i.e. IE 7 You can make WPF window frameless, hide its max/minimise buttons and launch in Maximise mode. That's equal to OOB application with everything running inside. Hope this helps

  • Get Error

    Posted by Roshni on 07/12/2016 01:18pm

    When I run the window code with submit click event then got this error "{"There was an error invoking Hub method 'ChatHub.BroadcastMessageToAll'."}", Please Help, how to solve

    • Solution of listbox invoke ERROR.

      Posted by zubair on 03/15/2017 06:07am

      InitializeComponent(); hubConnection = new HubConnection("http://localhost:51834/signalr/hubs"); hubProxy = hubConnection.CreateHubProxy("ChatHub"); // hubProxy.On("newMessageReceived", (message) =listBox1.Items.Add(message)); var uiCtx = SynchronizationContext.Current; hubProxy.On("newMessageReceived", message = { // You are no longer on the UI thread, so you have to post back to it uiCtx.Post(_ = { // Put all code that touches the UI here listBox1.Items.Add(message); }, null); }); hubConnection.Start().Wait();

  • laptrinh

    Posted by truong minh van on 05/10/2016 03:31pm

    i like Pushing Data to a Windows Application Client please send me project full. I thank very much

  • Loading, Please Wait ...

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date