How to Push Data from Server to Client Using SignalR

WEBINAR: On-demand webcast

How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >

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)
        {
            Clients.All.newMessageReceived(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)
        {
            Clients.Group(group).newMessageReceived(message);
        }
    }

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)
        {
            app.MapSignalR();
        }
    }
}

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">
<head>
    <title></title>
    <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) {
                console.error(error);
            });;
            
        });
    </script>
</head>
<body>
    <div>
        <label id="lblEnterMessage">Enter Message: </label>
        <input type="text" id="txtEnterMessage" />
        <input type="submit" id="btnSubmit" value="Send Message" />
        <ul id="ulChatMessages"></ul>
    </div>
</body>
</html>

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()
        {
            InitializeComponent();
            hubConnection = new HubConnection("http://localhost:32555/signalr/hubs");
            hubProxy = hubConnection.CreateHubProxy("MyChatHub");
            hubProxy.On<string>("newMessageReceived", (message) => lstMessages.Items.Add(message));
            hubConnection.Start().Wait();
        }
 
        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

Comments

  • Please send the complete solution

    Posted by rohit on 11/29/2017 11:14am

    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

    Reply
  • hola

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

    Can you pass the download link?

    Reply
  • Thank you

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

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

    Reply
  • sample

    Posted by senol on 01/12/2017 07:10am

    sample download brother

    Reply
  • Signal R in Silverlight 4 OOB App

    Posted by krishna on 07/26/2016 03: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 08:54am

      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

      Reply
    Reply
  • Get Error

    Posted by Roshni on 07/12/2016 06:18am

    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/14/2017 11:07pm

      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();

      Reply
    Reply
  • laptrinh

    Posted by truong minh van on 05/10/2016 08:31am

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

    Reply
  • Sr Developer

    Posted by Jos S on 11/25/2015 06:21am

    Why do all SignalR articles deal with it as a peer to peer chatting system? How about showing something practical? Like a service pushing data to clients, but doesn't accept anything back from the clients. A service who pushes data for a real time dashboard but doesn;t require the client to push data to the server.

    Reply
  • Authentication in SignalR self host

    Posted by parhamparsa on 05/21/2015 01:15am

    Hi is there any way that i create a server in windows console application and client be asp.net mvc after the client login, the server cant identify user can you suggest me some way?

    Reply
  • cannot connect to hub

    Posted by shakir on 04/23/2015 04:48am

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

    this is the push page Enter Message:
    and the hub is using System; using System.Linq; using Microsoft.AspNet.SignalR; using Microsoft.AspNet.SignalR.Hubs; /// /// Summary description for NotificationHub /// /// // [HubName("NotificationHub")] public class NotificationHub : Hub { public void BroadcastMessageToAll(string message) { // ClientScript.RegisterStartupScript(this.GetType(), "PopupScript", "alert('in broadcast message')", true); // Clients.All.newMessageReceived(message); var context = GlobalHost.ConnectionManager.GetHubContext(); context.Clients.All.newMessageReceived(message); } } please help

    Reply
  • Loading, Please Wait ...

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

Top White Papers and Webcasts

  • As all sorts of data becomes available for storage, analysis and retrieval - so called 'Big Data' - there are potentially huge benefits, but equally huge challenges...
  • The agile organization needs knowledge to act on, quickly and effectively. Though many organizations are clamouring for "Big Data", not nearly as many know what to do with it...
  • Cloud-based integration solutions can be confusing. Adding to the confusion are the multiple ways IT departments can deliver such integration...

Most Popular Programming Stories

More for Developers

RSS Feeds

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