How to indicate if users are online on client-side

Question

I am working on a website that is much like an online exam, and I want to devise a way so that I can indicate to the users that currently whether they are connected or disconnected to my servers. For this, I am constantly pinging an empty file on my server to know whether the connection is available. The code looks like this -

$(document).ready(function(){
//Defining the function
 var req = function () {
    $.ajax({
        url : 'ping.php',
        error: function(){$("#circle").css("background","red");},
        complete : function () {
            $("#circle").css("background","green");
            req();
        }
    });
};

//Calling the function
req();

//Rest of my code

});

Now my understanding is that as long as the call completes, the circle will be green, and if an error occurs, it will turn red, and the Ajax calls will stop. My question is as follows:

1. Is there any 'better' way to do this? For example, how does Google or Facebook mark out their online users?

2. Will this recursive Ajax Call bring down/ slow down my server in any way?

Note: It is not actually 'my' server. I do not have administrative rights, so that is a major concern here.

Please help me out here. Thanks!

Answer 1

1) You should throttle your pings with a timeout. This will reduce load on your server. This can be done with a setTimeout.

2) You should only set the circle to green in success. Complete fires on both success and error so you will always see green in your code.

$(document).ready(function(){
//Defining the function
 var req = function () {
    $.ajax({
        url : 'ping.php',
        success : function(){$("#circle").css("background","green");},
        error: function(){$("#circle").css("background","red");},
        complete : function () {
            setTimeout(req, 5000);
        }
    });
};

//Calling the function
req();

//Rest of my code

});

As an additional bit of trivia your code is not technically recursive as the subsequent calls are occurring in the next event on the event loop. Which is to say the prior call to req actually returns before the next call to req() is made. You will not be endlessly putting calls on the stack with your code as you would if this were a traditional recursive call.