Question

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); 
    }); 
}; 

Answer 1

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
});