SignalR Progress Bar Simple Example - Sending Live Data from Server to Client

• Download demo - 35 MB
• GitHub repository - https://github.com/dlazendi/SignalRProgressBar

<img src="1124691/ProjectSampleImage.jpg" style="width: 600px; height: 327px;" />

Introduction

You have a long running task in your application and you want your users to know what's going on while they wait for the process to finish? That's exactly why you would want to use SignalR functionality. You could show progress bar saying "In progress" and remove it when the process is done, but wouldn't it be even better if you could give them more detailed information about the status of the process in progress. It was always complicated to do that in web apps until the introduction of SignalR.

This simple app will show you how you can implement SignalR in your MVC application in a matter of minutes.

Adding SignalR to the Project

First thing you need to do to start working with SignalR is to add it in your project. You can use Nuget Package Manager Console.

Go to: Tools > NuGet Package Manager > Package Manager Console

<img src="1124691/NugetPackageConsole.jpg" style="width: 600px; height: 263px;" />

Insert the following command and press Enter: Install-Package Microsoft.AspNet.SignalR

<img height="173px" src="1124691/SignalR-Installation-Command.jpg" width="582px" />

Visual Studio will install it for you.

After the installation has finished, you can go to your Startup.cs file (which is automatically added in MVC5 project, but if you don't have it, check out this link to see what it is and why you would use it. Startup.cs) and map SignalR to your application.

using Microsoft.Owin;
using Owin;

[assembly: OwinStartupAttribute(typeof(SignalRProgressBarSimpleExample.Startup))]
namespace SignalRProgressBarSimpleExample
{
    public partial class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            ConfigureAuth(app);

            app.MapSignalR();
        }
    }
}
...

Next, we must include some scripts preferably in this order. I've included it in my _Layout.cshtml file.

1. jQuery - @Scripts.Render("~/bundles/jquery") - MVC project already has Jquery included, but you can include it anyway you want
2. Bootstrap - We're using bootstrap to style our web app and to use Modal Popup div to show our progress
3. SignalR - jquery.signalR-2.0.2.min.js
4. /signalr/hubs"

You can download all of these scripts from my demo project.

Below our added scripts, we add a little bit of JavaScript that we will use to get data from the server.

Starting Connection and Handling Data Sent from Server

$(function () {

            // Reference the auto-generated proxy for the hub.
            var progress = $.connection.progressHub;
            console.log(progress);

            // Create a function that the hub can call back to display messages.
            progress.client.addProgress = function (message, percentage) {
                //at this point server side had send message and percentage back to the client
                //and then we handle progress bar any way we want it
                
                //Using a function in Helper.js file we show modal and display text and percentage
                ProgressBarModal("show", message +  " " + percentage);
                
                //We're filling blue progress indicator by setting the width property to the variable
                //that was returned from the server
                $('#ProgressMessage').width(percentage);
                
                //closing modal when the progress gets to 100%
                if (percentage == "100%") {
                    ProgressBarModal();
                }                
            };

            //Before doing anything with our hub we must start it
            $.connection.hub.start().done(function () {
            
                //getting the connection ID in case you want to display progress to the specific user
                //that started the process in the first place.
                var connectionId = $.connection.hub.id;
                console.log(connectionId);
            });

        });

SignallR Hub

<img height="706px" src="1124691/HubsFolder.jpg" width="321px" />

Next, we create a new folder called Hubs, and create a class called ProgressHub.cs which inherits from Hub. We must have this class in order for SignalR to communicate between server and client. We don't have to define any method here because in this example we want to send data directly from server. Every other chat tutorial calls the method from client and then sends data back to every other client that is connected at that point.

Our example uses some other method to do some work and then we send the data from outside of the hub.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;

namespace SignalRProgressBarSimpleExample.Hubs
{
    public class ProgressHub : Hub
    {
    }
}

In our HomeController, there is a method that we called from button on the client side that does some work and sends data to the client every time it iterates through each item in the loop.

public JsonResult LongRunningProcess()
        {
    //THIS COULD BE SOME LIST OF DATA
    int itemsCount = 100;

    for (int i = 0; i <= itemsCount; i++)
    {
        //SIMULATING SOME TASK
        Thread.Sleep(500);

        //CALLING A FUNCTION THAT CALCULATES PERCENTAGE AND SENDS THE DATA TO THE CLIENT
        Functions.SendProgress("Process in progress...", i , itemsCount);
    }

    return Json("", JsonRequestBehavior.AllowGet);
}

At the end of each task done, we call Functions.SendProgress("Process in progress...", i , itemsCount); that sends data back to client.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using SignalRProgressBarSimpleExample.Hubs;

namespace SignalRProgressBarSimpleExample.Util
{
    public class Functions
    {
        public static void SendProgress(string progressMessage, int progressCount, int totalItems)
        {
            //IN ORDER TO INVOKE SIGNALR FUNCTIONALITY DIRECTLY FROM SERVER SIDE WE MUST USE THIS
            var hubContext = GlobalHost.ConnectionManager.GetHubContext<ProgressHub>();

            //CALCULATING PERCENTAGE BASED ON THE PARAMETERS SENT
            var percentage = (progressCount * 100) / totalItems;

            //PUSHING DATA TO ALL CLIENTS
            hubContext.Clients.All.AddProgress(progressMessage, percentage + "%");
        }
    }
}

hubContext.Clients.All.AddProgress(progressMessage, percentage + "%"); - sends data to all clients connected at that time (for the purpose of this tutorial). See more information about SignalR Clients, Groups...

Points of Interest

After reading many tutorials about implementing SignalR, I decided to make this tutorial (which is my first ever) to help you get started quickly with SignalR. This example is not another chat tutorial, but a progress bar tutorial.

Please fell free to download the sample project and test it...