websocket（一）封裝使用

介紹

WebSocket用於在Web瀏覽器和服務器之間進行任意的雙向數據傳輸的一種技術。WebSocket協議基於TCP協議實現，包含初始的握手過程，以及后續的多次數據幀雙向傳輸過程。其目的是在WebSocket應用和WebSocket服務器進行頻繁雙向通信時，可以使服務器避免打開多個HTTP連接進行工作來節約資源，提高了工作效率和資源利用率。

API介紹

1. 構造函數WebSocket(url, protocols)：構造WebSocket對象，以及建立和服務器連接; protocols可選字段，代表選擇的子協議
2. 狀態變量readyState: 代表當前連接的狀態，短整型數據，取值為CONNECTING(值為0)， OPEN(值為1), CLOSING(值為2), CLOSED(值為3)
3. 方法變量close(code, reason)： 關閉此WebSocket連接。
4. 狀態變量bufferedAmount: send函數調用后，被緩存並且未發送到網絡上的數據長度
5. 方法變量send(data): 將數據data通過此WebSocket發送到對端
6. 回調函數onopen/onmessage/onerror/onclose: 當相應的事件發生時會觸發此回調函數

代碼

這里采用封裝的思想 WBT

var WBT = function (obj) {
    /*
    websocket接口地址
    1、http請求還是https請求 前綴不一樣
    2、ip地址host
    3、端口號
    */
    const config = obj ? obj : {}
    const protocol = (window.location.protocol == 'http:') ? 'ws://' : 'wss://';
    const host =  window.location.host;
    const port = ':8087';
    //接口地址url
    this.url = config.ip || protocol + host + port;
    //socket對象
    this.socket;
    //心跳狀態  為false時不能執行操作 等待重連
    this.isHeartflag = false;
    //重連狀態  避免不間斷的重連操作
    this.isReconnect = false;
    //自定義Ws連接函數：服務器連接成功
    this.onopen = ((e) => {
        this.isHeartflag = true;
        console.log(e)
    })
    //自定義Ws消息接收函數：服務器向前端推送消息時觸發
    this.onmessage = ((e) => {
        //處理各種推送消息
// console.log(message)
        this.handleEvent(message)
    })
    //自定義Ws異常事件：Ws報錯后觸發
    this.onerror = ((e) => {
        console.log('error')
       this.isHeartflag = false;
        this.reConnect();
    })
    //自定義Ws關閉事件：Ws連接關閉后觸發
    this.onclose = ((e) => {
        this.reConnect()
        console.log('close')
    })
    //初始化websocket連接
    this.initWs()
}

初始化 initWs

//初始化websocket連接 
WBT.prototype.initWs = function () {
     window.WebSocket = window.WebSocket || window.MozWebSocket;
     if (!window.WebSocket) { // 檢測瀏覽器支持              
         console.error('錯誤: 瀏覽器不支持websocket');
         return;
     }
     var that = this;
     this.socket = new WebSocket(this.url); // 創建連接並注冊響應函數  
     this.socket.onopen = function (e) {
         that.onopen(e);
     };
     this.socket.onmessage = function (e) {
         that.onmessage(e);
     };
     this.socket.onclose = function (e) {
         that.onclose(e);
         that.socket = null; // 清理          
     };
     this.socket.onerror = function (e) {
         that.onerror(e);
     }
     return this;                                            
}

斷線重連 reConnect

WBT.prototype.reConnect = function () {
    if (this.isReconnect) return;
    this.isReconnect = true;
    //沒連接上會一直重連，設置延遲避免請求過多
    setTimeout(function () {
        this.initWs()
        this.isReconnect = false;
       }, 2000);
}    

處理消息 handle

//處理消息
WBT.prototype.handleEvent = function (message) {
       const action = message.action;
    const retCode = message.params.retCode.id;
    //根據action和retCode處理事件
    // console.log(action,retCode)
    if (this.handleAction[action][retCode]) this.handleAction[action][retCode]();
}
//事務處理 根據action
WBT.prototype.handleAction = {
     //登錄反饋
   'loginRsp': {
        '0': function () {
            console.log(0)
        },
        '3': function () {
            console.log(3)
        }
    }
}

發送消息-登錄login

let defaultParam = {
    action: "loginReq",
    tsxId: "1",
    params:{}
}
WBT.prototype.login = function (params) {
    //ws還沒建立連接（發生錯誤）
    if (!this.isHeartflag) {
        console.log('連接中……')
          return;
    }
    let loginParam = defaultParam;
    loginParam.params = params;
    //組裝json數據
    this.socket.send(JSON.stringify(loginParam))
}

使用 index.html

var WS = new WBT()
var b = {
    dc: {
        id: "admin",
        passwd: "21232f297a57a5a743894a0e4a801fc3",
        version: "UDT-0.3.0"
    }
}
//發送消息
WS.login(b)