使用javascript，php，pdo，css，html显示谁在线/离线

Question

I'm stuck on how to even start on this...I think either javascript, or php is required, or both to perform this functionality I need.

I've got a list of member profiles on a page to which next to each member name, I have currently a placeholder using only css and html that SHOULD display whether or not a member who is logged in is online (green dot) or if a member is logged out, it shows that they are offline (grey dot). I do not have any javascript or php written up at all as I don't know where to start..., but it would be needed just for this small section and know it's something I'd need to make it work. All I can do is provide what html I have and css I have. I'd like it to perform a scan of who is logged in/out at least every 15-30seconds only refreshing this small section (online - green dot or offline - grey dot) rather than the entire page (which I'm sure javascript is best for this) and of course to see whether or not a member is in fact online/offline by running a query on the session[ID] (which I'm sure php/pdo is best practice). Could anyone help steer me in the right direction from just the little css and html I have?

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

Here is a demo of what I have: http://jsfiddle.net/tZpk6/

If more information is needed, I might be able to provide some more (possibly)...

Answer 1

You are going to want to use AJAX (I suggest using jQuery for this, it hides a lot of boiler plate code) to query the server once every X seconds.

You will have a script on your server that queries your database, asking if a user is online. You are going to need to track when a user was last seen, and decide how long is long enough between page impressions by your given user to decide when they are offline (IE 5 mins).

From that, you can just return a true/false response from your PHP script and update your green/gray dot accordingly.

If you want to get even more advanced, you can look into something like NodeJS which with the help of Socket.IO you can keep track of users in real time.