Multiple client synchronization

Question

The problem im facing is: I have N IPads which can trigger an event. How to know on server side who did trigger the event first. Languages used for server side is PHP and for client side JavaScript (JQuery). The biggest problem is latency, so simply sending AJAX polling would not work, since i could press button before j but server could get j request before i due to latency. Also saving press time is no optimal since IPads are not synchronized to milliseconds or smaller units. Maybe there is some kind a protocol, which deals with this from which I could get some ideas?

Answer 1

here are 2 methods you can use to check latency.

then you can calculate the user's request arrival time

actual time of request = request arrival time - latency

request arrival time must be server time (when the request arrives on the server) side so we don't need to sync units. but the latency data must come from client along with the request data. you must create a client-side script to poll and calculate average latency times.

---

the first method is taken from a question here in stackoverflow. this one uses ajax. this is the most accurate i have ever searched, with less than 10ms deviation from actual. what it does is it calls (via ajax) a page of your server (the "/" url in the example is your web root)

• advantage: we use jQuery ajax .success() which fires an event after the reply is received but before loading the reply data (thus request size doesn't matter)

• disadvantage: ajax does not cross-domain (without aid). but if you have your own server, no problems.

---

the second one is taken from here and i modified it a bit. this originally was created as a server tester to test if the server is still there.

• advantages: cross-domain (we use img = new Image() "image preloader" method)

• disadvantage: the internet speed. payload size (in this case, an image) and internet speed will matter since we only use .onLoad() which fires after the content has loaded.

there will be a deviation of about 200-400ms on this one, depending on the image size.

//this is a static class. values are preserved. do resets before and after use.
var ping = {

    //the sample image. make it as small as possible like 1 x 1 px black and white. 
    //we are only testing ping, not download times
    //replace with your own image on your server since this link will die soon
    picture: "http://205.196.122.17/vh8cvmdtgfsg/8nsd22kphe1fz5w/spacer.bmp",

    //placeholder for test subject
    pictureFrame: null,

    //timer
    timer: null,

    reset: function(){
        //clear timeouts and timer
        clearTimeout(ping.timer);
        ping.timer = null;

        //clear the picture frame
        ping.pictureFrame = null;
    },

    //start ping function
    init: function() {

        //reset
        ping.reset();

        //get time before request
        var preSess = new Date();
        var preTime = preSess.getTime();

        //append current timestamp so request won't be from cache
        var pictureUri = ping.picture + "?time=" + preTime; 

        //create placeholder    
        ping.pictureFrame = new Image();
        ping.pictureFrame.onload = function() {

            //get time after load
            var postSess = new Date();
        var postTime = postSess.getTime();
            var requestTime = postTime - preTime;

            alert("Ping took "+requestTime+"ms");

            //reset
        ping.reset();
        };

        //triggers loading
        ping.pictureFrame.src = pictureUri;

        //set maximum timeout (in ms) before we declare domain not there
        ping.timer = setTimeout("ping.failed()", 60000);
    },

    //time-out reached
    failed: function() {
        //reset
        ping.reset();

        //alert what happened
        alert("Ping took too long");
    }
};

ping.init();