0

私はこれを始める方法に行き詰まっています。私が必要とするこの機能を実行するには、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/

さらに情報が必要な場合は、さらに提供できる可能性があります（おそらく）...

4

2 に答える 2

1

XAJAX を使用して (これには jQuery を使用することをお勧めします。多くのボイラー プレート コードが隠されています)、1秒ごとにサーバーにクエリを実行します。

サーバーには、ユーザーがオンラインかどうかをデータベースに問い合わせるスクリプトがあります。ユーザーが最後に表示されたのはいつかを追跡し、特定のユーザーがいつオフラインになるかを判断するのに十分な時間 (IE 5 分) を決定する必要があります。

そこから、PHP スクリプトから真/偽の応答を返し、それに応じて緑/灰色のドットを更新するだけです。

さらに高度にしたい場合は、 Socket.IOの助けを借りてリアルタイムでユーザーを追跡できるNodeJSのようなものを調べることができます。

于 2013-09-16T21:10:28.370 に答える
0

クライアント側の Javascript とは何の関係もありません。HTMLとは関係ありません。これらが明らかでない場合は、長い道のりが待っています。あなたは 9 年前に nealry という質問をしました - おそらく答えは今の方が理にかなっているでしょう (なぜスタックオーバーフローがこれをフロントページに押し上げたのか分かりません)。

アプリケーション バックエンドのセッション管理でこれを実装する必要があります。また、これを構築することを決定したプラットフォームが何であれ、提供されるセッション管理コードのほとんどを置き換えることも意味します。現在開いているセッションをスキャンして、どのセッションがアクティブかを確認することは、かなり明白な解決策ですが、セッション データが大きい場合、すぐに非常に遅くなる可能性があります。チェックをユーザーの HTTP アクセスから切り離すことで影響を軽減できますが、個人的にはセッション ハンドラーの上にデコレーターを配置し、アクティブなユーザー リストをデータベース内の別のデータ ストアとして維持します。データが作成された時刻と最後に更新された時刻を確認する必要があります。ほとんどの Web ベースのセッション マネージャーは、非アクティブに基づくガベージ コレクション モデルを使用して、古いセッションを削除します。

于 2021-12-11T23:40:42.207 に答える