WebSocketネットワーク通信プロトコルの紹介

一、WebSocketって何?
WebSocketはネットワーク通信プロトコルです.RFC 6455は、その通信規格を定義する.
WebSocketは、HTML 5が提供し始めた単一のTCP接続上でフルデュプレクス通信を行うプロトコルである.
二、なぜWebSocketが必要なのか.
従来のHTTPプロトコルは無状態であり、リクエスト(request)のたびにクライアント(ブラウザなど)がアクティブに開始し、サービス側が処理した後にresponse結果を返すが、サービス側がクライアントにデータをアクティブに送信することは難しいことを知っている.このようなクライアントはアクティブ側であり、サービス側がパッシブ側である従来のWebモードは、情報の変化が頻繁ではないWebアプリケーションにとって面倒が小さく、リアルタイム情報に関するWebアプリケーションにとって大きな不便をもたらしている.
そのため、HTML 5の誕生に伴い、新しい通信プロトコルが誕生した--WebSocket、彼の最大の特徴はサービス側が自発的にクライアントにメッセージを送ることができて、クライアントも自発的にサービス側にメッセージを送ることができて、本当の平等を実現しました.
例えば、インスタント通信、リアルタイムデータ、サブスクリプションプッシュなどの機能を備えたアプリケーション.WebSocket仕様が提案される前に、開発者がこれらのリアルタイム性の強い機能を実現するには、ajaxポーリング(最も原始的なリアルタイムWebアプリケーションを実現するソリューション)というトレードオフソリューションを使用することがよくありました.
ajaxポーリングの原理:ajaxポーリングの原理は非常に簡単で、ブラウザに数秒おきに要求を送信させ、サーバーに新しい情報があるかどうかを尋ねる.明らかに、この方法は、不要なリクエストが多すぎて、トラフィックとサーバリソースを浪費します.シーン再生:クライアント:新しい情報(Request)サービスがあるかどうか:ない(Response)クライアント:新しい情報(Request)サービスがあるかどうか:ありません.(Response)クライアント:新しい情報(Request)サービス側がありますか:うるさいですね.ありません.(Response)クライアント:新しいメッセージ(Request)サービス側がありますか:はい、どうぞ.(Response)クライアント:新しいメッセージ(Request)サービス側がありますか....いいえ....いいえ...いいえ(Response)----loop
Websocketの原理:サーバがプロトコルのアップグレードを完了すると(HTTP->Websocket)、サービス側は自発的にクライアントに情報をプッシュすることができます.シーン再生:クライアント:Websocketプロトコルを作成します.必要なサービス:chat,Websocketプロトコルバージョン:17(HTTP Request)サービス側:確認、Websocketプロトコル(HTTP Protocols Switched)クライアントにアップグレードしました.情報があるときに送ってください.サービス端:はい、時々教えてあげます.服務端:balabalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalal
三、WebSocketのその他の特徴は以下の通りである.
(1)TCPプロトコル上で確立され,サーバ側の実現が容易である.
(2)HTTPプロトコルとの互換性が良好である.デフォルトポートも80と443であり、握手段階ではHTTPプロトコルを採用しているため、握手時にマスクしにくく、各種HTTPプロキシサーバを通過することができる.
(3)データフォーマットが比較的軽量で、性能コストが小さく、通信が効率的である.
(4)テキストを送信してもよいし,バイナリデータを送信してもよい.
(5)同源制限がなく,クライアントは任意のサーバと通信できる.
(6)プロトコル識別子はws(暗号化されている場合はwss)であり、サーバURLはURLである.
四、WebSocketオブジェクトの作成
ブラウザはJavaScriptを介してWebSocket接続の確立をサーバに要求し,接続が確立されるとクライアント側とサーバ側はTCP接続により直接データを交換することができる.WebSocket接続を取得するとsend()メソッドでサーバにデータを送信し、onmessageイベントでサーバから返されたデータを受信できます.

// url,       URL
// protocol     ，         。
let Socket = new WebSocket(url, [protocol] );

五、WebSocket属性
Socketオブジェクトを作成したとします
ツールバーの
説明
Socket.readyState
読み取り専用プロパティreadyStateは接続ステータスを表し、0-接続が確立されていないことを示します.1-接続が確立され、通信可能であることを示します.2-接続が閉じられていることを示します.3-接続が閉じているか、接続が開かないことを示します.
Socket.bufferedAmount
読み取り専用プロパティbufferedAmountはsend()によってキューに入れられて転送を待っていますが、まだ発行されていないUTF-8テキストバイト数です.
六、WebSocket事件
Socketオブジェクトを作成したとします
≪イベント｜Events｜ldap≫
イベントハンドラ
説明
open
Socket.onopen
接続確立時にトリガー
message
Socket.onmessage
クライアントがサービス側データを受信するとトリガーされます
error
Socket.onerror
通信エラー発生時にトリガー
close
Socket.onclose
接続クローズ時にトリガー
七、WebSocket方法
Socketオブジェクトを作成したとします
方法
説明
Socket.send()
接続を使用したデータの送信
Socket.close()
接続を閉じる
八、WebSocketインスタンス
【1】オリジナルJavaScriptによるWebSocket接続

  




  
      
    WebSocket  
  


  
    let websocket = null;
    //           WebSocket
    if ('WebSocket' in window) {
      websocket = new WebSocket("ws://localhost:8080/websocket");
    } else {
      alert('        websocket！')
    }

    //           
    websocket.onerror = function () {
      console.log("WebSocket      ");
    };
    //           
    websocket.onopen = function () {
      console.log("WebSocket    ");
    }

    //          
    websocket.onmessage = function (event) {
      document.getElementById('message').innerHTML += event.data + '<br/>';
    }

    //         
    websocket.onclose = function () {
      console.log("WebSocket    ");
    }

    //        ，      ，     websocket  ，             ，server     。
    window.onbeforeunload = function () {
      closeWebSocket();
    }

    //  WebSocket  
    function closeWebSocket() {
      websocket.close();
    }

    //    
    function send() {
      let message = document.getElementById('text').value;
      websocket.send(message);
    }
  

【2】在vue项目中实现WebSocket连接

  export default {
    data() {
      return {
        params: '',
        path: "ws://localhost:8080/websocket",
        socket: ""
      }
    },
    mounted() {
      //    
      this.init()
    },
    destroyed() {
      //     
      this.socket.onclose = this.close
    },
    methods: {
      init: function () {
        if (typeof (WebSocket) === "undefined") {
          console.log("        socket")
        } else {

          //    socket
          this.socket = new WebSocket(this.path)

          //   socket      
          this.socket.onopen = this.open
          
          //   socket      
          this.socket.onerror = this.error

          //        socket  
          this.socket.onmessage = this.getMessage
        }
      },
      open: function () {
        console.log("socket    ")
      },
      error: function () {
        console.log("    ")
      },
      getMessage: function (msg) {
        console.log(msg.data)
      },
      send: function () {
        this.socket.send(params)
      },
      close: function () {
        console.log("socket    ")
      }
    }
  }