RSS

Monthly Archives: May 2012

Client Server Progress Bar using SignalR

I am currently involved on a web application project which does some pretty heavy processing on the server side.  The Client makes a request to the Server, and waits patiently for a response once the server side processing is complete.  However in the disconnected world of the web this can prove a problem.  For example The client will make a request and wait for a response until a timeout is reached.  At this point the client will stop waiting for the reponse while the server is still processing the request causing a whole host of performance issues.

So I thought, wouldn’t it be nice if I could keep the Client informed of the progress of the Server.  Maybe a Progress Bar on the client which is updated by the Server at various stages of the process.

Using SignalR I was able to enforce this communication between the Server and Client and created a basic example in this blog so you can do the same.

Step 1 – The Concept

The concept for this example is:

I will create a simple aspx page which will host a progress bar.  The intention being that this progress bar is updated in real time by the server.  To allow the server to update the client I will use SignalR.  I am also using the Twitter Bootstrap framework for my styling and layout although it is not essential.

Step 2 – Setting up the Environement

Open Visual Studio and Create a new ASP.NET Web Application

Using the Package Manager Console, Install the SignalR Libraries using NuGet (This will also ensure JQuery is installed) e.g.

Finally add the Twitter Bootstrap CSS which we will use to give our progress bar a nice styling e.g.

Twitter Bootstrap provides us with out of the box HTML, CSS and Javascript for out user interfaces, is excellent and can be found here http://twitter.github.com/bootstrap/

Step 3 – Server Side Code

For simplicity we are going to create a simple method which invokes a timer and then periodically uses Signal R to pass a message back to the client updating the progress of the progress bar.

Using the Default.aspx.cs our code should look like this:

Here I have created a class called Chat which derives from Hub.  Yep if SignalR is installed correctly its that simple, the rest of the code is conerned with updating the progress bar.

I have created a method called Send() which is created on the Hub Server and will be linked to on the client in step 4.  This method simply creates a timer with a tick interval of 100ms and when each interval elapses calls to the timer_Elapsed event.  This event then evaluates my counter (which starts at 1) and increments is by 1.  If the result has not reached 100, we make a call to any SignalR clients that are listening and invokes the addMessage function on the client.  Once we reach 100 (or 100% in terms of our progress bar) the timer is stopped.

Step 4 – Client Side Code

Out client side code within Default.aspx is slightly more complex but still pretty straight forward:

First add the following script references to JQuery and SignalR

Secondly add a link to the Twitter bootstrap CSS:

then add the following markup to the client page:

Notice the code within the <div> with the class name ‘Container’.  This is where I create a simple Progress Bar using the Twitter Bootstrap Styling.  The Width attribute attached to the ‘bar’ is initially set to 0%.  This will be increased incrementally to 100% from the server.

Also noice out Script section.  Here we are referencing out SignalR class on the server and creating out addMessage method which is invoked from the server.  This method simply uses Jquery to grab our progress bar and increment the Width attibute with the value passed back from the server.

I have also added some code to the click event of the button which invokes the Send Message on the server,

Step 5 – Running the Application

If all the steps have been implemented correctly you should be able to run the application abd click the button to see the progress bar being incrementally increased by the server

 
3 Comments

Posted by on May 17, 2012 in ASP.NET, C#, HTML, web development