显示谁在线/离线使用Javascript，PHP，PDO，CSS，html

Showing who is online/offline using Javascript, PHP, PDO, CSS, html

本文关键字：PHP PDO CSS html Javascript 在线 离线 显示      更新时间：2023-09-26

我被困在如何开始这个。我认为要么需要JavaScript，要么需要PHP，或者两者都需要执行我需要的这个功能。

我在一个页面上有一个成员

个人资料列表，在每个成员名称旁边，我目前有一个仅使用 CSS 和 html 的占位符，应该显示登录的成员是否在线（绿点）或如果成员已注销，它显示他们处于离线状态（灰点）。

我根本没有编写任何JavaScript或PHP，因为我不知道从哪里开始......，但是对于这一小段来说，它只是需要的，并且知道这是我需要让它工作的东西。 我所能做的就是提供我拥有的html和CSS。我希望它至少每 15-30 秒扫描一次登录/注销者扫描，只刷新这一小部分（在线 - 绿点或离线 - 灰点）而不是整个页面（我确信 JavaScript 最适合这个），当然，通过对会话[ID]运行查询来查看成员是否实际上在线/离线（我确信 PHP/PDO 是最佳实践）。 谁能帮助我从我拥有的小CSS和HTML中引导我朝着正确的方向前进？

.HTML：

<div id="profile">
    <img src="images/ImagePlacedHere.jpg" width="80" height="80" style="margin: 4px 5px; float: left;" />
    <h2>Jason <online title="Online" /></h2>
</div>
<div id="profile">
    <img src="images/ImagePlacedHere.jpg" width="80" height="80" style="margin: 4px 5px; float: left;" />
    <h2>Nick <offline title="Offline" /></h2>
</div>

.CSS：

#profile {
  width: 300px;
  height: 90px;
  padding: 0;
  margin: 10px 0 0 8px;
  background: #222;
  border: 2px solid #444;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
    box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
  float: left;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
  position: relative;
  top: -10px;
  left: -3px;
}
#profile:hover {
  background: rgba(255, 255, 255, 0.05);
    -moz-box-shadow: 0 0 0 0, inset 0 0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: 0 0 0 0, inset 0 0.3em 0.9em 0.3em #000;
    box-shadow: 0 0 0 0, inset 0 0.3em 0.9em 0.3em #000;
}
#profile h2 {
  width: 195px;
  height: 22px;
  padding: 8px 0 1px 0;
  margin: 0;
  border-bottom: 1px solid #444;
  float: left;
  color: #B45F04;
  font: 18px Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-variant: small-caps;
  text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
  filter: progid:DXImageTransform.Microsoft.Shadow(direction=315,strength=2,color=000000);
}
#profile h2 online {
  width: 15px;
  height: 15px;
  padding: 0;
  margin: 0;
  background: #009D0D;
  border: 2px solid #444;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0 4px 1px -1px #000, inset 0 -1px 4px 1px #000;
    -webkit-box-shadow: 0 4px 1px -1px #000, inset 0 -1px 4px 1px #000;
    box-shadow: 0 4px 1px -1px #000, inset 0 -1px 4px 1px #000;
  float: right;
}
#profile h2 offline {
  width: 15px;
  height: 15px;
  padding: 0;
  margin: 0;
  background: #222;
  border: 2px solid #444;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0 4px 1px -1px #000, inset 0 -1px 4px 1px #000;
    -webkit-box-shadow: 0 4px 1px -1px #000, inset 0 -1px 4px 1px #000;
    box-shadow: 0 4px 1px -1px #000, inset 0 -1px 4px 1px #000;
  float: right;
}

这是我所拥有的演示：http://jsfiddle.net/tZpk6/

如果需要更多信息，我也许能够提供更多（可能）...

您将需要使用 AJAX（我建议为此使用 jQuery，它隐藏了很多样板代码）每 X 秒查询一次服务器。

您的服务器上将有一个查询数据库的脚本，询问用户是否在线。您将需要跟踪用户最后一次出现的时间，并确定给定用户的页面展示间隔时间足够长，以决定他们何时离线（IE 5 分钟）。

由此，你可以从你的PHP脚本返回一个真/假的响应，并相应地更新你的绿/灰点。

如果你想变得更高级，你可以研究像NodeJS这样的东西，在 Socket.IO 的帮助下，你可以实时跟踪用户。

它与客户端Javascript无关。它与HTML无关。如果这些还不明显，那么您还有很长的路要走。你确实在 9 年前问过这个问题 nealry - 也许答案现在更有意义（不知道为什么堆栈溢出把它推到了首页）。

您需要在应用程序后端的会话管理中实现这一点。这也意味着替换您决定在其上构建此平台的任何平台提供的大部分会话管理代码。扫描当前打开的会话以查看哪些处于活动状态是一个相当明显的解决方案 - 但是如果您的会话数据很大，则可能会很快变得非常慢。您可以通过将检查与用户 HTTP 访问分离来减轻影响，但就我个人而言，我会在会话处理程序之上放置一个装饰器，并将活动用户列表作为数据库中的单独数据存储进行维护。您需要检查数据的创建/上次更新时间 - 大多数基于 Web 的会话管理器使用基于不活动的垃圾收集模型来删除旧会话。

相关文章：