WebSocket使用（客戶端）

一、簡介

WebSocket是一種在單個TCP連接上進行全雙工通信的協議。WebSocket通信協議於2011年被IETF定為標准RFC 6455，並由RFC7936補充規范。WebSocket API也被W3C定為標准。

WebSocket使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在WebSocket API中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，並進行雙向數據傳輸。

特點包括：

• 服務器可以主動向客戶端推送信息，客戶端也可以主動向服務器發送信息，是真正的雙向平等對話，屬於服務器推送技術的一種。
• 建立在 TCP 協議之上，服務器端的實現比較容易。
• 與 HTTP 協議有着良好的兼容性。默認端口也是80和443，並且握手階段采用 HTTP 協議，因此握手時不容易屏蔽，能通過各種 HTTP 代理服務器。
• 數據格式比較輕量，性能開銷小，通信高效。
• 可以發送文本，也可以發送二進制數據。
• 沒有同源限制，客戶端可以與任意服務器通信。
• 協議標識符是ws（如果加密，則為wss），服務器網址就是 URL。

兼容性一覽：

二、使用

1、客戶端的使用

1.1 使用代碼

let ws = new WebSocket("wss://echo.websocket.org")

ws.onopen = function(evt) { 
  console.log("Connection open ...")
  ws.send("Hello WebSockets!")
}

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data)
  ws.close()
}

ws.onclose = function(evt) {
  console.log("Connection closed.")
}

1.2 WebSocket API

1.2.1 WebSocket 構造函數

WebSocket 對象作為一個構造函數，用於新建 WebSocket 實例

const socket = new WebSocket('ws://localhost:8080')

執行上面語句之后，客戶端就會與服務器進行連接。

對象的所有屬性和方法清單，點擊這里查看

1.2.2 屬性

readyState

返回當前 WebSocket 的鏈接狀態，只讀。

使用語法

let readyState = socket.readyState;

返回值

• 0 (WebSocket.CONNECTING)

  正在鏈接中

• 1 (WebSocket.OPEN)

  已經鏈接並且可以通訊

• 2 (WebSocket.CLOSING)

  連接正在關閉

• 3 (WebSocket.CLOSED)

  連接已關閉或者沒有鏈接成功

bufferedAmount

WebSocket.bufferedAmount是一個只讀屬性，用於返回已經被send()方法放入隊列中但還沒有被發送到網絡中的數據的字節數。一旦隊列中的所有數據被發送至網絡，則該屬性值將被重置為0。但是，若在發送過程中連接被關閉，則屬性值不會重置為0。如果你不斷地調用send()，則該屬性值會持續增長。表示還有多少字節的二進制數據沒有發送出去。它可以用來判斷發送是否結束

var data = new ArrayBuffer(10000000);
socket.send(data);

if (socket.bufferedAmount === 0) {
  // 發送完畢
} else {
  // 發送還沒結束
}

使用語法

let bufferedAmount = aWebSocket.bufferedAmount

另外還有4個屬性：

• url
• protocol
• extensions
• binaryTyp

以上屬性不常用，不做展開，需要可參考文檔 https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

1.2.3 事件

使用 addEventListener() 或將一個事件監聽器賦值給本接口的 oneventname 屬性，來監聽下面的事件。

首先創建一個連接

// Create WebSocket connection
// 創建一個 WebSocket 連接
const socket = new WebSocket('ws://localhost:8080')

close

當一個 WebSocket 連接被關閉時觸發。

// 監聽連接被關閉
socket.addEventListener('close', function (event) {
  console.log('WebSocket close: ', event)
})

也可以通過 onclose 屬性來設置。

socket.onclose = function(event) {
  console.log("WebSocket is closed now.")
}

error

當一個 WebSocket 連接因錯誤而關閉時觸發，例如無法發送數據時。

// 監聽可能發生的錯誤socket.addEventListener('error', function (event) {  
   console.log('WebSocket error: ', event)
})

也可以通過 onerror 屬性來設置.

socket.onerror  = function(event) {  
   console.log("WebSocket error:", event)
}

message

兼容性一覽

當通過 WebSocket 收到數據時觸發。

// 監聽消息socket.addEventListener('message', function (event) {    
   console.log('Message from server ', event.data)
})

也可以通過 onmessage屬性來設置。

socket.onmessage = function(event) {  
   console.debug("WebSocket message received:", event)
}

open

當一個 WebSocket 連接成功時觸發。

socket.addEventListener('open', function (event) {    
   console.log('WebSocket is open now')
})

也可以通過 onopen 屬性來設置。

socket.onopen = function(event) {  
   console.log("WebSocket is open now.")
}

1.2.4 方法

首先創建一個連接

// Create WebSocket connection
// 創建一個 WebSocket 連接
const socket = new WebSocket('ws://localhost:8080')

發送

瀏覽器兼容性一覽，火狐瀏覽器pc和移動端部分存在兼容問題

使用方法：

socket.send("Hello server!")

用於傳輸至服務器的數據。它必須是以下類型之一：

• USVString

  文本字符串。字符串將以 UTF-8 格式添加到緩沖區，並且 bufferedAmount 將加上該字符串以 UTF-8 格式編碼時的字節數的值。

• ArrayBuffer

  您可以使用一有類型的數組對象發送底層二進制數據；其二進制數據內存將被緩存於緩沖區，bufferedAmount 將加上所需字節數的值。

• Blob

  Blob 類型將隊列 blob 中的原始數據以二進制中傳輸。 bufferedAmount 將加上原始數據的字節數的值。

• ArrayBufferView

  您可以以二進制幀的形式發送任何 JavaScript 類數組對象 ；其二進制數據內容將被隊列於緩沖區中。值 bufferedAmount 將加上必要字節數的值。

異常

INVALID_STATE_ERR

當前連接未處於 OPEN 狀態。

SYNTAX_ERR

數據是一個包含未配對代理(unpaired surrogates)的字符串。

關閉

WebSocket.close() 方法關閉 WebSocket 連接或連接嘗試（如果有的話）。 如果連接已經關閉,則此方法不執行任何操作。

使用方法

socket.close();

補充：vue使用示例

<template>
  <div style="display: none">
  </div>
</template>

<script>
export default {
  components: {
  },
  data () {
    return {
      socket: null,
    }
  },
  mounted: function () {
  },
  methods: {
    openSocket: function () {
      if (typeof (WebSocket) == 'undefined') {
        alert('當前瀏覽器不支持websocket')
        return
      }
      let self = this
      // 實現化WebSocket對象，指定要連接的服務器地址與端口  建立連接
      let isHttps = document.location.protocol == 'https:'
      let head = 'ws://'
      if (isHttps) {
        head = 'wss://'
      }
      // 動態獲取協議於域名組裝路徑
      let socketUrl = head + window.location.host + '/baseWebSocket/'
      this.socket = new WebSocket(socketUrl)
      // 打開事件
      this.socket.onopen = function () {
        console.log('打開事件')
      }
      // 獲得消息事件
      this.socket.onmessage = function (msg) {
        console.log('獲得消息事件')
        console.log(msg)
      }
      // 關閉事件
      this.socket.onclose = function () {
        console.log('關閉事件')
      }
      // 發生了錯誤事件
      this.socket.onerror = function () {
        console.log('發生了錯誤事件')
      }
    }
  }
}
</script>