0

我被困在如何开始这个问题上。我认为需要 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/

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

4

2 回答 2

1

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

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

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

如果你想更高级，你可以研究 NodeJS 之类的东西，它在 Socket.IO的帮助下可以实时跟踪用户。

于 2013-09-16T21:10:28.370 回答
0

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

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

于 2021-12-11T23:40:42.207 回答