WebSocket理解與使用

1、WebSocket 理解

1. 概念： WebSocket 是 HTML5 開始提供的一種在單個 TCP 鏈接上進行全雙工通信的協議。

2. 特色： WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，容許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只須要完成一次握手，二者之間就直接能夠建立持久性的鏈接，並進行雙向數據傳輸。

3. 流程： 在 WebSocket API 中，瀏覽器和服務器只須要作一個握手的動做，而後，瀏覽器和服務器之間就造成了一條快速通道。二者之間就直接能夠數據互相傳送。

4. 目前： 如今，不少網站爲了實現推送技術，所用的技術都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP請求，而後由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點，即瀏覽器須要不斷的向服務器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費不少的帶寬等資源。

5. 優點： HTML5 定義的 WebSocket 協議，能更好的節省服務器資源和帶寬，而且可以更實時地進行通信。

2、WebSocket 屬性

1. WebSocket 對象

let ws = new WebSocket('ws://localhost:3000')  // 建立 WebSocket 對象

2. WebSocket 對象屬性：

屬性	描述
ws.readyState	只讀屬性 readyState 表示鏈接狀態，能夠是如下值: 0 - 表示鏈接還沒有創建。 1 - 表示鏈接已創建，能夠進行通訊。 2 - 表示鏈接正在進行關閉。 3 - 表示鏈接已經關閉或者鏈接不能打開。

3. WebSocket 對象事件：

事件	事件處理程序	描述
open	ws.onopen	鏈接創建時觸發
message	ws.onmessage	客戶端接收服務端數據時觸發
error	ws.onerror	通訊發生錯誤時觸發
close	ws.onclose	鏈接關閉時觸發

4. WebSocket 對象方法：

方法	描述
ws.send()	使用鏈接發送數據
ws.close()	關閉鏈接

3、WebSocket 使用

// 建立 WebSocket 對象
let ws = new WebSocket('ws://localhost:3000')
// 定時器
let timer;

// 監聽打開
ws.onopen = webSocketOpen;
// 監聽異常
ws.onerror = webSocketError;
// 監聽消息
ws.onmessage = webSocketMessage;
// 監聽關閉
ws.onclose = webSocketClose;


function webSocketOpen() {
    console.log(`鏈接成功`)
    start()
},

function webSocketError() {
    console.log(`鏈接異常，請刷新頁面重試`)
},

function webSocketMessage(e) {
    console.log(`接收到消息:${e.data}`)
},

function webSocketClose() {
    console.log(`鏈接關閉`)
    clearInterval(timer)
},

// 發送心跳, 由於長時間不發送消息，就會斷
function start() {
  clearInterval(timer)
  timer = setInterval(() => {
    let date = new Date()
    ws.send(`發送心跳給後端${date}`)
  }, 2 * 60 * 1000)
}

4、WebSocket 應用

1. 雙向通訊，如聊天室。

2. 微信小程序對 WebSocket 進行了封裝，wx.connectSocket() 能夠理解爲建立了一個 WebSocket 實例 SocketTask。

3. socket.io 支持 WebSocket、輪詢、HTTP 流等方式。