20/02/2010

JavaScript / C# Hack to For Latency Simulation In ASP.Net Web Applications

When developing AJAX functionality sometimes a latency simulation can be quite revealing. The following four lines of code serve as an interception point injecting a user specified network delay in serving network resources for UI testing purposes.

If you use your imagination a bit, and leverage the power of jQuery selectors, one can quickly build a network latency injector for help in developing those tough to test RIA interfaces. I hope you enjoy:

1) Create a new WebForm Called ImageLatencySimulator.aspx in the root of your web application.

2) Within the .aspx file delete all the html markup so only the @Page level declaration is visible (optional).

3) In the Page Load event of the .aspx.cs(.vb) file add the following code (C#, message me for VB):

int delay = Convert.ToInt32( Request.QueryString["delay"] );
string redirectTo = Request.QueryString["redirect"];
System.Threading.Thread.Sleep(delay);
Response.Redirect(Page.ResolveUrl(redirectTo));
// quite simple really isn't it? ya ya ya parse the int properly and perform appropriate null checks ... play your little violin for me before commenting ...

4) Add an image to the images directory within the root of your web application named .gif;

5) Add another WebForm or Html File to your project in the same level in the hierarchy as ImageLatencySimulator.aspx called LatencyTest.aspx|html.

5) Within the body tag in the LatencyTest.html file add an image tag with the src attribute pointing to ImageLatencySimulator.aspx with the appropriate get params as such:

.gif" alt="latency example redirect" />

6) Run the project.

You should notice all requests for your image resource are now being redirected through the ImageLatencySimulator.aspx and therefore are subject to your user defined delay parameter of 5000 miliseconds. Your waterfall diagram is now visibly apparent as the page loads.

OK - so why is this cool at all you may ask? We'll, imagine I add a #if declaration to my .Net assembly which registers a piece of JavaScript on my page when running in debug mode that does the following (using jQuery):

$(document).ready(function() {
$("img").each(function() {
$(this).attr("src") = "ImageLatencySimulator.aspx?delay=500&redirectTo=" + $(this).attr("src");
});
});
// coded the above in WYSIWYG editor so message me if it doesn't work.

If you can read jQuery code then it should be obvious - the previous code injects a network delay against every image on your entire web page simulating network latency in any and every web browser!! Now go add an eTag (PageOutput Cache in ASP.Net) to your ImageLatencySimulatory.aspx file and test out your cache layer. Just add a random parameter at the end of the GET string to invalidate the cache and you have an extremely simple network latency simulator for use in development.

I'd encourage you to get creative with the jQuery part of this algorithm, add the appropriate type checks to the C# component - see what else you can simulate latency for - use templates for urls - I personally find this technique invaluably simple - simple to implement, simple to expalin, simple to advocate for - and in the spirit of KISS, that makes me warm and fuzzy.

Over and Out

8 comments:

Anonymous said...

Thanks! This helped so much! I've seen a few
rather confusing blogs lately, this cleared up a lot confusion I had.

Matt Stark said...

Glad I could help mang! If you advance the code feel free to add a trackback :)

Edin said...

Hi Matt,

This is not a comment on this post, but on a post you made at MSDN SharePoint Dev forum, regarding how to change the folder icons in a document library, according to content type. You claimed that you have JavaScript code that does this substitution.

Do you still have this code? Could you send it to me, please?

Matt Stark said...

Edin - I can certainly post code for this but am up to my ears today - If you contact me @ my gmail (I believe you may know my email) I will flip you a zip file with code today / explain it in a blog posting in the next couple days.

The code requires a server control and some ugly pure JavaScript (wasn't allowed to use jQuery - but jQuery would make the code much much nicer - it is an ugly hack but it works) ...

Edin said...

Hello Matt, thanks for a quick reply. I don't have your email, but I can imagine that it's mattstark, right?

Matt Stark said...

Hey Edin - I wrote an article describing How to change SharePoint folder icons - let me know if you have any problems with it.

Cheers - Matt

Nariman Haghighi said...

Interesting tactic, Matt.

I had this same need a few days ago and downloaded an add-on for FireFox called Throttle - worked well.

There's a problem accessing it at the moment though: https://support.mozilla.com/en-US/questions/755876.

Matt Stark said...

Ha Ha - I like writing code too much :) ...

Thanks for the advice.