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

Question

我想让每个帖子在作者上线时变为绿色。我已经尝试解决我的编码问题至少一周了!!!请帮帮我！

例如，如果有3个用户发布了某些内容：

并且user1登录，它将变为：

然后说user2同时登录：

现在，如果user2或user1注销，它将恢复为灰色。一切都是实时的 - 不需要刷新。我想这样做，以便当我打开网站时，我可以立即看到谁在线，而不是等待2秒（在这种情况下）看到实时更新一次发生。

我还希望能够为帖子添加动态链接。有没有办法在div之前插入标记，这取决于用户是否登录？

我的尝试：

更新

Status.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);
});

CSS样式

.status{ background: grey; }

一切似乎都开始起作用，但我无法让在线用户变绿。我试着提醒阵列，我得到＆＃34; -1＆＃34;因某种原因而惊动。我该如何解决这个问题？

我试着尽可能清楚！非常感谢所有帮助！

Answer 1

在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);

然后在Main Page移动你的<script>在循环之外，所以它不会在每个post循环中创建它。然后更改它，以便循环返回的数组 -

<强>更新

<script type="text/javascript">    
   $(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
                      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，因此它在数组中 - ＆gt; if($.inArray(userid, data) !== -1)。为了更容易，您可以将user添加到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',
           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
                      var userid = $(this).attr('id'); // get the user#
                      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/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',
           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
                      var userid = $(this).attr('id'); // get the user#
                      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'});
               }

           }
        });
    }

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

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

Answer 2

You can get the online users by keeping the track of the logged in and logged out time of all the users.And if the logged in time of the user is after the logged out time that mean that the user in online