jquery - 如何动态更新用户列表

Question

我正在尝试创建登录用户的显示列表。所以想象一下，在左侧面板上，我有一个登录人员列表。每当有新人登录时，该列表将立即更新并显示给所有其他人。

我很难找到这方面的教程，因为我不知道要搜索的正确短语。请给我一个建议。

Answer 1

这是一个相当广泛的问题，答案在很大程度上取决于您的环境。你网站的后端是 PHP 的吗？节点？导轨？等等。您如何存储登录用户列表？

一旦你弄清楚了，简短的回答是“使用 AJAX”，基本上你会想要定期轮询服务器端脚本，询问用户列表（脚本可能会从文件/数据库中读取）。jQuery 的$.get方法可以做到这一点。当列表更改时，您将重新呈现 HTML 列表。

如果您对此过程的步骤有更多疑问，请告诉我。

Answer 2

当用户登录时，必须实时通知所有登录的用户。

使用 html5，您可以使用 websockets。然而，在此之前，有几种不同的技术被称为彗星

最幼稚的实现是老式轮询，每个客户端每 X 秒使用 ajax 轮询一次服务器，询问所有登录用户的列表。同时，这可以用作心跳来验证用户是否仍然处于活动状态，因为某些用户可能没有使用注销链接注销并且只是关闭了选项卡。

上一步称为长轮询，其中不是每 X 秒轮询一次，而是发送一个 ajax 请求，并且服务器仅在发生某些事件时才响应（“有人登录”）。一旦客户端收到响应，它会立即发送另一个 ajax 请求以重新建立连接。

了解底层细节是值得的，但没有必要重新发明轮子。我使用名为pusher的服务。它还具有网络挂钩，可在连接终止后提醒您，这对于确定用户何时关闭选项卡而未注销很有用。

这些第三方服务如何运作？

他们要求您将 js 片段添加到您的 html 页面，该页面将与他们的服务器建立连接。如果浏览器支持，则使用 Web 套接字，否则可以使用几种回退方法之一，例如用于旧浏览器的 comet 或 flash。

当您希望发送信息时，您只需向服务发出一个 post 请求，然后该服务将通过已打开的连接向目标客户端发出警报。