Click here to Skip to main content
15,867,308 members
Articles / Web Development / HTML

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

Rate me:
Please Sign up or sign in to vote.
4.95/5 (28 votes)
8 Sep 2016MIT3 min read 114.2K   38   34
Simple project that shows how to use SignalR in ASP.NET MVC application to track progress of some long running process and display on clientside using Bootstrap modal.

Image 1

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

Image 2

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

Image 3

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.

C#
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

JavaScript
$(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

Image 4

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.

C#
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.

C#
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.

C#
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...

License

This article, along with any associated source code and files, is licensed under The MIT License


Written By
Web Developer
Croatia Croatia
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionProgress Bar is not getting hidden - Help needed urgent Pin
Member 1295872219-Jan-17 11:38
Member 1295872219-Jan-17 11:38 
AnswerRe: Progress Bar is not getting hidden - Help needed urgent Pin
Denis Lazendić24-Jan-17 11:05
Denis Lazendić24-Jan-17 11:05 
GeneralRe: Progress Bar is not getting hidden - Help needed urgent Pin
Member 1295872225-Jan-17 3:54
Member 1295872225-Jan-17 3:54 
QuestionQuestion Pin
Aakash Bashyal30-Nov-16 5:31
Aakash Bashyal30-Nov-16 5:31 
AnswerRe: Question Pin
Denis Lazendić4-Dec-16 7:19
Denis Lazendić4-Dec-16 7:19 
GeneralRe: Question Pin
rvberloo12-Jan-17 1:25
rvberloo12-Jan-17 1:25 
GeneralMy vote of 5 Pin
Anurag Gandhi19-Oct-16 21:28
professionalAnurag Gandhi19-Oct-16 21:28 
PraiseServer Invoked SignalR Pin
robertburgh12-Sep-16 7:04
robertburgh12-Sep-16 7:04 
Very good and simple. Useful for real world applications.
QuestionSignal R Progress Bar Pin
RB Starkey9-Sep-16 20:03
professionalRB Starkey9-Sep-16 20:03 
GeneralMy vote of 5 Pin
Carsten V2.08-Sep-16 20:20
Carsten V2.08-Sep-16 20:20 
PraiseAwesome Work Pin
Rohit Reddy8-Sep-16 8:36
Rohit Reddy8-Sep-16 8:36 
QuestionGood work Pin
JamesAmos6-Sep-16 6:48
JamesAmos6-Sep-16 6:48 
AnswerRe: Good work Pin
Denis Lazendić6-Sep-16 8:27
Denis Lazendić6-Sep-16 8:27 

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.