使用javascript、php、pdo、css和html显示在线/离线用户

我被困在如何开始这项工作上……我认为要么需要javascript，要么需要php，要么两者都需要来执行我需要的功能

我在一个页面上有一个成员配置文件列表，在每个成员名称旁边，我当前有一个占位符，仅使用css和html，该占位符应显示登录的成员是否在线（绿点），或者如果成员注销，则显示他们离线（灰点）。我根本没有编写任何javascript或php，因为我不知道从哪里开始…，但这仅仅是这个小部分需要的，我知道这是我需要让它工作的东西。我所能做的就是提供我所拥有的html和css。我希望它至少每隔15-30秒对登录/注销的用户进行一次扫描，只刷新这个小部分（在线-绿点或离线-灰点），而不是整个页面（我相信javascript最适合这样做），当然，通过在会话[ID]上运行查询来查看成员是否实际上在线/离线（我相信php/pdo是最佳实践）。有人能帮我从我的css和html中找到正确的方向吗

HTML:

以下是我的演示：

---

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

您将需要使用AJAX（我建议使用jQuery，它隐藏了大量的锅炉板代码）每

X

秒查询一次服务器

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

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

---

如果你想获得更高的水平，你可以研究一些类似的东西，借助这些东西，你可以实时跟踪用户。

否。NodeJS可以让你用Javascript创建完整的堆栈应用程序。也就是说，你可以用Javascript编写服务器部件，类似于你在PHP中所做的。你可以将NodeJS与你的PHP sc一起使用有没有更简单的解决方案？我对

javascript

和

php

有点熟悉，但是当涉及到

AJAX

以及您推荐的

NodeJS

和

Socket.IO

时，我实际上根本就没有任何经验。我所要求的东西是否符合这个标准？而且，我确信，是否有一个主要的学习曲线？我在回答中给出了两种可能的解决方案。你可以使用一点Javascript和PHP，如果你想尝试新的东西，也可以尝试使用NodeJS。根据你的要求，我建议你尝试这两件事。如果你想学习新的东西，我建议你使用NodeJS。如果你需要更快而不是更快地完成这件事稍后，我会建议对PHP脚本进行简单的AJAX调用。NodeJS将是我今后想尝试的东西，但对于这个项目，我必须尽快让它运行。如果我使用替代的

AJAX

和

PHP

而不是

Javascript

和

PHP

我会怎么开始呢？我会这样做在

AJAX

方面没有任何经验，在

PHP

方面也只有很少的经验……AJAX会执行扫描并刷新小部分（在线/离线）与javascript类似？如果是的话，我从哪里开始？AJAX您可以使用javascript。这只是在服务器上调用脚本以检索一些信息的一种方式。简单的Google ing将帮助您。这里有大量与AJAX相关的问题。PHP脚本只需查询数据库并询问是否存在证书最近在用户中看到了。

<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>

#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;
}