vue+webSocket

WebSocketの概要
廖先生の書いた=住所を直接コピーして貼り付けます
WebSocketはHTML 5の新しいプロトコルで、ブラウザとサーバの間で制限されない双方向通信のチャネルを確立することを目的としています.例えば、サーバは任意の時点でブラウザにメッセージを送信することができます.
なぜ従来のHTTPプロトコルはWebSocketが実現できる機能を実現できないのですか?これは、HTTPプロトコルが要求応答プロトコルであり、要求はブラウザからサーバに送信されなければならず、サーバはこの要求に応答し、ブラウザにデータを送信することができないからである.つまり、ブラウザがアクティブに要求しないと、サーバはブラウザにデータをアクティブに送信できません.
これでは、ブラウザでリアルタイムチャットをしたり、オンラインマルチプレイをしたりすることはできません.Flashなどのプラグインを借りるしかありません.
HTTPプロトコルも実際には実現できるという人もいますが、例えばポーリングやCometを使っています.ポーリングとは、ブラウザがJavaScriptを介してタイマを起動し、サーバに新しいメッセージがあるかどうかを尋ねるために一定の間隔でサーバに要求することです.このメカニズムの欠点は,1つはリアルタイム性が足りないこと,2つは頻繁なリクエストがサーバに大きな圧力をもたらすことである.
Conetは本質的にポーリングですが、メッセージがない場合は、サーバがメッセージがあるまでしばらく引き延ばしてから返信します.このメカニズムは一時的にリアルタイムの問題を解決したが、マルチスレッドモードで実行されるサーバは、ほとんどのスレッドが一時停止状態になり、サーバリソースを大幅に浪費するという新しい問題をもたらした.また、1つのHTTP接続が長時間データ伝送がない場合、リンク上のいずれのゲートウェイもこの接続を閉じる可能性がありますが、ゲートウェイは私たちが制御できないので、Comet接続は定期的にpingデータを送って接続が「正常に動作している」ことを示す必要があります.
以上の2つのメカニズムはいずれも根本的なものではないため、HTML 5はWebSocket規格を発売し、ブラウザとサーバの間で無制限の全二重通信を確立することができ、どちらも自発的に相手にメッセージを送ることができるようにした.
WebSocketプロトコル
WebSocketは新しいプロトコルではなく、HTTPプロトコルを利用して接続を確立しています.WebSocket接続がどのように作成されているかを見てみましょう.
まず、WebSocket接続はブラウザによって開始される必要があります.要求プロトコルは標準的なHTTP要求であり、フォーマットは以下の通りです.

GET ws://localhost:3000/ws/chat HTTP/1.1
Host: localhost
Upgrade: websocket
Connection: Upgrade
Origin: http://localhost:3000
Sec-WebSocket-Key: client-random-string
Sec-WebSocket-Version: 13

この要求は通常のHTTP要求といくつかの違いがあります.

GET要求のアドレスは、/path/のようなものではなく、ws://で始まるアドレスである.

要求ヘッダUpgrade: websocketおよびConnection: Upgradeは、この接続がWebSocket接続に変換されることを示す.

Sec-WebSocket-Keyは、この接続を識別するために使用され、データを暗号化するために使用されない.

Sec-WebSocket-Version WebSocketのプロトコルバージョンが指定されています.

その後、サーバがリクエストを受け入れると、次のような応答が返されます.

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: server-random-string

このレスポンスコード101は、今回接続されたHTTPプロトコルが変更されることを示し、変更されたプロトコルはUpgrade: websocketで指定されたWebSocketプロトコルである.
バージョン番号とサブプロトコルは、双方が理解できるデータフォーマット、圧縮をサポートするかどうかなどを規定しています.WebSocketのAPIだけを使うなら、気にする必要はありません.
WebSocket接続が正常に確立され、ブラウザとサーバがいつでも自発的にメッセージを送信できるようになりました.メッセージには2つあります.1つはテキストで、1つはバイナリデータです.通常、JSON形式のテキストを送信できます.これにより、ブラウザでの処理が容易になります.
なぜWebSocket接続はフルデュプレクス通信を実現できるのか、HTTP接続はできないのか.実際にHTTPプロトコルはTCPプロトコル上に確立されており,TCPプロトコル自体はフルデュプレクス通信を実現しているが,HTTPプロトコルの要求応答メカニズムはフルデュプレクス通信を制限している.WebSocket接続が確立された後、実は簡単に規定しただけです.次は、HTTPプロトコルを使用しないで、直接データを送りましょう.
安全なWebSocket接続メカニズムはHTTPSと似ています.まず、ブラウザがwss://xxxでWebSocket接続を作成すると、まずHTTPSを通じて安全な接続が作成され、その後、このHTTPS接続はWebSocket接続にアップグレードされ、下位通信は依然として安全なSSL/TLSプロトコルを歩んでいる.
エクスプローラ
WebSocket通信をサポートするには、ブラウザがこのプロトコルをサポートしなければならないことは明らかです.そうすれば、ws://xxxの要求を出すことができます.現在、WebSocketをサポートする主流ブラウザは以下の通りです.

Chrome

Firefox

IE >= 10

Sarafi >= 6

Android >= 4.4

iOS >= 8

ツールバーの

WebSocket.onclose接続が閉じるコールバック関数

を指定するために使用される.

WebSocket.onerror接続失敗後のコールバック関数

を指定するために使用する.

WebSocket.onmessageサーバから情報を受け取るときのコールバック関数

を指定するために使用される.

WebSocket.onopen接続成功後のコールバック関数

を指定するために使用される.
方法

WebSocket.close([code[, reason]])現在のリンク

を閉じる.

WebSocket.send(data)サーバにデータ

を送信する.
使用法

export default {
  data() {
    return {
      websock: null
    }
  },
  created() {
    //           
    this.initWebSocket()
  },
  destroyed() {
    //          
    this.websocketclose()
  },
  methods: {
    initWebSocket() {
      //   weosocket
      const wsuri = 'ws://...' //ws  (    )
      this.websock = new WebSocket(wsuri)
      this.websock.onmessage = this.websocketonmessage
      this.websock.onopen = this.websocketonopen
      this.websock.onerror = this.websocketonerror
      this.websock.onclose = this.websocketclose
    },
    websocketonopen() {
      //        send      
      this.websocketsend(this.user)
      console.log('WebSocket    ')
    },
    websocketonerror(e) {
      //        
      this.initWebSocket()
    },
    websocketonmessage(e) {
      //    
      const redata = JSON.parse(e.data)
      console.log(redata.value)
    },
    websocketsend(Data) {
      //    
      this.websock.send(Data)
    },
    websocketclose(e) {
      //  
      console.log('    ', e)
    }
  }
}