HTML5(十一)——WebSocket 基礎教程

一、為什么要學 WebSocket?

websocket 是 HTML5 提供的一種長鏈接雙向通訊協議，使得客戶端和服務器之間的數據交換更簡單，允許服務端主動向客戶端推送數據，並且客戶端與服務端只需連接一次，就可以保持長久連接，並進行數據通信。

websocket 與 http 區別：

• http 鏈接分為長鏈接、短鏈接，短鏈接是發送一個請求，返回一個響應，長鏈接是在一定周期內保持鏈接。但是 websocket 只需連接一次就可以保持長鏈接，不需要的時候可以手動斷開。
• http 通信中，客戶端是主動的，服務端是被動的。但是 websocket，服務端可以主動向客戶端推送數據。
• http 通過輪詢建立的長鏈接，多次建立 request / response 會產生冗余的頭部信息。

ajax 輪詢與 websocket 通信原理如圖：

 

 

 

websocket 就是為了解決客戶端發起多個 http 請求到服務器資源，瀏覽器必須要經過長時間的，輪詢問題而生的，實現多路復用。它最大特點就是服務器可以主動向客戶端推送信息。

二、WebSocket 對象

2.1、創建對象：

let ws = new WebSocket( url , [ protocol ] )

url：指定連接的后台服務地址。

protocol：指定可接受的子協議，是可選參數。

2.2、對象屬性

readyState：表示連接狀態，是一個只讀屬性。

使用語法：ws.readyState

返回的值有4個，分別表示的意義：

• 0 - 未建立連接
• 1 - 已建立連接，可正常通信
• 2 - 連接正在進行關閉
• 3 - 連接已經關閉或斷開，無法通信

bufferedAmount：已被放入等待傳輸隊列，但是還沒有發出的 UTF-8 文本字節數，也是只讀屬性。

2.3、對象事件

onopen - 連接時觸發，用於指定連接成功后的回調函數。

使用語法：

// 方法一 ：只可以指定一個回調函數
ws.onopen = function(){

}
//方法二 ：可以指定多個回調函數
ws.addEventListener('open',function(){

})

 

onclose - 關閉時觸發，指定連接關閉時回調函數。

使用語法：與 onopen 完全一致。

onmessage - 客戶端接收服務端數據時觸發，指定回調函數。

使用語法：

// 方法一：
ws.inmessage = function(event){
    let data = event.data
  //服務器傳給客戶端的數據
}
// 方法二：
ws.addEventListener('inmessage', function(event){
    let data = event.data
  //服務器傳給客戶端的數據
})

 

onerror - 通信發生錯誤時觸發，並指定回調函數。

使用語法：

//方法一
ws.onerror = function(){
//錯誤處理
}
//方法二
ws.addEventListener('error',function(){
//錯誤處理
})

 

2.3、對象事件

send - 用於向服務器發送數據。

使用語法：

ws.send( data )

data ：是發給服務器的數據，這個數據可以是字符串、數組、json、Blob 對象或 ArrayBuffer 對象等。

如發送 Blob 對象例子：

var file = document.querySelector('input='file'').files[0]
ws.send(file)

close - 關閉連接

使用語法：

ws.close()