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()
