websocket的封裝寫法

忘了是哪里抄的，感謝那位仁兄。

代碼其他不需要改 ，，，只要改wsUrl變量,代碼邏輯在doWithMsg函數中,因為還有心跳檢測，會向后端發送心跳數據，需要返回數據，這個要后端配合下

<script>
    var ws;//websocket實例
    var lockReconnect = false;//避免重復連接
    var wsUrl = "xxx";
 
    function createWebSocket(url) {
        try {
            if ('WebSocket' in window) {
                ws = new WebSocket(url);
                initEventHandle();
            }else{
                console.log('您的瀏覽器不支持websocket')
            }
        } catch (e) {
            reconnect(url);
        }
    }
    function initEventHandle() {
        ws.onclose = function (evnt) {
            //console.log('websocket服務關閉了');
            reconnect(wsUrl);
        };
        ws.onerror = function (evnt) {
            //console.log('websocket服務出錯了');
            reconnect(wsUrl);
        };
        ws.onopen = function (evnt) {
            //心跳檢測重置
            heartCheck.reset().start();
        };
        ws.onmessage = function (evnt) {
            //如果獲取到消息，心跳檢測重置
            //拿到任何消息都說明當前連接是正常的
            //console.log('websocket服務獲得數據了');
 
            //接受消息后的UI變化
            doWithMsg(evnt.data);
            heartCheck.reset().start();
        }
        //收到消息推送
        function doWithMsg(msg) {
            // json數據轉換成js對象
            var data = eval("(" + msg + ")");
            var type = data.type || '';
            switch (type) {
                // 返回的init類型的消息，將client_id發給后台進行uid綁定
                case 'init':
                    // 利用jquery發起ajax請求，將client_id發給后端進行uid綁定
                    // $.post('./bind.php', {client_id: data.client_id}, function(data){}, 'json');
                    break;
                case 'content':
                    var value = array[Math.round(Math.random()*(array.length-1))];
                    // var data = JSON.parse(JSON.stringify(data.data))
                    break;
                default:
                    console.log(data);
            }
        }
    }
    function reconnect(url) {
        if(lockReconnect) return;
        lockReconnect = true;
        //沒連接上會一直重連，設置延遲避免請求過多
        setTimeout(function () {
            createWebSocket(url);
            lockReconnect = false;
        }, 5000);
    }
    //心跳檢測
    var heartCheck = {
        timeout: 60000,//60秒
        timeoutObj: null,
        serverTimeoutObj: null,
        reset: function(){
            clearTimeout(this.timeoutObj);
            clearTimeout(this.serverTimeoutObj);
            return this;
        },
        start: function(){
            var self = this;
            this.timeoutObj = setTimeout(function(){
                //這里發送一個心跳，后端收到后，返回一個心跳消息，
                //onmessage拿到返回的心跳就說明連接正常
                ws.send("HeartBeat");
                self.serverTimeoutObj = setTimeout(function(){//如果超過一定時間還沒重置，說明后端主動斷開了
                    ws.close();//如果onclose會執行reconnect，我們執行ws.close()就行了.如果直接執行reconnect 會觸發onclose導致重連兩次
                }, self.timeout)
            }, this.timeout)
        }
    }
    //初始化websocket
    createWebSocket(wsUrl);
</script>