php – 使用实时更新将在线用户显示为绿色和离线灰色

header('Content-Type: application/json');
$array = array();

$res = mysql_query("SELECT * FROM `users` WHERE `status` = 1");
if(mysql_num_rows($res) > 0){
    while($row = mysql_fetch_assoc($res)){  
        $array[] = $row['user_id'];  // this adds each online user id to the array         
    }
}
echo json_encode($array);

$(document).ready(function() {                               
    setInterval(function(){
        $.ajax({
            url: 'status.php',dataType: "json",type: 'GET',success: function(data) {
                if (data.length > 0){   // if at least 1 is online
                    $('.status').each(function(){   // loop through each of the user posts                      
                        if($.inArray(data) !== -1){     // if userid in the returned data array,set to online
                            $(this).css({background: 'green'});
                      //add a link here  
                        } else{  // if not,set to offline
                            $(this).css({background: 'grey'});
                         alert($.inArray(data)); 
                        }
                    });
                } else {    // if no one is online,set all to offline
                    $('.status').css({background: 'grey'});
                }           
            }
        });
    },2000);
});

.status{ background: grey; }

在Status.php中,您希望返回一个数组,而不仅仅是1个用户状态.此外,由于您只选择在线用户,因此您只需要他们的ID.所以你可以做$array [] = $row [‘user_id’];

header('Content-Type: application/json');
$array = array();

$res = mysql_query("SELECT * FROM `posts` WHERE status=1");
if(mysql_num_rows($res) > 0){
    while($row = mysql_fetch_assoc($res)){  
        $array[] = $row['user_id'];  // this adds each online user id to the array         
    }
}
echo json_encode($array);

然后在您的主页面中移动您的< script>在循环之外,所以它不会在每个post循环上创建它.然后更改它,以便循环返回的数组 –

更新

<script type="text/javascript">    
   $(document).ready(function() {                               
     setInterval(function(){
      $.ajax({
           url: 'status.php',success: function(data) {
               if (data.length > 0){  // if at least 1 is online
                  $('.status').each(function(){  // loop through each of the user posts
                      var userid = parseInt($(this).attr('id').replace('user','')); // get just the userid #
                      if($.inArray(userid,data) !== -1){  // if userid # in the returned data array set to online
                           $(this).css({background: 'green'});  
                      } else{  // else if userid # not in the returned data array set to offline
                           $(this).css({background: 'grey'});  
                      }
                  });
               } 
               else { // if no one is online,set all to offline
                   $('.status').css({background: 'grey'});
               }

           }
        });
    },2000); //2s just for testing. Set to 15s when code fully works.
   });
 </script>

这是一个关于JSFiddle – http://jsfiddle.net/f5xkZ/2/的例子

更新2

$.inArray()是一个jQuery函数,它检查值是否在数组中.如果在数组中它将返回值(0,1,2等)的数组键,如果不在数组中,它将返回-1.这就是为什么你检查它看到它不返回-1,因此它在数组中 – > if($.inArray(userid,data)！== -1).为了更容易,您可以将用户添加到php中的数组值

while($row = mysql_fetch_assoc($res)){
      $array[] = 'user'.$row['user_id'];
}

然后改变

var userid = parseInt($(this).attr('id').replace('user',''));

只是

var userid = $(this).attr('id');

所以现在脚本看起来像

<script type="text/javascript">    
   $(document).ready(function() {                               
     setInterval(function(){
      $.ajax({
           url: 'status.php',success: function(data) {
               if (data.length > 0){  // if at least 1 is online
                  $('.status').each(function(){  // loop through each of the user posts
                      var userid = $(this).attr('id'); // get the user#
                      if($.inArray(userid,2000); //2s just for testing. Set to 15s when code fully works.
   });
 </script>

这是一个更新的jsFiddle – http://jsfiddle.net/f5xkZ/3/

更新3

要使它立即显示,而不是等待第一个间隔,将ajax调用放在一个函数中,在页面上调用该函数就绪,然后再在setInterval()中调用

<script type="text/javascript">    
   $(document).ready(function() {   

     // place ajax call in function that you will call on document ready,and in setInterval every 20 sec                            
     function check_online_status(){
      $.ajax({
           url: 'status.php',set all to offline
                   $('.status').css({background: 'grey'});
               }

           }
        });
    }

    check_online_status(); // call the function on document ready

    setInterval(function(){check_online_status()},20000); // call the function every 20 sec
   });
 </script>