如何使用Ajax显示在线用户

Question

我想在我的网站上实时显示所有在线用户。虽然不知道如何去做。在新用户登录后添加新用户并不难，但我还需要删除不再登录的用户。

任何想法如何做到这一点？我应该使用jQuery检查哪些用户已注销并从列表中将其删除吗？

Answer 1

您的问题将是人们在不注销的情况下离开，他们的会话将仍然存在多长时间，直到您设置了超时时间才可以收集他们的会话数据（实际上可能更长）

为了获得真正准确的登录者和访问站点的人数，您将需要每个客户端每隔几秒钟或几分钟向服务器发送一次“心跳”。在每个心跳触发器上，您都希望使在指定时间内未签入的所有用户过期。

心跳信号可能最好至少由用户名和时间戳组成，但可以包含您要跟踪的任何信息。

当客户端向服务器发送单曲时，请检查该用户名的现有记录，如果记录已经存在，则覆盖时间戳信息，否则添加新记录。后记会丢弃所有尚未签入的用户条目。最好使信号比到期更频繁地发生。每30秒发出一次信号，每分钟清理一次。

（编辑后，改变主意，最好按相同的顺序而不是分别进行操作）然后从活动表中返回当前登录的用户，这就像那样简单，SELECT * FROM table因为该表始终是干净的。

客户端：

这是客户端库的一个简单示例，用于处理触发心跳功能并捕获结果。

//Client-side parent variable declaration (simulated namespacing)
var Client = Client || {};
Client.Pulse = null; //Holds a pointer to the heartbeat timer (id)
/* If you needed to cancel the heartbeat processes you could
 * pass this variable to clearTimeout(). Calling Client.Heartbeat()
 * again would start the cycle back up.
 */

//Initial event that will kick off the chain when the DOM is ready
$(document).ready(function(){
  Client.Heartbeat(); //Initial call to the Heartbeat function
});//ready

/// Sends the heartbeat signal and retrieves the currently active user list
Client.Heartbeat = function(){
  var sUsername = 'SomeUser';
  /* Note: If you have an active session running on the server it would not be 
   * necessary to send the username since you could pull it on the backend 
   * script which would be more tamper-proof anyway. I'm just giving an
   * example of sending data to the server using the jQuery.ajax method
   * If you were storing the username to be sent from the client; this wouldn't 
   * be a good place to do it anyway
   * 
   * Remove the "data : {...}" line below to exclude sending information to the server
   * The "type : 'post'" line would not be necessary either 
   */

  $.ajax({ //Send the signal and recieve the information about active users back
    url : '/lib/server/Heartbeat.php',
    type : 'post',
    dataType : 'json',
    data : {Username : sUsername },
    success : function(jActiveUsers,sStatus,jqXHR){ 
      /* This is the callback function of the request, jActiveUsers will be the 
       * json object with the information you choose to send back to it
       */
      Client.RenderActiveUsers(jActiveUsers); //Call the display function
      //Trigger the next delayed call to Client.Heartbeat
      Client.Pulse = setTimeout(function(){
        Client.Heartbeat();
      },30000); //30 second delay before next trigger
    }//success
  });//$.ajax
}//Heartbeat

/// Processes the results sent by the server and draws them to the UI
Client.RenderActiveUsers = function(jActiveUsers){
  /* This is where you would get a handle whatever element(s) on the page
   * will be displaying the information about currently active users
   * and filling it with the list of users how ever you would wish to display it.
   */
}//RenderActiveUsers

因为您将setTimeout()在整个周期结束时处理异步回调调用，以重新开始该过程，这将是一种处理间隔的更干净的方式（如果您要使用）setInterval()并且服务器花费的时间比预期的要长，则可以看到客户端开始竞赛。setTimeout()在服务器端心跳处理器停止工作的情况下，在成功的回调中使用a
还可以使您优雅地失败。客户端也可以这样做，而不是继续尝试失败（如果您希望它继续尝试，您只需在失败的响应上添加一个重新触发）。

服务器端：

抱歉，我不熟悉Java作为后端服务，我将基于PHP的工作方式进行一些假设；因此我无法保证它会直接映射到您的环境。数据库示例将使用MySQL。代码示例将为伪编码PHP（ish）

在服务器端，您将需要一个新表来跟踪活动用户。您可能已经在跟踪他们在数据库中的登录时间，但这将与该系统分开（尽管您当然可以链接到该系统，以获取返回结构的更多用户详细信息）

该表将至少看起来像：

 ActiveUsers
 -----------------------------------------
 |   Field    |    Type     | NULL | Key |
 -----------------------------------------
 | Id         | int         |      | PRI |
 | Username   | varchar(xx) |      |     |
 | LastPulse  | datetime    |      |     |
 | FirstPulse | datetime    |      |     |
 -----------------------------------------

（推测） 我假设SessionsJava
和PHP一样，可以用来存储有关特定访问者的信息（例如其当前状态）。在PHP中，这是通过在客户端和服务器之间来回传递标识符来实现的，从而使服务器可以识别特定的客户端，并在后端为您存储与该会话相关的变量（例如，具有当前登录状态的布尔值用户名或一个字符串，用于在登录后保留其用户名。）

如果您可以使用此方法，那将是比在客户端存储此信息并允许客户端指示是否和谁登录的方式进行身份验证的更为安全的方法。在此假设它是…。

当客户端将心跳发送到服务器时，您可以从会话变量访问其登录状态和用户名（如果它们实际上已登录）以开始该过程。

if($LoggedIn && ($Username != null)){ //Session information

如果未登录，则将跳至列表检索部分，因为您无需为其添加或修改记录

检查他们是否在活动表中有记录

SELECT `Id` FROM `ActiveUsers` WHERE `Username` = '{$Username}' LIMIT 1

如果记录存在，则表示他们之前已经签入过，并且您想使用从第一个查询返回的Id值以新的时间戳更新记录。

UPDATE `ActiveUsers` SET `LastPulse` = NOW() WHERE `Id` = {$Id}

如果不存在任何记录，则您将要为此用户创建一个新记录

INSERT INTO `ActiveUsers` (`Username`,`LastPulse`,`FirstPulse`) VALUES ('{$Username}',NOW(),NOW())

接下来是该过程的维护阶段，在该阶段中，您要清理的所有未签入条目要设置为限制的时间（在本示例中为2分钟）

DELETE FROM `ActiveUsers` WHERE `LastPulse` < (NOW() - INTERVAL 2 MINUTE)

这将离开您的ActiveUsers表，因此仅存在活动用户的记录，您现在可以查询获取这些记录，以及您希望从此表和任何其他表链接到的其他信息

SELECT `Username`, UNIX_TIMESTAMP(`FirstPulse`) AS `FirstPulse` FROM `ActiveUsers` ORDER BY `FirstPulse` ASC

（在PHP中） 然后，您需要遍历结果集并构建一个用户数组，该数组将通过对ed
的调用json_encode()和print()ed与"application/json"标头值一起转换为JSON，以便jQuery可以正确处理它。当然，这在Java实现上会有所不同，但是
“创建数组，将其转换为JSON字符串并使用指定的适当标题打印出来” 的整个过程将是相同的。

理想情况下，对于任何类型的身份验证过程，您都希望使客户端保持 “哑巴”状态
。在此示例中，客户端仅通过询问活动用户的新列表，便盲目地与服务器签入并触发清理过期的用户。

如果100％准确的清单在高利用率的站点上是至关重要的任务，则在执行维护部分时可能需要锁定桌子。以确保在另一个线程处于检入阶段时不会查询用户列表。

（哇，这变成了Wall-O-Text）