Clever Geek Handbook

WebページでのJabberチャット

jabberを使用して、サイトのオンラインチャットに関するハブの投稿を読んで、既製のアプリケーションを使用せずに、それがどのように機能し、どのようにそれを行うことができるか疑問に思いました。 その結果、「ジャバーによるサイトのチャット」という非常に簡単なドラフトができました。 残念ながら、テスト専用のLinuxサーバーがないため、Win7（およびApacheサーバー）を備えたローカルコンピューターを使用しました。



一般的な仕組み：ユーザーはサイトにアクセスし、会話できるウィンドウが表示されます。 ユーザーがメッセージを送信すると、指定されたjabberアカウントに届きます。 このメッセージの受信者は回答を書くことができ、サイト訪問者に届きます。

これに必要なもの：



ボッシュ



JSは、jabberクライアントの実装に必要な別のサーバー/クライアントとのTCP接続を作成する方法を知りません。 JSはHTTPリクエストのみを送信できます。 したがって、HTTPを介したTCP接続での作業を可能にする特別なメカニズムが必要です。 これはBOSHです。



デフォルトでは、OpenfireのBOSHは有効になっており、アドレスがあります localhost:7070/http-bind



localhost:7070/http-bind



。 ただし、接続時にこのアドレスを指定すると、何も出力されません。 問題はここで詳しく説明されています。それを機能させるには、Apacheのリダイレクトを記述し、proxy_moduleおよびproxy_http_moduleモジュールのコメントを外す必要があります。



httpd.conf： 

  ProxyRequestsオフ
 ProxyPass / http-bind http://127.0.0.1:7070/http-bind/
 ProxyPassReverse / http-bind http://127.0.0.1:7070/http-bind/


サイトでチャット



そのため、すべてが非常に簡単で、Openfireをインストールし、サイトなどのユーザーを作成し、テストページを作成します（基本として、Stanzaサンプルエコーボットを使用しました）。 このページには、ユーザーがメッセージを書き込むフィールドと、チャット履歴のあるフィールドがあります。



jabberサーバーにログインするページ読み込みハンドラーを作成します。 

  $（関数（）{
     connection = new Strophe.Connection（ '/ http-bind'）;
     connection.connect（ 'site @ r1c'、 'site'、onConnect）;
 }）;


onConnectハンドラーで、メッセージの到着に関連するイベントに「リスナー」を追加します（ログインが成功した場合）。 

 関数onConnect（ステータス）{
     if（status == Strophe.Status.CONNECTING）{
         log（ 'Strophe is connected。'）;
     }
     else if（status == Strophe.Status.CONNFAIL）{
        ログ（「Stropheは接続に失敗しました。」）;
     }
     else if（status == Strophe.Status.DISCONNECTING）{
        ログ（ 'Strophe is disconnecting。'）;
     }
     else if（status == Strophe.Status.DISCONNECTED）{
        ログ（「Stropheは切断されています。」）;
     }
     else if（status == Strophe.Status.CONNECTED）{
        ログ（「Stropheが接続されている」+ connection.jid）;
        
         connection.addHandler（onMessage、null、 'message'、null、null、null）;
         connection.send（$ pres（）。tree（））;
     }
 }


onMessageハンドラーはXMLデータを受け取ります。 それらを解析して、メッセージのテキスト、送信者などを見つけます。 

 関数onMessage（msg）{
     var to = msg.getAttribute（ 'to'）;
     var from = msg.getAttribute（ 'from'）;
     var type = msg.getAttribute（ 'type'）;
     var elems = msg.getElementsByTagName（ 'body'）;

     if（type == "chat" && elems.length> 0）{
         var body = elems [0];
    
         AddText（Strophe.getText（body）、 'in'）;
     }

     // trueを返して、ハンドラーを維持します。  
     // falseを返すと、終了後に削除されます。
     trueを返します。
 }


送信ボタンハンドラは、必要なデータを含むXMLを生成し、Stropheに送信するよう要求します。 adminユーザーがホストとして使用されます。 

 関数送信（メッセージ）{
     var msg = $ msg（{to： 'admin @ r1c'、from：connection.jid、type： 'chat'}）。c（ 'body'）。t（document.URL + '\ n' + message）;
     connection.send（msg.tree（））;
    
     AddText（メッセージ、「out」）;
     $（ 'input＃message'）。val（ ''）;
 }


まとめ





その結果、非常に単純なスケッチが作成され、Webページを通じてジャバー経由で通信できます。 私はこれが原理的にどのように機能するかを知りたいと思ったので、それ以上掘り下げませんでした。 何か落とし穴がたくさんあると教えてくれます:)



さらに多くの改善を考え出すことができます。 例：



More articles:


All Articles