I am doing a little experiment on using Ajax for moving an object on the screen. My ultimate goal is to sync a position of an object on the screen with the server. So this experient serves as a test to examine the speed between the server and client, also the bandwidth used to keep up the ajax request. What I found with my baby test is that with my current technique, moving an object asynchronously with server is NOT fast enough for a smooth experience. Yes it can be done but it is way too slow.
The setup:
A simple div with absolute position. I used Prototype for Ajax request.
The client:
Arrow buttons input from keyboard is bound into a function and an ajax request is sent to server with the TOP and LEFT coordinates of the target object and the direction of movement.
The server:
With the TOP and LEFT data from POST and the direction, I compute the new coordinate by add/ subtract the direction with a predefined speed. For now, I wrote a little PHP script to accomodate this feature on the server. After I have the new coordinates, I simply echo back and the client’s prototype library will take care of the rest.
What I found
In my localhost, the request is fast enough witouth any lag. On 1and1 server, where this blog is also hosted, the ajax move experiment becomes extremely jerky and laggy. The round trip request has taken its toll. There’s about roughly 0.5 to 1 second lag between each keystroke especially if I keep pressing an arrow key to make continuous requests. The bandwidth used is about 2 to 3 Kbyte/s for continuous round trip ajax request
Conclusion
Ajax can be used to request info dynamically from the server, but it is not suitable for “streaming” data or quick communication (low lag) between client/ server. A different communication method has be used. I highly suspect that COMET is capable of this type of client/server communication but I don’t know how to test this method yet.
Demo
AjaxMove demo can be found here. The code is tested to work with Firefox.
http://alexle.net/experiments/ajaxMove/test.php
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Subscribe in a reader. Enjoy reading my blog? Subscribe to my RSS to read new post whenever I publish something new.
Not working :(.
Js error