HTML5 WebSocket 詳解及使用

WebSocket 沒用過的同學，聽上去，可能覺得很難，其實很簡單，本章講解了WebSocket基本信息，以及附有代碼例子

WebSocket 是什麼？
WebSocket 是 HTML5 提供的一種在單個 TCP 連接上進行全雙工通訊的協議。（雙向通信協議）

WebSocket 的作用？
實現客戶端與服務器之間的雙向通信，允許服務端主動向客戶端推送數據。

在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，並進行雙向數據傳輸。

WebSocket 和 HTTP 區別？
相同點：

        1. WebSocket  都是一樣基於 TCP 的可靠性傳輸協議；

異同點：

        1. WebSocket  可以雙向發送或接受信息，而 HTTP 是單向的（HTTP 通信只能由客戶端發起，不具備服務器主動推送能力）；

        2. WebSocket  的使用，需要先進行一次 客戶端與服務器的握手，兩者建立連接後纔可以正常雙向通信，而 HTTP 是一個 主動的 Request 對應一個 被動的Response；

WebSocket 的協議標識符？
如果服務器網址是 HTTP 那麼 WebSocket  對應的是 ws

如果服務器網址是 HTTPS 加密的 那麼 WebSocket  對應的是 wss

WebSocket 的作用總結？
WebSocket  是爲了能夠實現在 web 應用上與服務器進行雙向通信的需求 而產生出來的協議，

相比於輪詢 HTTP 請求的方式，WebSocket 節省了服務器資源，有效的提高了效率。

WebSocket 常用方法
常用方法    描述
Socket.send()    通過 Socket 向服務器發送信息
Socket.close()    關閉 Socket 連接

WebSocket 常用屬性
常用屬性    描述    
Socket.readyState    獲取當前鏈接狀態    0:正在連接中，1:連接正常可以通信，2:連接關閉中，3:連接已關閉/連接失敗
Socket.url    獲取當前連接地址    
Socket.binaryType    獲取傳輸的數據類型    


WebSocket 生命週期
生命週期    描述
Socket.onopen     連接建立時觸發
Socket.onmessage    客戶端接收服務端數據時觸發
Socket.onerror    通信發生錯誤時觸發
Socket.onclose    連接關閉時觸發

// 設定默認值
var websock = null;
 
// 每10分鐘 通過 websocket 向服務器發送一次心跳 證明客戶端沒有離線 依然在線可以正常接受消息
setInterval(this.websocketsend, 100000);
 
 
initWebsocket() {
    /*
    * 初始化 websock
    * 連接 服務器地址
    * 並綁定 websock 四個事件方法
    */
    this.websock = new WebSocket('ws://localhost:8080?userId=1');
    // 接收服務器返回的數據
    this.websock.onmessage = this.websocketonmessage;
    // 連接建立時觸發
    this.websock.onopen = this.websocketonopen;
    // 連接中發生異常
    this.websock.onerror = this.websocketonerror;
    // 連接關閉時觸發
    this.websock.onclose = this.websocketclose;
}
 
 
websocketonopen() {
    /*
    * websocket 初始化後 執行的方法
    * 調用 發送數據方法    
    */
    this.websocketsend();
},
 
 
websocketonerror() {
    /*
    * websocket 連接建立失敗 執行的方法
    * 注：我這裏加了個判斷，如果聯繫建立失敗就在連接幾次
    */
    if(this.cishu < 5){
        this.cishu = this.cishu + 1;
        this.initWebsocket();
    }
},
 
 
websocketsend() {
    
    /*
    * websocket 數據發送 通過 websock.send() 方法向服務器發送數據
    * 注：這裏隨便發哈，主要作用就是通過這個動作，讓客戶端與服務端建立聯繫
    */
    let actions = {
        "test": "12345"
    };
    this.websock.send(JSON.stringify(actions));
},
 
 
websocketclose(e) { 
    /*
    * websocket 連接關閉 執行的方法
    */
    console.log('斷開連接', e);
},
 
 
websocketonmessage(e) {
    /*
    * websocket 數據接收 執行的方法
    * 注：服務器通過 websocke 向客戶端發送數據時，這裏的方法就會自動觸發啦
    */
    const redata = JSON.parse(e.data);
    switch (redata.messageType) {
        case 0: // 售後 提示
        // ... 執行
        break;
        case 1: // 庫存 提示
        // ... 執行
        break;
        case 2: // 下架 提示
        // ... 執行
        break;
    }
},
 
 

 

 

 

 

 

 

----