Real time data with Ajax : The Official Microsoft ASP.NET Forums

Reply

bdotjones

Member

240 Points

77 Posts

Real time data with Ajax

Jul 13, 2010 07:44 PM|LINK

Hi,

I am trying to figure out what is the best way to go about creating functionality like this ( http://www.swoopo.com ) with ajax. I am just looking for the clock countdown functionality and the constant seamless update of the price. any help would be appreciated

Thanks

-bdot
"There are only 10 kinds of people in this world. Those who understand binary and those who don't"

Reply

mrmercury

Star

8760 Points

1291 Posts

Re: Real time data with Ajax

Jul 13, 2010 09:46 PM|LINK

You don’t really need AJAX for the clock functionality, you can do this with JavaScript, just google “clock countdown javascript” and you’ll find lots of samples, you can do the price update using ASP.NET AJAX to call a WebService (or PageMethod) every n seconds to get the new prices and then use JavaScript and the DOM to show the new price to the user and restart the clock countdown, you can find samples and tutorials about calling WebServices with ASP.NET AJAX here.

If this post helped you please remember to set it as Answer so it can help others.

Edited by mrmercury on Jul 13, 2010 09:48 PM

Reply

chetan.sarod...

All-Star

66579 Points

11270 Posts

Re: Real time data with Ajax

Jul 14, 2010 02:57 AM|LINK

Please check this: http://forums.asp.net/t/1291427.aspx

http://forums.asp.net/t/1172829.aspx

If you use Ajax Timer to achieve countdown timer, it will post request each seconds. Too frequently request to server is not a good idea and it will create much more overhead on the server.

So we can use JavaScript to present the time. However, it needs to know the start time and end time from the server.

In this way, there is a little bit time span from the real server time because it needs spend a little time to get the server time. That is acceptable if veracity is not very important in the case.

Please check the below sample:

    <div id="timelabel"></div>
 <script type="text/javascript">


var leave =<%=seconds %>;

CounterTimer();
var interv=setInterval(CounterTimer,1000);

function CounterTimer()
{
var day = Math.floor(leave / ( 60 * 60 * 24))
var hour = Math.floor(leave / 3600) - (day * 24)
var minute = Math.floor(leave / 60) - (day * 24 *60) - (hour * 60)
var second = Math.floor(leave) - (day * 24 *60*60) - (hour * 60 * 60) - (minute*60)

hour=hour<10 ? "0" + hour : hour;
minute=minute<10 ? "0" + minute : minute;
second=second<10 ? "0" + second : second;

var remain=day + " days   "+hour + ":"+minute+":"+second;
leave=leave-1;

document.getElementById("timelabel").innerText=remain;

}



<> 
  
    public double seconds;
    protected void Page_Load(object sender, EventArgs e)
    {
        seconds = (GetEndTime() - GetStartTime()).TotalSeconds;

    }
    private DateTime GetStartTime()
    {
        return DateTime.Now;
    }
    private DateTime GetEndTime()
    {
        return new DateTime(2008, 7, 23, 8, 10, 0);
    }
 
Another approch
You could use javascript to do that just like this:<div-HIGHLIGHTER></div-HIGHLIGHTER><div>
<div>view plaincopy to clipboardprint?</div>
</div><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
 <HTML>  
 <HEAD>  
  <TITLE> New Document </TITLE>  
  <META NAME="Generator" CONTENT="EditPlus">  
  <META NAME="Author" CONTENT="">  
  <META NAME="Keywords" CONTENT="">  
  <META NAME="Description" CONTENT="">  
 </HEAD>  
  
 <BODY>  
  <form name="counter"><input type="text" size="8"    
name="d2"></form>    
  
<script type="text/javascript">    
 var seconds=60;   
 var minutes=4;   
 document.counter.d2.value='5:00';   
  
function display(){    
 if (seconds<=0){    
    seconds=59;   
    minutes-=1;   
 }    
 if (minutes<=-1){    
    seconds=0;   
    minutes+=1;   
 }    
 else    
    seconds-=1;   
    document.counter.d2.value=minutes+":"+seconds;   
    setTimeout("display()",1000);   
}    
setTimeout("display()",1000);   
</script>    
  
 </BODY>  
</HTML>  
<div></div>

Chetan Sarode
Senior Software Engineer,
Approva Systems Pvt Ltd, Pune, India.

Reply

bdotjones

Member

240 Points

77 Posts

Re: Real time data with Ajax

Jul 14, 2010 03:12 PM|LINK

mrmercury

... you can do the price update using ASP.NET AJAX to call a WebService (or PageMethod) every n seconds to get the new prices..

If I call a WebService every second,isnt that going to be resource intensive on the sever?

-bdot
"There are only 10 kinds of people in this world. Those who understand binary and those who don't"

Reply

mrmercury

Star

8760 Points

1291 Posts

Re: Real time data with Ajax

Jul 14, 2010 04:14 PM|LINK

Yes, that’s why you always need to do stress tests before going live, especially with AJAX applications, but it’s doable, in fact if you use Fiddler to check the swoopo site you’ll notice they check for new prices every second and return a relatively small amount of data every time.

If this post helped you please remember to set it as Answer so it can help others.

Reply

bdotjones

Member

240 Points

77 Posts

Re: Real time data with Ajax

Jul 16, 2010 09:06 PM|LINK

Do you have exprience with ajax 4 new live binding feature?

If I create a service to run a query can't i just call it and use live binding for the changing price?

<div>

[WebMethod]
public string GetPrice(int product_ID)
{
   //connect to database and run query
   //ex. select price from products

   return price;
}</div>

-bdot
"There are only 10 kinds of people in this world. Those who understand binary and those who don't"

Edited by Vince Xu - MSFT on Jul 20, 2010 08:13 AM
Edited by Vince Xu - MSFT on Jul 20, 2010 08:13 AM

Real time data with Ajax RSS

5 replies

bdotjones

Real time data with Ajax

mrmercury

Re: Real time data with Ajax

chetan.sarod...

Re: Real time data with Ajax

bdotjones

Re: Real time data with Ajax

mrmercury

mrmercury

Re: Real time data with Ajax

bdotjones

Re: Real time data with Ajax

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft