使用 Javascript、PHP、PDO、CSS、html 显示谁在线/离线答案

【问题标题】：Showing who is online/offline using Javascript, PHP, PDO, CSS, html使用 Javascript、PHP、PDO、CSS、html 显示谁在线/离线
【发布时间】：2013-09-21 03:35:36
【问题描述】：

我不知道如何开始。我认为需要 JavaScript 或 PHP，或两者都需要执行我需要的此功能。

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

我根本没有编写任何 JavaScript 或 PHP，因为我不知道从哪里开始...，但是仅在这个小部分中就需要它，并且知道我需要它来使它工作.我所能做的就是提供我拥有的 html 和 CSS。我希望它至少每 15-30 秒执行一次登录/注销的扫描，只刷新这个小部分（在线 - 绿点或离线 - 灰点）而不是整个页面（我确定JavaScript 是最好的）当然可以通过在 session[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/

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

【问题讨论】：

标签： javascript php css pdo

【解决方案1】：

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

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

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

如果您想更高级，可以查看NodeJS 之类的内容，在Socket.IO 的帮助下，您可以实时跟踪用户。

【讨论】：

没有。 NodeJS 让您可以在 Javascript 中创建全栈应用程序。意思是，你用 Javascript 编写你的服务器部分，类似于你已经在 PHP 中这样做。您可以将 NodeJS 与 PHP 脚本结合使用。
有更简单的解决方案吗？我对javascript 和php 有点熟悉，但是当谈到AJAX 以及你推荐的NodeJS 和Socket.IO 时，我真的一点经验都没有。我要问的属于这个标准吗？好吧，我敢肯定，有一个主要的学习曲线吗？
我在回答中给出了两种可能的解决方案。你可以使用一点 Javascript 和 PHP，或者如果你想尝试一些新的东西，你可以尝试使用 NodeJS。鉴于您的要求，这是我建议您尝试的两件事。如果你想学习新东西，我建议使用 NodeJS。如果您需要尽快完成此操作，我建议您对 PHP 脚本进行简单的 AJAX 调用。
NodeJS 将是我想冒险进入的东西，但对于这个项目 - 我必须尽快让它运行。如果我使用备用 AJAX 和 PHP 而不是 Javascript 和 PHP 我将如何开始呢？我在AJAX 中没有任何经验，在PHP 中只有很少的经验……AJAX 会执行扫描并刷新类似于 javascript 的小部分（在线/离线）吗？如果是这样，我从哪里开始？
AJAX 你会在 Javascript 中执行。它只是一种在服务器上调用脚本来检索一些信息的方法。简单的谷歌搜索会帮助你。 SO上有很多与AJAX相关的问题。 PHP 脚本只需要查询数据库并询问最近是否见过某个用户。

【解决方案2】：

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

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

【讨论】：