I want to find a way to auto update a page to the newest content as change happens. For instance, like in an instant messenger conversation you see what the other person sends you without having to refresh anything.
I've ran into this problem before and basically implemented an AJAX script that fetched data from the server every half a second. This worked, but it was an incredible bandwidth hog. I need find a way to do this by using as little bandwidth as possible yet still make things seamless and smooth.
Send as little data as possible through AJAX. Don't load the whole page every time. Only send the updates since last time. If there has been no update just send an empty page.
You can increase the time between you fetch the data, but of course this will make it less responsible. You can stop fetching data if the user is not active, hasn't moved the mouse for some time or something like that.
Wouldn't sending the request to the server in the first place to check for new messages and what not be a significant load in itself? I guess I never figured out which was chewing through the bandwidth, the request or the data sent back.
If you send the whole page back every half a second, it will probably require at least several kilobytes each time. If you only get a status message of "no changes", it should only take a few hundred bytes.
As an example, assuming a 10,000 byte page (actually quite small for a complete page), you would transfer 2 * 3600 * 10,000 bytes, or 72 megabytes, per hour. An empty message might take 2 * 200 * 3600 bytes, or about 1.5 megabytes, per hour.
Redrawing the page would also use a lot of cpu time. There would still be some overhead associated with the transfer regardless of the amount transferred, of course. You would surely save most of the bandwidth, and probably greatly reduce the load on both the server and the browsing computer, by minimizing the data transfer.
In a front page lead story situation: In an ajax response, you probably dont need to send the whole page back, you could just send back the new lead story.
In an instant messenger situation: In an ajax response you could send back the new messages.
Maybe you could free up some bandwidth by getting the browser to detect when the user is using the page or not and get the browser to fetch updates less often when say there has been no mouse movement or no keyboard activity, have an event listen for mouse movement and keyboard events.
Yeah you're probably right about the size of the whole page versus a simple status message. I'll have to try to implement that instead of lugging a whole page back and forth.
I really like your idea of creating an event listener for mouse movements and keyboard events. That makes a lot of sense. Perhaps I should also make a condition that says to refresh more often if there are multiple users logged on, instead of idly refreshing the page at max rate when there is obviously only 1 person logged on.
Question: Is there any other way of doing this besides AJAX? Just curious.
as for your ajax, make a little js function to check if there are changes in the content you are loading through size, if there is no content change for lets say, about 30 secs, set the interval timer to 1 minute, then if there are changes often in less than 30 secs, set the interval timer to 15secs, you decide, how much you want it to refersh your ajax function. xd