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.

So far, all I can think of is setting a cookie for the user and, when the cookie is found on the next visit, an ajax call is made to update a table with their username, their status online and the time.

Now my actual question is, how can I reliably turn their status to off when they leave the website? The only thing I can think of is to set a predetermined amount of time of no user interaction and then set the status to off.

But what I really want is to keep the status on as long as they are on the site, with or without interaction, and only go to off when they leave the site.

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 = "<ul>";
foreach ($users as $user) {
  $output .= "<li>".$user["userName"]."</li>";
}
$output .= "</ul>";

print $output;

That would output the following HTML:

<ul>
  <li>Jonathan Sampson</li>
  <li>Paolo Bergantino</li>
  <li>John Skeet</li>
</ul>

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."

<div class="listBox"></div>

Hope this gets you going.