jquery - ユーザー リストを動的に更新する方法

Question

ログインしているユーザーの表示リストを作成しようとしています。左側のパネルに、ログインしている人のリストがあると想像してください。新しい人がログインすると、そのリストはすぐに更新され、他のすべての人に表示されます。

検索する正しいフレーズがわからないため、このチュートリアルを見つけるのに苦労しています。おすすめを教えてください。

Answer 1

これはかなり幅広い質問であり、その答えは環境によって大きく異なります。あなたのサイトのバックエンドは PHP ですか? ノード？レール？ログインしているユーザーのリストをどのように保存していますか?

それを理解したら、簡単な答えは「AJAXを使用する」です。基本的には、サーバー側のスクリプトを定期的にポーリングして、ユーザーのリストを要求します(スクリプトはおそらくファイル/データベースから読み取ります)。jQuery の$.getメソッドはこれを行うことができます。リストが変更されたら、HTML リストを再レンダリングします。

このプロセスの手順についてさらに質問がある場合は、お知らせください。

Answer 2

ユーザーがログインすると、ログインしているすべてのユーザーにリアルタイムで通知する必要があります。

html5 では、websocket を使用できます。ただし、その前にコメットとして知られるいくつかの異なる手法があります。

最も単純な実装は古い学校のポーリングです。各クライアントは ajax を使用して X 秒ごとにサーバーをポーリングし、ログインしているすべてのユーザーのリストを要求します。同時に、一部のユーザーはログアウト リンクを使用してログアウトせず、単にタブを閉じた可能性があるため、これをハートビートとして使用して、ユーザーがまだアクティブであることを確認できます。

1 ステップ アップはロング ポーリングと呼ばれ、X 秒ごとにポーリングする代わりに、単一の ajax リクエストが送信され、サーバーは何らかのイベントが発生した場合 (「誰かがログインした場合」) にのみ応答します。クライアントが応答を受信すると、すぐに別の ajax 要求を送信して接続を再確立します。

根底にある詳細を理解することは価値がありますが、一からやり直す必要はありません。pusherというサービスを利用しています。また、接続が終了すると警告する Webhook もあり、ユーザーがログアウトせずにタブを閉じたことを判断するのに役立ちます。

これらのサードパーティ サービスはどのように機能しますか?

サーバーとの接続を確立する js スニペットを html ページに追加する必要があります。ブラウザでサポートされている場合は Web ソケットが使用されます。それ以外の場合は、古いブラウザのコメットやフラッシュなど、いくつかのフォールバック方法のいずれかを使用できます。

情報を送信したい場合は、サービスにポスト リクエストを送信するだけで、すでに開いている接続を介して目的のクライアントに警告を発します。