WebSocketの技術をいえば、実際には、サーバープッシュ技術から来ているが、現実には、非常に頻繁に必要なデータは常に、このような株式市場のデータ、チャットソフトウェアとして、変更されるため、クライアントの必要性は、ページを更新せずにリアルタイムで取得したいですサーバー技術の最新のデータに、以前のデータ取得は、クライアント積極的要求に基づいている間、サーバが対応するデータを返します。だから、サーバープッシュ技術が存在します。
Ajaxの短いポーリング、Ajaxの長いポーリング、SSE、HTTPストリーミング、WebSocketの:主に従うことによって、サーバープッシュ。
まず、サーバープッシュ技術
1、Ajaxの短いポーリング
最新のデータを取得するためにサーバーにリクエストを送信するために、単純な、クライアント(ブラウザ)時間。これは、タイマーでAJAX要求をトリガすることによって達成することができます。
長所:実装はいくつかの変更が任意のバックエンドサービスを変更することなく、可能にするために、JSの終わりに非常に簡単です。
短所:ポーリング間隔が長すぎる、ユーザーが受信したデータをタイムリーに更新することができない原因になります。ポーリング間隔が短すぎる、クエリ要求は、サーバー側の負担が過度に上昇の原因となります。
コードは以下の通りであります:
// 2秒ごとにトリガーAJAXリクエストは、最新のデータを取得し たsetInterval(関数(){ // 壁紙コールは、最新データ取得ここにするためにいくつかのAJAXを行い 、2000});
2、Ajaxのロングポーリング
AJAXは、ポーリングに基づいてデータの後端が空で返さないに応じて更新されず、後端部に接続された維持された、データが変化するまで後端ほとんど改善を作り、受信された対応する先端部に接続要求を閉じデータは、再度受信したばかりのバックエンド、およびプロセスデータの要求を開始します。
- クライアントがサーバに要求を開始(HTTPリクエスト)
- サーバー接続は、データをクライアントに送信することが可能になるまで開いたままになり、その後、要求された(HTTPレスポンス)を返します
- クライアントは、データを処理し、サーバーから返されたデータを受信し、すぐに新しい要求を開始した後
利点:
- 最新のデータにすることができますタイムリーにアクセス
- リクエストの数を減らすためにポーリング戦略と比較すると
短所:
必ず、サーバーに接続し、サーバは処理の上限に達した場合、サーバで処理できる接続の限られた数のために解放することができない、サーバーは新しい要求に応答することができません
コードは以下の通りであります:
関数非同期(){ $アヤックス({ URL: 'http://api.3g.qq.com' 、 成功:関数(){ 非同期(); // 成功コード } }); }
非同期タスクでServlet3とDeferedResult春が長い接続のAjaxを使用しています。
3、HTTP流
// サーバ側のサンプル(NodeJS) LET =エクスプレスが必要です( "エクスプレス" ); 聞かせてのApp = エクスプレス(); app.use(エクスプレス。静的( "リソース" )); app.get( "/ httpstream" 、機能( REQ、RES){ VAR X = 0 ; res.setHeader( '接続'、 '転送エンコード' ); res.setHeader( 'のContent-Type'、 'テキスト/ HTML;のcharset = UTF-8' ); RES。 setHeader( '転送コード'、 'チャンク'); //はチャンクされ符号化データの伝送を宣言し、タイムリーな処理ブラウザをさせ たsetInterval(関数(){ res.write(X- +++ "|");// クライアントへのすべての2S最後のデータ伝送 }、2000年)。 }); app.listen( 3000)。
サーバーの後の出力にテキストのビットを要求、クライアント2秒ごとに受信しますが、使用することはありませんres.end()
か、res.send()
現在のHTTP要求を終了します。
// クライアントのサンプルJSの VARのXHR = 新新のXMLHttpRequest(); VAR受信 = 0 ; VAR結果 = "" ; xhr.open( "GET"、 "/ httpstream"、真の); xhr.onreadystatechange = 機能(){ IF(== xhr.readyState 3){ // 。readyStateの3は、解析されたデータである表し 、その結果= xhr.responseText.substring(受信)// 最新のデータが取ら 受信+ = result.length; ;にconsole.log(結果) } } xhr.send();
readyState
定期的になり
3
、
responseText
すべてのデータソースを含みます。
received
以前に記録したデータの長さは、それが処理した後、された
responseText
最新のデータを取ら。
利点:
ページのライフサイクル全体を通じて、ちょうどhttp接続を作成します。
短所:
- なぜなら、限られたHTTPサーバー接続のあまりにアクセスクライアントは、新しいクライアントにサービスを提供できない場合。
- データが増加し、クライアントの流れによって受信され、最終的にはパフォーマンスの問題のページにつながる可能性
4、SSE(サーバー-SENT-イベント)
SSE(サーバーに送信されたイベントは)実装されたHTTPサーバーに基づいてクライアントにデータを送信するためのAPIです。彼は上記の三つの方法(ポーリング、ロングポーリング、HTTPストリーミング)を実現するためのAPIが標準です。サーバーへの一方向の接続を作成するために使用するSSEのAPI、サーバは、この接続を介して任意のデータを送信してもよいです。これは、次の特性があります。
- 外しコネクタ
- サーバの応答のMIMEタイプでなければなりません
text/event-stream
- ブラウザのAPIをサポートする必要がある(参照してくださいブラウザの互換性を)
次のように使用します。
// クライアントJSの VAR =ソースの新しい新;のEventSource(URL) // トリガ接続が確立され source.onopen = 関数(){ // ここに壁紙を何かをする ;} // トリガイベントは、サーバーの新しいから受け取る source.onmessage = 関数(イベント){ VARデータ = event.data; // サーバ復帰をevent.dataに格納されたデータ }; // 接続例外がトリガさ source.onerror = 関数(){ // ここで壁紙を何かを }。
次に、クライアントは、最新のデータを取得することができ、オブジェクトのonMessageイベントに耳を傾け、対応するURLにバインドされたのEventSourceオブジェクトを作成します。
// サーバー端示例(nodejs) 速達=は( "表現"を必要としましょう)。 アプリせ = ()を発現します。 app.use(エクスプレス。静的( "リソース" ))。 app.get( "/ httpstream" 、関数(REQ、RES){ VAR X = 0 ; res.writeHead( 200 、{ "コンテンツタイプ": "テキスト/イベント・ストリーム" 、 "のCache-Control": "なし-cache」、 "接続": "キープアライブ" }); // 每个1S往客户端发送一条数据 たsetInterval(関数(){ res.write( "データ:" + X ++ + "\ n \ n"は); } 1000 )。 }); app.listen( 3000)。
5、WebSocketを
5.1のWebSocketは何ですか?
彼は永続的なリンクなかった理由のWebSocketはHTML5アウト協定のは、httpがあるが、実際には、双方向テキストメッセージまたはバイナリデータ通信をベースに、クライアントとサーバを実現するための新しいWebSocketのプロトコルであり、リアルタイムのデータ要件に適しは比較的強いですそのようなライブインスタントメッセージング、などのシーンでは、あなたのデスクトップを共有し、別のバックエンドを達成するための必要性を、クライアントを、すべてのブラウザがサポートしていません。
5.2、WebSocket
二つの部分での通信プロトコル?
- まず、オープンな
HTTP
接続パラメータを交渉ハンドシェイクは、データを交換する前に、クライアントがサーバーとの接続を確立するために適切なパラメータをネゴシエートする必要があります - 第二に、バイナリメッセージフレーミング機構(受信したメッセージテキストとバイナリデータ伝送)。
WebSocket
メッセージベースの通信、カスタムバイナリフレーミング層、サブプロトコルネゴシエーション、プロトコルの拡張オプション、等:プロトコルは、強力な機能の数を提供します。
5.3 HTTPプロトコルのアップグレードとは何ですか?
すなわち、最初のHTTPハンドシェークによって実装、及び、プロトコル、その後の使用用WebSocketプロトコルをアップグレードしています。
WebSocketおよびHTTPプロトコル接続を確立するために、フロントエンドサーバーで、いくつかの共通の基盤を持っているのWebSocket HTTリクエストを送信する必要があり、その後、データを要求するには、のWebSocketにアップグレードすることで合意を必要としているを示しています。アプリケーション層SEC-のWebSocketキー及び独特のチャネルで識別SEC-のWebSocket-受け入れるのWebSocket。
次のとおりです。
ハンドシェイクが完了した後にハンドシェイクが成功した場合は最後に、接続は、交換への双方向通信チャネルとして使用することができますWebSocket
メッセージ。これは、クライアントとサーバーの間で再び起こらないだろうHTTP
からの通信は、すべてWebSocket
買収合意。
契約をアップグレードする方法5.4
WebSocketはWebSocketServerHandshakerのWebSocketプロトコル処理サーバ側でアップグレードされます。
パイプラインは、現在でhandshaker.handshake追加コーデック用WebSocket契約の本質であるとhttpプロトコルコーデックを削除します。
5.5、WebSocketのメッセージエンティティ-WebSocketFrame
WebSocketのメッセージは、そのようなテキスト、バイナリデータストリーム、ハートビートなどのさまざまなシナリオで使用することができる、複数のエンティティをサポートします。、エンティティは、異なるメッセージクラスは、以下の異なるメッセージングを実装する実装されています。
子供用WebSocketプロトコルは何5.6 -STOMP
指向テキストメッセージプロトコル:TTMP先行ストンププロトコルは、ミドルウェアメッセージングのために特別に設計されたプロトコル(単純なテキストベースのプロトコル)です。そのシンプルさは、メッセージフォーマット定義に起こることができ、本体をのWebSocket。STOMPプロトコルは、MQのサポートがたくさんあります。
二、WebSocketのプロジェクトの戦闘演習
このプロジェクトの戦闘ボーエンは、大学のためにソースコードから、チャットルームで、GitHubのアドレス:https://github.com/kosamino/netty-websocket-server
下に示すようなコード構造と機能:
下に示すように、システムは、グラフを流れます。
:WebSocketのプロジェクトの戦闘の別のブロガーの残り添付ネッティー+ WebSocketの為替火災データ取得プロジェクト