javascript - 如何获取当前打开给定网页的用户数量

Question

有没有一种简单有效的方法来获取打开给定网页的访问者数量？

最终目标是做到这一点:

1. 检查页面上有多少访问者，即谁在浏览器中打开了该页面。
2. 如果超过特定数字n，则显示一个按钮。按下按钮的前 x 位访问者将转到不同的页面。
3. 只要有超过 n 个访问者，该按钮就会持续显示。如果没有，该按钮就会消失。

这样做有什么技巧吗？长轮询？网络套接字？越简单越好。

Answer 1

使用 WebSocket 可以轻松完成此任务。下面是使用 Bristleback Server 编写的所需应用程序代码(假设在新用户连接时执行检查)。

@Component
public class CountUsersConnectionListeners implements ConnectionStateListener<DefaultUser> {

  private static final int MAGIC_MAXIMUM_NUMBER_OF_USERS = 2;

  private int numberOfCurrentlyConnected;

  @Autowired
  private ConnectionCountClientClass connectionCountClientClass;

  @Override
  public void userConnected(DefaultUser defaultUser) {
    if (numberOfCurrentlyConnected > MAGIC_MAXIMUM_NUMBER_OF_USERS) {
      connectionCountClientClass.showButtonToNewUser(defaultUser);
      numberOfCurrentlyConnected++;
      return;
    }

    numberOfCurrentlyConnected++;
    if (numberOfCurrentlyConnected > MAGIC_MAXIMUM_NUMBER_OF_USERS) {
      connectionCountClientClass.showButton(true);
    }
  }

  @Override
  public void userDisconnected(DefaultUser defaultUser) {
    if (numberOfCurrentlyConnected <= MAGIC_MAXIMUM_NUMBER_OF_USERS) {
      numberOfCurrentlyConnected--;
      return;
    }

    numberOfCurrentlyConnected--;
    if (numberOfCurrentlyConnected <= MAGIC_MAXIMUM_NUMBER_OF_USERS) {
      connectionCountClientClass.hideButton(true);
    }
  }
}

请注意，这只是一个原型(prototype)，我不关心同步，设置实际连接用户数的代码可以放在其他地方。

<小时/>

@ClientActionClass
@Component
public class ConnectionCountClientClass {

  @ClientAction
  public SendCondition showButton(boolean show) {
    return AllUsersCondition.getInstance(); // this will send a message to all connected users
  }

  @ClientAction
  public SendCondition hideButton(boolean hide) {
    return AllUsersCondition.getInstance(); // this will send a message to all connected users
  }

  @ClientAction
  public DefaultUser showButtonToNewUser(DefaultUser defaultUser) {
    return defaultUser; // this will send a message only to the user given as parameter
  }
}

<小时/>

客户端(仅提供额外的应用程序代码):

var sampleClientAction = {
  showButton: function() {
    alert("Show button!");
  },
  showButtonToNewUser: function() {
    alert("Show me button!");
  },
  hideButton: function() {
    alert("Hide button!");
  }
};

dataController.registerClientActionClass("ConnectionCountClientClass", sampleClientAction);

如果您有兴趣，我可以向您发送整个工作应用程序[需要 Maven]。 Jetty 或 Tomcat 可以用作 Web 应用程序容器。