websocket 示例

$(function() {
    var lockReconnect = false;//避免重复连接
    var ws = null; //WebSocket的引用
    var wsUrl = "ws://10.0.7.254:9900"; //这个要与后端提供的相同
    function createWebSocket(){
        try {
            ws = new WebSocket(wsUrl);
            initEventHandle();
        } catch (e) {
            reconnect(wsUrl);
        }
    }
    function reconnect(url) {
        if(lockReconnect) return;
        lockReconnect = true;
        //没连接上会一直重连，设置延迟避免请求过多
        setTimeout(function () {
            createWebSocket(wsUrl);
            console.log("正在重连......")
            lockReconnect = false;
        }, 5000); //这里设置重连间隔(ms)
    }

     /*********************初始化开始**********************/
    function initEventHandle() {
        ws.onopen = function() {
            console.log("成功连接到" + wsUrl);
            //心跳检测重置
            heartCheck.reset().start();
        }
        // 收到服务器消息后响应
        ws.onmessage = function(e) {
            heartCheck.reset().start();//如果获取到消息，心跳检测重置 拿到任何消息都说明当前连接是正常的
            console.log(e.data);
            var msg = eval('(' + e.data + ')');
            if(msg.message == "heartBeat"){
                //忽略心跳的信息，因为只要有消息进来，断线重连就会重置不会触发
            }else{
                //处理消息的业务逻辑
            }
        }
        ws.onclose = function() {
            console.log("关闭连接");
            reconnect(wsUrl);
        }
        ws.onerror = function () {
            reconnect(wsUrl);
        };
    }

    //心跳检测
    var heartCheck = {
        timeout: 1000,//毫秒
        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");
console.log("HeartBeat..................................");
                self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置，说明后端主动断开了
                    // ws.close();//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
                }, self.timeout)
            }, this.timeout)
        }
    }


    $("#sendBtn").click(function() {
        console.log('发送消息...');
        if (ws.readyState ==1) {
            //自定义消息串，让后端接收
            ws.send("xxxxxx");
        }else{
            alert("当前连接超时，请刷新重试!");
        }
        return false;
    });

    // 强制退出
    window.onunload = function() {
        ws.close();
    }
    createWebSocket(wsUrl);/**启动连接**/
});