Tuesday 3 January 2012

How to track online status of a user in my website like facebook

I came across this when i was developing 1 of my social website aFriend.in.

I found out a very simple solution using jQuery or Javascript
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></div> 

No comments:

Post a Comment