知識精華—WebSocket協議

一.WebSocket功能介紹

1.HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議

2.客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據

3.瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，並進行雙向數據傳輸

4.沒有同源策略的限制，不存在跨域問題

5.協議的標識符就是ws；像https一樣如果加密的話就是wxs

二.與HTTP請求對比

之前實現前後端持續性的進行交互的方式是通過http請求輪詢來實現的

這種傳統的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。

HTML5 定義的 WebSocket 協議，能更好的節省服務器資源和帶寬，並且能夠更實時地進行通訊。

三.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()	關閉連接

六. 簡單實例

  let ws = new WebSocket('ws://xxx.xxx/xxx')
  // console.log(ws.readyState)  可以在不同的週期輸出這個值，用來檢測週期
  ws.onopen = function () {
      console.log('client：打開連接')
      ws.send('client：hello，服務端') // 連接之後就想服務器發送一條信息
  }
  ws.onmessage = function (e) {
      console.log(e)
      setTimeout(() => {
        ws.close() // 獲取數據5000ms之後斷開連接 close函數可以隨時隨地調用
      }, 5000)
  }
  ws.onclose = function (params) {
      console.log('連接關閉時觸發')
  }
  ws.onerror = function (params) {
      console.log('通信發生錯誤時觸發')
  }

 借鑑地址：https://www.runoob.com/html/html5-websocket.html

 借鑑地址：https://www.jianshu.com/p/3b5fbc1abc9d