I've written an updatescript that updates a few div's every second with serverside info. Now the problem is it seems kinda heavy usage, in google chrome my mouseanimation even keeps loading.
I hope somebody can tell me how to better this script or maybe got an other solution.
Here is my aspx page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' >
<head id="Head1" runat='server'>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.countdown.js" type="text/javascript"></script>
<title>Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
$(function hello() {
// function that does something exciting?
var liftOff = function () {
// ....
};
// Get a date that is some (short) time in the future
var getDeadline = function () {
var shortly = new Date();
shortly.setSeconds(shortly.getSeconds() + 5.5);
return shortly;
};
// Attach click handler to all our buttons
$("button.resetButton").click(function (event) {
$.ajax({
type: "POST",
url: "WebService.asmx/HelloWorld2",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {},
failure: function () { alert("Uh oh"); }
});
});
function highlightLast5() {
$.ajax({
type: "POST",
url: "WebService.asmx/HelloWorld",
data: "{'number':'0'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) { $("div.shortly").countdown('change', { until: msg.d }); },
failure: function () { alert("Uh oh"); }
});
}
// Start all countdowns going on page load
$('div.shortly').countdown({
until: getDeadline(),
onTick: highlightLast5,
onExpiry: liftOff,
layout: '{sn}'
});
});
</script>
<div class="mainpanel">
<div>
test
</div>
<div class="shortly" >
</div>
<button id="button" type="button" class="resetButton">
Reset
</button>
</div>
</form>
</body>
</html>
And the webservice which returns the information:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
List<Auction> auctions;
public WebService () {
//Uncomment the following line if using designed components
//InitializeComponent();
auctions = (List<Auction>)Application["Auction"];
}
[WebMethod]
public string HelloWorld(int number) {
return auctions[0].seconds.ToString();
}
[WebMethod]
public void HelloWorld2()
{
auctions[0].seconds = 30;
}
}
Now as you can see the jquery script get's the data every second, this is kinda needed because it's for an live auction. If I use this script on an real server as I tried the server crashes in like 2 minutes because of the heavy usage, this is sadly only with one client open. So whenever more clients would use the script at the same time I would have gotten an real problem.
