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

前端人發表於2021-08-16
HTMLWeb

一、為什麼要學 WebSocket?

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

websocket 與 http 區別：

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

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

 

HTML5(十一)——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()

相關文章