Click here to Skip to main content
11,929,675 members (54,299 online)
Click here to Skip to main content
Add your own
alternative version


59 bookmarked

Real-time Notifications with SignalR

, 27 Oct 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Notify the users on the progress of time consuming operations in real-time


Sometimes, server side operations take time. It's not really user friendly to have users pressing a button and waiting 30 seconds for some operation to be executed, with the only progress information being a spinning wheel.

If you have server side operations that are time consuming and you would like your users to get insight into what's going on in the server in real-time, this tip is for you.

I will show how you can use SignalR 2.0 to send messages from the server to the client while a process is running in the server. The result is a notification bar that is displayed to the user showing the progress happening in the server.


The fact that you can use such technique doesn't mean you should start using it everywhere. You should always strive to optimize performance. As an example, if you have a database query that is slow, you should try to optimize it first and, if it's really an expensive operation that you cannot improve, you can use such a technique to make your users more informed about the operation in progress.

Using the Code

For creating the sample application I describe below I used Visual Studio 2013, jQuery 1.10, SignalR 2.0 and noty 2.1. 

First of all, we need to add SignalR to the web application. There are several ways to do this, the simplest being right-clicking in your project, Manage NuGet packages, search Online for signalr and selecting to install Microsoft ASP.NET SignalR.

We are going to use a notification jQuery plugin that provides nice out-of-the-box notifications. Still in NuGet's package management window, search for "noty". Select and install the package named jQuery Notification Plugin.

Next, we add to the project a OWIN Startup class.

Add the following line to the Configuration method of the new Startup class:


Next, we are going to add a SignalR hub. For this, add a new SignalR Hub Class (v2) item to your project.

This is the class that does the server side processing. In the example I attach to this article, I have the class defined as follows:

public class RealtimeNotifierHub : Hub
    public int recordsToBeProcessed = 100000;
    public void DoLongOperation()
        for (int record = 0; record <= recordsToBeProcessed; record++)
            if (ShouldNotifyClient(record))
                ("Processing item {0} of {1}", record, recordsToBeProcessed));
    private static bool ShouldNotifyClient(int record)
        return record % 10 == 0;

At this point, our server is ready. We have a method called DoLongOperation that is called from the client side. This method simulates a long running operation with 100.000 iterations and, at every 10 iterations, notifies the client of the current status. The Thread.Sleep call was introduced to slow down the server, otherwise the for loop runs so fast that the notification bar wouldn't be needed.

Next, we have to prepare the client. Create a new HTML page (or use the page where you want to show the notifications).

<!DOCTYPE html>
    <title>Real-time notifier</title>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <!-- Import the noty scripts -->
    <script src="Scripts/noty/jquery.noty.js"></script>
    <script src="Scripts/noty/layouts/top.js"></script>
    <script src="Scripts/noty/themes/default.js"></script>
    <!-- Import the SignalR scripts -->
    <script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
    <script src="/signalr/hubs"></script>
    <div style="margin-top: 100px;">
        <!-- This button will trigger the time consuming operation -->
        <input type="button" id="mybutton" 
        value="Call a time consuming server side operation" />
    <script type="text/javascript">
        $(function () {
            // Initialize the connection to the server
            var realtimeNotifier = $.connection.realtimeNotifierHub;
            // Preparing a client side function 
            // called sendMessage that will be called from the server side
            realtimeNotifier.client.sendMessage = function (message) {
                showOrUpdateSuccessMessage(message, false);
            // Establish the connection to the server. When done, sets the click of the button
            $.connection.hub.start().done(function () {
                $('#mybutton').click(function () {
                    // When the button is clicked, 
                    // call the method DoLongOperation defined in the Hub
    <script type="text/javascript">
        // Helper code that updates the noty notification bar
        var n;
        function showOrUpdateSuccessMessage(message, timeout) {
            if (n == null) {
                n = noty({ text: message, type: 'success', timeout: timeout, maxVisible: 1 });
            else {

The example above does several basic things:

  • Establishes the connection from the client to the server
  • Declares a client side function that will be called by the server
  • Calls the server's method that performs the time consuming operation
  • Updates the noty notification bar.

This is how it looks like when it's running:

Feel free to use this code. I have attached a Visual Studio 2013 solution that should just work.

If you have any questions, I'll be happy to answer them.



This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer Hinttech BV
Netherlands Netherlands
I'm a Portuguese software engineer living in The Netherlands and working for HintTech BV

You may also be interested in...

Comments and Discussions

GeneralGreat Pin
karlta0519-Jan-15 21:23
memberkarlta0519-Jan-15 21:23 
GeneralsignalR Pin
thami3629-May-14 0:20
memberthami3629-May-14 0:20 
GeneralThanks! Pin
Patrick Kalkman18-Nov-13 2:13
memberPatrick Kalkman18-Nov-13 2:13 
GeneralMy vote of 5 Pin
M Rayhan27-Oct-13 21:15
memberM Rayhan27-Oct-13 21:15 
QuestionWeird javascript reference Pin
Guus Beltman27-Oct-13 1:28
memberGuus Beltman27-Oct-13 1:28 
AnswerRe: Weird javascript reference Pin
Gustavorhm27-Oct-13 5:12
memberGustavorhm27-Oct-13 5:12 
GeneralTimely information Pin
wicklowwanderer24-Oct-13 8:53
memberwicklowwanderer24-Oct-13 8:53 
GeneralMessage Automatically Removed Pin
22-Oct-13 22:58
memberMember 1021431822-Oct-13 22:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.151126.1 | Last Updated 27 Oct 2013
Article Copyright 2013 by GustavoMartins
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid