WebSocketの概要


HTTPプロトコル:
    HTTPプロトコル:ハイパーテキスト転送プロトコル
    HTTPプロトコル機能:送信リソースページ(HTML / CSS / JS / MP3 / MP4 / ...)
    のhttp作品:リクエストとレスポンスが
      要求を開始するクライアントである必要があり、サーバーはなります要求に対する応答が応答があるが、

問題は:

  必要性のwebScoketに、今回の金融業界:::[トレンドウォーレン]シナリオは、次のようなHTTPプロトコル、で使用するのに適していないたら。



WebSocketの契約

   webSoket H5は、双方向通信ブラウザとサーバーを可能にする、新しい機能であり、それは、クロスドメインアクセスのサポート
    のWebSocketの役割を:ネットワーク間でデータを転送するため
    のWebSocket作業:放送とに耳を傾け
    、ブラウザとサーバのみのハンドシェイクを完了する必要があります、直接両者の間ことができる永続的な接続を作成行い、双方向のデータ伝送を
    WebSocketのアプリケーションシナリオ:株価チャート/チャットルーム
のWebSocketクライアントを実現する
    オブジェクトのWebSocket作成するために
    VAR =新しい新しいWSのWebSocket( "WS://127.0.0.1:9001");
    WS:契約名
    9001:WebSocketのサーバーのデフォルトのポート


    -受信データ・サーバのWebSocket
    ws.onmessage =関数(E){e.data }


    -サーバにデータを送信
    ws.send(stringMsg);
    -接続クローズ
    (ws.close)を、

使用して、サーバとのラインでのWebSocket。

例:

ノードサーバをセットアップし、構成されたのWebSocket

1  // 02_ws_server.js 
2  // Node.jsのWSサーバ
3  @ 1:ダウンロード私はWSモジュールNPMをWS 
4。 // 2:WSモジュール組み込ま
5。 constのインクルードは、( "WS" WS =を必要とする);
 6。 // 3:作成します。 WSサーバポートと指定8888 
。7  VARのサーバー= 新しい新しい ws.Server({ポート:8888 });
 図8はconsole.log( "WSサーバがポートをリスニング始まる" );
 9。 
10  
11  @ 4:結合接続クライアント接続イベントイベント(限り、クライアントがアップ接続されているように、このイベントをトリガする)
12は server.on(「接続」、(ソケット)=> {
 13である    にconsole.log(「WSサーバー受信接続」;)
 14    //5:サーバが連続クライアントタイマーにデータを送信する
15    のvar。カウンタ= 1 ;
 16    VARのタイマ=たsetInterval(関数(){
 17。      カウンタ++ ;
 18である      socket.send( "I AMサーバー- " +カウンタ); // データクライアント、毎秒1回毛髪に送ら
19    } 1000 ;)
 20    // サーバは、クライアントデータを受信:6 
れる21    socket.on( "メッセージ"、(MSG)=> {
 22である      にconsole.log(「サーバが受信しますメッセージ"+ MSG);
 23である   });
 24    // 7:要求を切断するクライアントは、タイマを停止した場合。
25    (socket.onを"閉じる"()=> {
 26である      にconsole.log("クライアント・オフオープン接続...」);
27      てclearInterval(タイマー)。
28    })
 29 });

 

フロントエンドコード

1  <!DOCTYPE HTML > 
2  < HTML のlang = "EN" > 
3  < ヘッド> 
4        < メタのcharset = "UTF-8" > 
5        < メタ= "ビューポート" コンテンツ= "幅=デバイス幅、初期スケール= 1.0" > 
6        < メタHTTP-当量= "X-UA-互換" コンテンツ= "IE =縁" > 
7        < タイトル>ドキュメント</ タイトル>
 
9  < ボディ> 
10        < ボタンID = "BTN1" onclickのは= "ハンドル1(そのハンドル)" >サーバ・データを受信する</ ボタン> < BR > 
11        < ボタンID = "BTN1" onclickのは= "handle2()" >サーバに情報を送信します</ ボタン> < BR > 
12である       < ボタンID = "BTN1" のonclick = "handle3()" >近い接続</ ボタン> < BR >
13        < スクリプト>
14              // のWebSocketオブジェクトを保持する変数を作成し
15              のvar    C =  新しい新規のWebSocket(WS:// localhostを:8888 //の接続の作成
16              // バックサーバーデータ受信への接続を作成する
17。             関数ハンドル1(すなわちハンドル){
 18である                   C. onMessage = 関数(E){ // データを受け取る
。19                          にconsole.log(e.data)// e.dataを、データがサーバから返された
20                    }
 21              }
 22が 
23である 
24  
25              //は、接続を作成してサーバにデータを送信する
26             関数handle2(){
 27                    c.send(' I遠位白' // サーバに送信されるデータ
28  
29              }
 30  
31である             
32              // 切断
33である             関数handle3(){
 34である                   (c.close)
 35              }
 36        </ スクリプト> 
37  </ ボディ> 
38である </ HTML >

 

おすすめ

転載: www.cnblogs.com/javascript9527/p/11347620.html