WebSocketの簡単なプロセス操作

WebSocketは、HTML 5が提供し始めた単一のTCP接続上でフルデュプレクス通信を行うプロトコルである.
WebSocketは、クライアントとサーバ間のデータ交換をより簡単にし、サービス側がクライアントにデータを積極的にプッシュできるようにします.WebSocket APIでは、ブラウザとサーバが握手を1回完了するだけで、両者の間に永続的な接続を直接作成し、双方向のデータ転送を行うことができます.
WebSocket APIでは、ブラウザとサーバが握手をするだけで、ブラウザとサーバの間に高速チャネルが形成されます.両者の間で直接データを互いに転送することができる.
現在、多くのサイトがプッシュテクノロジーを実現するために使用しているテクノロジーはAjaxポーリングです.ポーリングは、1秒ごとなどの特定の時間間隔で、ブラウザによってサーバに対してHTTP要求を発行し、サーバによって最新のデータをクライアントのブラウザに返す.このような従来のモードは、ブラウザがサーバに絶えず要求する必要があるという明らかな欠点をもたらしているが、HTTP要求には長いヘッダが含まれている可能性があり、その中で本当に有効なデータはほんの一部であり、多くの帯域幅などのリソースを浪費することは明らかである.
HTML 5で定義されたWebSocketプロトコルは、サーバリソースと帯域幅をより効率的に節約し、よりリアルタイムで通信することができます.
どのようにブラウザがJavaScriptを通じてサーバーにWebSocket接続を確立する要求を出して、接続が確立した後に、クライアントとサーバーの端はTCP接続を通じて直接データを交換することができます.
WebSocket接続を取得するとsend()メソッドでサーバにデータを送信し、onmessageイベントでサーバから返されたデータを受信できます.
WebSocketクライアントAPI
次のAPIは、WebSocketオブジェクトを作成するために使用されます.

var Socket = new WebSocket(url, [protocol] );

以上のコードでは、最初のパラメータurlで、接続のURLを指定します.2番目のパラメータprotocolはオプションで、許容可能なサブプロトコルを指定します.
WebSocketプロパティ
ツールバーの
説明
Socket.readyState
読み取り専用プロパティreadyStateは接続ステータスを表し、0-接続が確立されていないことを示します.1-接続が確立され、通信可能であることを示します.2-接続が閉じられていることを示します.3-接続が閉じているか、接続が開かないことを示します.
Socket.bufferedAmount
読み取り専用プロパティbufferedAmountはsend()によってキューに入れられて転送を待っていますが、まだ発行されていないUTF-8テキストバイト数
WebSocketイベント
ツールバーの
イベントハンドラ
説明
open
Socket.onopen
接続確立時にトリガー
message
Socket.onmessage
クライアントがサービス側データを受信するとトリガーされます
error
Socket.onerror
通信エラー発生時にトリガー
close
Socket.onclose
接続クローズ時にトリガー
WebSocketメソッド
方法
説明
Socket.send()
接続を使用したデータの送信
Socket.close()
接続を閉じる
例:
WebSocketプロトコルは本質的にTCPベースのプロトコルである.
WebSocket接続を確立するために、クライアントブラウザはまずサーバにHTTP要求を開始する.この要求は通常のHTTP要求とは異なり、いくつかの付加ヘッダ情報が含まれている.付加ヘッダ情報「Upgrade:WebSocket」は、これが申請プロトコルのアップグレードHTTP要求であることを示している.サーバ側はこれらの付加的なヘッダ情報を解析して応答情報を生成してクライアントに返し、クライアント側とサーバ側のWebSocket接続が確立され、双方はこの接続チャネルを通じて自由に情報を伝達することができ、この接続はクライアント側またはサーバ側のいずれかがアクティブに接続を閉じるまで持続する.

function WebSocketTest(){
  //           WebSocket
  if ('WebSocket' in window) {
  //Websocket    ws   wss         ，    HTTPS，   wss     TLS     Websocket
    let wsRequest = 'ws://xx.xx.xx.xx:xx';
    let websocket = new WebSocket(wsRequest);
    alert("        WebSocket!");
  //           
    websocket.onerror = function () {
      alert("error");
      console.log("error");
    };

  //           
    websocket.onopen = function (event) {
      alert("    ");
      console.log("    ");
    };

  //          
    websocket.onmessage = function (data) {
      alert("     ...");
      if (data) {
        console.log(data);
      }
    };
  //         
    websocket.onclose = function () {
      alert("  websocket");
      console.log("close");
    };
  //        ，      ，     websocket  ，             ，server     。
    window.onbeforeunload = function () {
      websocket.close();
    };
  //    
    function closeWebSocket() {
      websocket.close();
    }
  } else {
    alert('Not support websocket')
  }
}