How to Track the Online Status of Users of my WebSite?

Question

I want to track users that are online at the moment.

The definition of being online is when they are on the index page of the website which has the chat function.

Answer 1

Full Solution. Start-to-finish.

If you only want this working on the index.php page, you could send updates to the server asynchronously (AJAX-style) alerting the server that $_SESSION["userid"] is still online.

setInterval("update()", 10000); // Update every 10 seconds

function update() {
  $.post("update.php"); // Sends request to update.php
}

Your update.php file would have a bit of code like this:

session_start();
if ($_SESSION["userid"])
  updateUserStatus($_SESSION["userid"]);

This all assumes that you store your userid as a session-variable when users login to your website. The updateUserStatus() function is just a simple query, like the following:

UPDATE users 
SET lastActiveTime = NOW()
WHERE userid = $userid

So that takes care of your storage. Now to retrieve the list of users who are "online." For this, you'll want another jQuery-call, and another setInterval() call:

setInterval("getList()", 10000) // Get users-online every 10 seconds

function getList() {
  $.post("getList.php", function(list) {
    $("listBox").html(list);
  });
}

This function requests a bit of HTML form the server every 10 seconds. The getList.php page would look like this:

session_start();
if (!$_SESSION["userid"])
  die; // Don't give the list to anybody not logged in

$users = getOnlineUsers(); /* Gets all users with lastActiveTime within the
                              last 1 minute */

$output = "
";
foreach ($users as $user) {
  $output .= "
".$user["userName"]."
";
}
$output .= "
";

print $output;

That would output the following HTML:

  
Jonathan Sampson
  
Paolo Bergantino
  
John Skeet

That list is included in your jQuery variable named "list." Look back up into our last jQuery block and you'll see it there.

jQuery will take this list, and place it within a div having the classname of "listBox."

Hope this gets you going.