-3

jQuery と PHP を使用してチャット アプリケーションを作成したいと考えています。助けが必要な部分は、リアルタイム ユーザー「Evx」がメッセージを入力し、そのメッセージを他のすべてのユーザーにリアルタイムで表示するところです。これは、Skype がペン ../ を持っている方法と、ユーザーが入力したときに Facebook が通知を持っている方法に似ています。

私が必要としているのは、ロジックの手順と、「ユーザーが入力している」リアルタイムを簡単に達成する方法に関する情報ですが、他の方法と同様に機能することです。

これが私がこれまでに試したことです：

//time delay before ajax call
var delay = (function() {
    var timer = 0;
    return function(callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})();

$('#usermsg').keydown(function() {
    if ($('#usermsg').val().length === 5) {
        delay(function() {
            $.ajax({
                url: "addusertyping.php",
                cache: false,
                success: function() {

                }
            });
        }, 5000);
    }
});

$('#usermsg').keyup(function() {
    if ($('#usermsg').val().length >= 6) {
        // here I should basically check for 
          // an update from server or what not.
    }
});​

上記で試したことを出発点として使用して、ユーザータイピングをリアルタイムで実現する方法に関する手順と情報を誰かが説明してもらえますか?

4

1 に答える 1

13

Facebook や Google トークなどのサイトがチャットを実装する際に使用するアプローチは、Comet または Reverse AJAX を使用して Web の要求/応答モデルを利用するソリューションを使用することです。

ウェブ 1.0:

ご使用のような従来の Web 1.0 実装では、ブラウザーがサーバーへの要求を開始します。サーバーは、クライアント側のコードがビューにレンダリングするデータで応答します。

これは、単純にユーザーをあるページから別のページに移動する場合や、ユーザーによって開始されたイベントに応答する場合に最適です。ただし、この方法論は、サーバーによって開始されるイベントの管理に関しては本質的に欠陥があります。

あなたの例では、リアルタイムの更新をシミュレートするために、継続的なポーリング要求でサーバーを叩いて更新を確認する必要があります。これは、車の後部座席に座っている小さな子供が、絶え間なく親に「私たちはまだそこにいますか? 私たちはまだそこにいますか?」と絶えず尋ねるのと同じです。欠かさずに何度も。これは多くの帯域幅を消費するだけでなく、接続されているクライアントの数が増えるとサーバーに大きな負荷がかかります.

コメット/リバース AJAX:

サーバーはリクエストなしではブラウザへのレスポンスを開始できないため、「リバース AJAX」または「コメット」と呼ばれる手法を使用して、サーバーがイベント通知をクライアントにプッシュするプロセスをシミュレートします。

Comet の背後にある一般的な前提は、ブラウザがサーバーへの接続を開き、サーバーがその接続を開いたままにしておくことです。サーバーは、接続されているすべてのクライアントに渡す必要がある更新を受け取ると、応答をクライアントに送り返し、要求/応答サイクルを完了します。応答を受信すると、クライアントはすぐに別の要求をサーバーに送信し、サーバーは次の更新まで開いたままにします。

PHP で使用できる Comet ソリューションがあるため、既存のプラットフォームを使用してこれを実現できます。ただし、お勧めできません。また、Comet 接続を開くのを容易にするために、クライアント側のライブラリも必要です。Dojo Cometd JavaScript ライブラリーを調べてください。

Comet は、チャット ソリューションを実装するための 2 つの優れたソリューションの 1 つであり、もう 1 つは WebSockets です。ただし、一部のブラウザでは WebSocket のサポートがまだ不十分です。

Comet を容易にするライブラリを探すときは、Continuation を容易にするライブラリを選択することもお勧めします。これにより、応答の送信を待機しているスレッドを解放して、無駄に待機するのではなく、他のタスクを実行できるようになります。このようなソリューションにより、いくつかの Comet サーバーは 20,000 を超える接続に簡単に拡張できました!

How to Implement Comet on PHPについて説明した記事を次に示します。さらに、この StackOverflow の質問は、PHP で Comet を使用する際の課題について説明しているため、役立つ場合があります。

設計上の考慮事項:

チャット ソリューションを開発する際に犯した最初の間違いの 1 つは、メッセージをより抽象的なもののサブクラスとして考えなかったことです。代わりに、サーバーからフロントエンドに送信した情報は単なる「チャット メッセージ」でした。しかし、製品が進歩するにつれて、同じ Comet 接続を使用して、メッセージだけでなくコマンドをブラウザーに送信できることがすぐにわかりました。

したがって、「ユーザーが入力しています」を実装するには、サーバーからの更新が新しいメッセージであるか、「ユーザー XYX が入力していることを表示する」コマンドであるかを最初に判断するハンドラーが JavaScript に必要になる場合があります。優れた設計により、サーバーから開始される他の種類の更新にも Comet 接続を使用できるようになります。

最後に、ユーザーの入力メッセージには、ユーザーが入力しているときにブラウザーが X 秒ごとに 1 回だけサーバーに通知するように、何らかの遅延が必要です。ユーザーの入力を、AJAX 要求でサーバーを単純に攻撃するキープレス イベントにバインドすると、Comet 接続が低下してポーリングに戻るだけです。

受信側では、タイムアウト機能を実装して、入力中のユーザーがサーバーへの「ユーザー入力」要求の送信を停止した場合にユーザー入力メッセージが自動的に消えるようにすることをお勧めします。または、ユーザーが入力したテキストをバックスペースで入力した場合など、テキストボックスが空のときにブラウザーが要求を送信すると、そのユーザーのブラウザーは「ユーザーはもう入力していません」というメッセージを送信できます。

簡単な解決策?:

最後に、Web についてはサーバーがクライアントにデータをプッシュするという観点から考える必要があるため、これには学習曲線が伴うことを付け加えておきます。これには、多くの調査と献身的な取り組みが必要になるだけでなく、例を試して、アプリケーションの設計にどのようにアプローチすべきかを深く理解する必要があります。これは、このテクニックを習得するための最良の方法の 1 つですが、威圧的でもあります。例に時間をかけて自分で試してみてください。行き詰まった場合は、いつでも助けを求めることができます。

于 2012-05-13T01:32:24.597 に答える