WebSocket

项目需求最近研究了一下WebSocket，可以说是很强大的了。下面贴出在项目中用到的代码：

1.路径

//localhost
function routePath() {
    var reg = /mbfz.bjzhyy.org/g, url = window.location.href, reg1 = /https:/, path = {};
    path = {
        path: url.split('/')[0] + '//' + url.split('/')[2]
    };
    if (/localhos/.exec(url)) {
        path = {
           path: 'url'
        };
    }
    return path
}
//线上
function routePathWs() {
    var path = {
        path: 'url'
    };
    return path
}

2.WebSocket，注意Ws和Wss的区别，也就是http和https的区别。

//websocket方法
function connect(url, query, fn, thing) {
    websocket = null, websocket_ping = (routePathWs().path).split('//')[1];
    websocket = new WebSocket("wss://" + websocket_ping + url + query);
    websocket.onerror = function (event) {
        setMessageInnerHTML("error", event.data, websocket.readyState);
    };
//连接成功建立的回调方法
    websocket.onopen = function (event) {
        setMessageInnerHTML("open", websocket.readyState);
    };

//接收到消息的回调方法
    websocket.onmessage = function (event) {
        console.log(event.data)
        if (typeof fn == 'function') {
            fn(event)
        }
    };
//连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("close", websocket.readyState);
        socketCount++;
        if (socketCount == 3) {
            if (typeof thing == 'function') {
                thing()
            }
            return
        }
        connect(url, query, fn, thing)
    };

//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        websocket.close();
    }

}

//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
    console.log(innerHTML)
}

//关闭连接
function closeWebSocket() {
    websocket.close();
}

//发送消息
function send() {
    //var message = document.getElementById('text').value;
    //websocket.send(message);
}

3.webSocket的使用

 var value_message = function (event) {
            var text = event.data, data = '';
            try {
                text = "JSON" in window ? JSON.parse(text) : eval("(" + text + ")");
                if (text["message"] != undefined) {
                  //拿到返回的数据
                }
            } catch (e) {

            }
        };
        var thing = function () {
            window.setInterval(reject_number, 10000);
        }
        
        //注意这里reject_number返回的数据其实和webSocket返回时一样的；
        if (!!window.WebSocket && window.WebSocket.prototype.send) {
             //判断浏览器如果支持websocket，握手成功后等待服务器通知执行操作；如果websocket无效，那就走定时器执行操作
            connect('/socketService/3/', id, value_message, thing);
        } else {
            window.setInterval(reject_number, 10000);
        }