CODEWITHSUNDEEP
javascriptxmlhttprequest
micnil
micnil

Reputation: 4805

Maximum amount of simultaneous xhr requests?

I am making a small web app that allows the user to drag a slider to show different content. Each time the slider is moved, the client uses the HTML5 Geolocation to get its position and then sends a XMLHttpRequest to the server for new content.

The problem is if the user moves the slider a bit too many times and too fast, it causes errors.

code:

function update(){

    var xhr = new XMLHttpRequest();
    var url = "request_handler.php";
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
            var return_data = xhr.responseText;
            //doing stuff
        }
    }
    // since HTML5 Geolocation is a asynchronous function, and i have to make 
    // sure that i get the users clients position before i send the request, i  
    // pass the sendRequest function below as a callback function to the 
    // Geolocation function
    function sendRequest(latitude,longitude) {

        try{
            xhr.send("latitude=" + latitude + "&longitude=" + longitude);
            console.log("Success")
        }
        catch(err){
            console.log("Error message: %s",err);
        }        

    }
    //This function gets user position and then calls sendRequest if it was
    //Successfull
    Geoposition.updatePosition(sendRequest);
}
//EDIT:
var Geolocation = {
    sendRequestFunction: null,
    options: {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
    },
    success: function(pos) {
        if (sendRequestFunction) {
        sendRequestFunction(pos.coords.latitude, pos.coords.longitude);
        };
    },
    error: function(err) {
        console.warn('ERROR(' + err.code + '): ' + err.message);
    },
    updatePosition: function(callbackFunction) {
        sendRequestFunction = callbackFunction;
        navigator.geolocation.getCurrentPosition(Geolocation.success, Geolocation.error, Geolocation.options);
    },
};

So as you can see i have a try-catch around the send request function. These are the error messages i get in ff and chrome when i move the Slider to many times fast.

I am trying this on a Wampserver2 (it uses an Apache server).

So my question is really: Whats wrong? I read somewhere that browsers only allow a certain amount of xhr request simultaneously (around 6-7 if a remember correct). Although i can get this error if i drag the slider only 3-4 times rapidly, could this be the porblem anyway? Is there better approaches to this?

EDIT: Added the updatePosition() function. It is in the namespace that i call Geoposition.

EDIT 2: If you are here because of the title, this problem had nothing to do with any "maximum amount of simultaneous xhr request" that i suspected.

Upvotes: 0

Views: 994

Answers (1)

Bergi
Bergi

Reputation: 664970

Apart sendRequestFunction being an implicit global and not your local GeoLocation property, you must not use a free variable in the asynchronous updatePosition method. Subsequent calls will overwrite the previous value, and when later your getCurrentPosition callbacks are invoked then each of them will call the same sendRequestFunction. Which is fatal to your xhr object, as it does not like to be sent multiple times (that's just what the error messages say, the request is in a state where send() is invalid).

var Geolocation = {
    options: {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
    },
    error: function(err) {
        console.warn('ERROR(' + err.code + '): ' + err.message);
    },
    updatePosition: function(callbackFunction) {
        navigator.geolocation.getCurrentPosition(function(pos) {
            if (typeof callbackFunction == "function") {
                callbackFunction(pos.coords.latitude, pos.coords.longitude);
            }
        }, Geolocation.error, Geolocation.options);
    }
};

Also you may want to consider throttling your geolocalisation and ajax calls.

Upvotes: 1

Related Questions