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

2023-09-10 16:32:51 作者:亘古的月光

我想每个岗位变成绿色时,它的作者上线。我试图解决我的编码问题,至少现在一个星期!请帮助我!

I want to get each post to turn green when its author goes online. I have tried to solve my coding problem for at least a week now!!! Please help me out!

例如,如果有3个用户谁张贴的内容:

For example, if there are 3 users who posted something:

和中,它将成为用户1日志:

And user1 logs in, it will become:

接着说,在和user2的日志在同一时间:

Then say user2 logs in as well at the same time:

现在如果用户2或用户1注销,它可以追溯到灰色。一切都是实时 - 无需刷新。我想使它所以,当我打开网页,我可以马上看到谁在线,而不是等待2秒(在这种情况下)看到一个实时更新一蹴而就。

Now if user2 or user1 logs out, it goes back to grey. Everything is realtime - no refresh needed. I would like to make it so that when I open the website, I can see right away who is online and not wait the 2 seconds (in this case) to see a realtime update happen all at once.

我也希望能够增加一个动态链接的帖子。有没有一种方法的股利,将不同,这取决于用户是否登录或不前,插入标记?

I also want to be able to add a dynamic link to the posts. Is there a way to insert tag before the div that will be different depending if the user is logged in or not?

我的尝试:

更新:

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; }

一切似乎开始工作,但我不能让在线用户去绿色。我试图提醒数组,我得到-1惊动出于某种原因。我该如何解决呢?

Everything seems to start working but I cannot get the online user to go green. I tried alerting the array and I get "-1" alerted for some reason. How can I fix that?

我试图将尽可能明确!所有的帮助是极大的AP preciated!

推荐答案

Status.php 要返回一个数组,而不是1的用户状态。此外,由于您只选择了在线用户,你只需要自己的身份证。所以,你可以做 $数组[] = $行['USER_ID'];

In Status.php you want to return an array, not just 1 users status. Also, since you are only selecting the online users, you just need their id. So you can just do $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);

然后在你的主页移动你的<脚本> 外循环,所以它不会创建它每个岗位循环。然后,因此它遍历返回的数组改变它 -

Then in your Main Page move your <script> outside the loop, so it does not create it on each post loop. Then change it so it loops through the returned array -

更新

<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/

Here is an example on JSFiddle - http://jsfiddle.net/f5xkZ/2/

更新2

$。inArray() 是一个jQuery函数来检查,看看是否该值是在一个数组。如果数组中它会返回阵列​​密钥值(0,1,2等),并且如果不是数组中它会返回 1 。所以这就是为什么你检查一下看它,它不返回 1 ,因此它在阵列中 - > 如果($ inArray(用户ID。 ,数据)!== -1)。为了方便,你可以在用户添加到阵列中值在PHP

$.inArray() is a jQuery function that checks to see if the value is in an array. If in the array it will return the array key for the value (0,1,2,etc), and if not in the array it will return -1. So that is why you check it see it it does not return -1, therefore it is in the array -> if($.inArray(userid, data) !== -1). To make it easier, you could add the user to the array value in 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');

所以,现在的剧本看起来像

So now the script looks like

<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/

Here is an updated jsFiddle - http://jsfiddle.net/f5xkZ/3/

更新3

要使它立即显示,而不是等待第一个时间间隔,将Ajax调用的函数,再次调用页面上的功能做好准备,然后在的setInterval()

To make it show immediately, and not wait for the 1st interval, place the ajax call in a function, call the function on page ready and then again in the 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>