I am writing a Web chat application. It uses a long polling mechanism. Basically you send a request to the server, and the server holds it until there is data to send back. Then it responds, and then the client sends another request to the server. And the cycle repeats.
However, there is a problem - I have no error checking in place. What if the connection drops? Let's say I'm chatting with a friend and then my Wifi drops. Internet's down and let's say it goes back up a minute later. But then the long-polling mechanism has already died and with no polling, I have to refresh the page.
How can I implement an error checking mechanism to solve the problem of unsuccessful or dropped network connections? I am using jQuery to facilitate the Ajax requests if that helps.
*EDIT: Here is my JS code for the polling mechanism: *
// Polls the server for more data, basically a regular encrypted request
Minte.Network.poll = function()
{
// If client is not connected, do not send poll requests
if (!Minte.Client.connected)
return;
Minte.Network.request({ "action" : "poll"}, function(data) {
// If a client has disconnected and a poll returns afterwards, do not process it
if (!Minte.Client.connected)
return;
Minte.Network.lastPoll = Minte.clock.getTime();
Minte.Processor.process(data);
Minte.Network.poll();
});
};
// Send a regular, routine encrypted request
Minte.Network.request = function(data, callback)
{
$.post(SERVER_URI, data, function(data, textStatus, jqXHR) {
data = JSON.parse(data);
callback(data);
});
};
First off, you can hook the error handling of the ajax call. If it fails, you should eventually get an error condition back. Since I haven't seen this defined anywhere, you'd probably have to work out a way to test how all the different browsers respond when the connection is lost in different ways to see if this is something you could use exclusively. In any case, it won't hurt to hook the ajax failure response. You will likely also want to implement your own timeout so that if you haven't heard back from the server in xx time, then there must be some sort of problem.
Second off, if you want quicker feedback and more likely to be consistent even in different browsers, then you can have your server return a heartbeat. So, ever xx seconds of inactivity, your server would return a heartbeat response. The client would wait, xx + yy seconds (yy is some extra to allow for roundtrip time and any slight lag in the server response) and if it didn't receive either an actual datagram back from the server or a heartbeat response, then it would assume the connection has died. If it receives a heartbeat, it just makes another request again. You can set the heartbeat to whatever interval you want, though obviously short times are more taxing on the server infrastructure.
FYI, jQuery has a global ajax error handler described here: http://api.jquery.com/ajaxError#callback and the jQuery ajax call itself allow you to specify a timeout and an error handler.
In pseudo code:
$.ajax({
url: 'xxxx',
success: function(data, textStatus, jqXHR) {
if (data is heartbeat) start a new ajax connection to ask again
if (data has returned data in it) process it
};
error: function(jqXHR, textStatus, errorThrown) {
some sort of connection error has happened
};
timeout: 2 * 60 * 1000; // 2 minutes
});
Related
In my web application, I am trying to handle time out situations when calling a REST API. Here is my code which calls the API using jQuery ajax.
$.ajax({
type: "POST",
url: endpoint,
data: payload,
dataType: dataType,
timeout: 0,
success: successHandler,
error: failureHandler
});
The success and failure handlers are shown below.
function successHandler(data) {
//Got the data
}
function failureHandler(xhr, textStatus, thrownError) {
if(xhr.status==404) {
console.log('Page not found');
} else if(xhr.status==408) {
console.log('request timed out at server. You may want to retry') ;
}
}
If the timeout happens at the server, it is giving status 408. But sometimes, due network connectivity problems, the client (browser) itself is getting timed out because it is not able to connect to the service in specified time. I guess this is the browser behavior. What will be xhr.status and textStatus if the request gets timed out by the browser? How to handle this scenario?
[Edit] I found some explanation in Set timeout for ajax (jQuery). This explains how we can set timeout in the code. But my question is that I don't want to set timeout like this. Check the code in ajax request, I set timeout: 0 which means, there is no timeout and I am going to wait till I get the response from the server. Meanwhile, the browser may kill this request because of it's global timeout setting. I am looking for a solution which can handle this.
This looks like it is a very similar question to this post. Good luck!
How to detect timeout on an AJAX (XmlHttpRequest) call in the browser?
I have ajax call where I process large data and then reload the page in ajax success. Ajax call is
$.ajax({
type:'POST',
cache:false,
async:false,
url: 'URL',
data: "",
timeout:0,
beforeSend:function(msgg){
$('#loading').show();
},
success: function(data){
if(data == "success")
{
setTimeout(function(){
$('#loading').hide();
window.location.reload();
},5000);
}
}
});
but it gets 504 GATEWAY_TIMEOUT and ajax call never comes in success. I need manual refresh.
504 GATEWAY_TIMEOUT errors normally occur when your API Gateway URL is not responsive. It could be some kind of internal Gateway error.
Here are some steps to troubleshoot:
Use a proxy like Postman to make the same exact request and see what the response is
Make sure your path is correct
If there are other requests that you make to the same gateway URL, maybe a GET request, try making those calls manually or using your code, to make sure the gateway is working fine
If you have access to the Gateway, restart it (this is possible if you have Microservices architecture, and Dockerisation etc)
The recommendation is to make more short calls to check status / retrieve data.
Here is the alternative if the above is not possible:
Notice: This solution is not recommended for production use or high traffic scenarios, make sure this action is performed on an isolated server.
If using Apache Web Server 2.4, the TimeOut directive is by default set to 60 seconds.
For more details see this article.
The web server will only keep the connection open for 60 seconds regardless the max_execution_time
While the max_execution_time in php.ini sets the execution time of php, the Apache TimeOut directive sets the maximum connection time.
Example:
if php max_execution_time is 120 sec, but TimeOut is 30 sec - you will get a 504 error
if php max_execution_time is 120 sec, but TimeOut is 300 sec - your script will execute for max 120 seconds, but your connection can stay alive for 300 seconds
If you didn't set any response code from php, PHP returns 200 if everything is OK, 500 if error occured.
When you get an unexpected HTTP Response code it's good to keep an eye on the web server too.
I think browser can not hold for long ajax call so I used ajax recall and processed data in parts. It solved problem.
Found working solution posted by #david-hoerster
As he said, If your error event handler takes the three arguments (XMLHttpRequest, textstatus, and message) when a timeout happens, the status arg will be 'timeout'
$.ajax({
url: "/ajax_json_echo/",
type: "GET",
dataType: "json",
timeout: 1000,
success: function(response) { alert(response); },
error: function(xmlhttprequest, textstatus, message) {
if(textstatus==="timeout") {
alert("got timeout");
} else {
alert(textstatus);
}
}
});
With jsFiddle, you can test ajax calls -- it will wait 2 seconds before responding. I put the timeout set at 1 second, so it should error out and pass back a textstatus of 'timeout' to the error handler.
I am using jQuery Mobile to create a webapp to look at and update a CRM type system.
The mobile app sends update using jQuery.get and jQuery.post and they work fine when network connection is available.
How should I code or what can I use to queue the jQuery.get and jQuery.post calls when the network connection is not available so they are sent when it becomes available again.
Edit: ah poo, i just noticed you said 'jQuery Mobile', I initially read that as jquery for mobile lol. Ummm, this'll probably only work as long as jQM supports ajax the same as normal jquery
I had an idea with a secondary ajax request, but you shouldn't need that. Just set up your AJAX like this, and give it a timeout. If it takes > 4 (should be enough for a broadband connection, but some phones may need ~10-15) seconds for the server to respond, it'll just try the ajax request again up to retryLimit, which can be set, then changed later as well after the 50 times is up (i.e. should it send when the program is idle and has no data perhaps?). When it connects, it'll go to the success function, which will then send the data to the server.
So it'd be like:
$.ajax({
type: 'GET',
timeout: 4000,
tryCount : 0,
retryLimit: 50,
success:function(data) {
sendSavedData();
}
error: function(xhr, textStatus, errorThrown) {
if(textStatus == 'timeout') {
this.tryCount++;
if(this.tryCount <= this.retryLimit) {
$.ajax(this);
return;
}
var check = confirm('We have tried ' + this.retryLimit + ' times to do this and the server has not responded. Do you want to try again?');
if(check) {
this.timeout = 200000;
$.ajax(this);
return;
} else {
return;
}
}
}
});
I've got an Ajax app I would like to add sessions and logins to.
Currently the app uses jQuery get shorthand to send a request
that.ajaxRequest = $.get(query_string, function(data, textStatus, xhr) {
// do somthing with data
});
I have a system on the server that throws an error message if the session has expired.
On the client I know I can deal with this using the following:
that.ajaxRequest = $.get(query_string, function(data, textStatus, xhr) {
if (data == "E_TIMEOUT") {
// redirect to login
} else {
// do something
}
});
However I would prefer not to have to write the same timeout code for every $.get - there are a bunch of them throughout the app.
Is there a way to monitor the result of a request and take action if necessary, without rewriting all of my $.get statements?
Thanks,
You can use $.ajaxSetup() for this:
$.ajaxSetup({
complete: function (xhr) {
if (xhr.getResponseHeader('E_TIMEOUT') == "1") {
//redirect to login
}
}
});
This approach is slightly different, it uses response headers which you can get without parsing data an extra time every request (that is possible, though not documented and subject to break), which you would have to do otherwise, in a global situation.
On the server-side where you're sending E_TIMEOUT for the response, just change it to add a header as well, E_TIMEOUT=1 (or whatever header you want). I actually put this header on my login page only, the timeouts redirect via a 302 (which XmlHttpRequest transparently follows), so if the user timeouts and the AJAX request actually ended up at the login page, I do a location.reload() to reflect this on the page. That's just another option if you go that route, it looks like this:
$.ajaxSetup({
complete: function (xhr) {
if (xhr.getResponseHeader('LoginPage') == "1") {
location.reload();
}
}
});
Without knowing what server platform you're using I can't say how to set headers, but it's pretty easy on every common platform.
You should use firefox and download a program called 'FireBug'. This will show you all the requests being sent out, and the response that comes back from the AJAX call. It is action packed with goodness & web dev tools.
My project requires polling a certain URL for a JSON response, using AJAX. The first AJAX request that I make alerts the server that I want some JSON content, and it begins building and cacheing a response, sending me back { "status" : "pending" } for each subsequent AJAX request until the JSON is ready. At that point, the response changes to JSON that contains content that I can parse and display in the document, which I want to do as soon as the URL returns anything other than { "status" : "pending" }.
I've set up a polling function that works as expected to repeatedly request JSON from the URL. However, the problem is that it continues to get the response { "status" : "pending" } even when I navigation directly to the URL and can see that the full JSON response is ready and is being served. For some reason, my polling function still gets { "status" : "pending" }.
When I refresh the page that contains the polling code, it generally works on the first request - i.e. it gets the full JSON response. That leads me to believe that it's some sort of caching issue, but I'm not sure where or why. Shouldn't each AJAX request get a fresh response, or is this something I can set up in my $.ajax() call?
Here's the code I'm using now:
function ajax_poll() {
$.ajax({
url: JSON_URL, // JSON_URL is a string containing the URL to poll
dataType: 'json',
error: function(xhr_data) {
display_error();
},
success: function(xhr_data) {
if (xhr_data.status == 'pending') {
poll++; // increment poll counter // poll is a global variable to track the number of requests made
if (poll < POLLS) { // POLLS is a global variable to set the maximum number of requests
setTimeout(function() { ajax_poll(); }, INTERVAL); // wait INTERVAL before another AJAX request
} else {
display_error();
}
} else {
success(xhr_data);
}
},
contentType: 'application/json'
});
}
success() is the function that displays the JSON content (i.e. what I'm waiting for to become available while polling) on the page.
One thing worth noting is that while testing the code locally, polling a local .json test file, I can change the file's contents from { "status" : "pending" } to a response containing content like I'm looking for, save the file between polling instances, and on the next poll, my code sees the new content and works as expected. It just isn't working in the staging environment.
You may try adding the "cache: false" option.
Just to describe a potential reason why this is occurring: you are probably issuing GET AJAX requests, but you are not differentiating the URL in any way (no extra data in the query string, for example).
The browser sees this request and doesn't even bother to hit the server with the full request (it probably issues conditional 304 GET requests instead). The end result of all of this is that you're not seeing the activity you expect to see.
A simple way to resolve this issue is to not cache the results of the AJAX request or send a POST request. Affecting cache options is covered in the other posts. The problem with the POST approach is that you are not saving anything by your actions, and so you are expressing your intentions better with a GET request.