首页 > 程序分享 > JS WebSocket类 - 包含[ 断线重连, 心跳检测, 粘包抑制 ]
2018
09-13

JS WebSocket类 - 包含[ 断线重连, 心跳检测, 粘包抑制 ]


本方法是自己写的一个JS封装类,用于客户的机于服务器端的通讯,后端我用python完成的代码后期放出来,之前遇到过一个坑爹的问题就是客户端的粘包问题,原因是为了提高数据包效率同时发送的代码被粘在一起发送导致,目前无法解决,在网上找到了很多例子但是都不满足需要,有解决方案就是发送报头,后期如果解决会陆续跟进更新


/**
 * WebSocket类 - 包含[ 断线重连, 心跳检测, 粘包抑制 ]
 * @param __TF [true自动启动,默认false] 或 {
 *                                             host:str ws://地址:端口,
 *                                             name:str 客户端名称,
 *                                             onopen:fun 握手成功后触发,
 *                                             onclose:fun 关闭会话后触发,
 *                                             onmessage:fun 接收信息是触发,
 *                                             autoLink:bool 是否自动重连
 *                                             auto:bool 是否自动启动
 *                                            }
 * @returns {SKT}
 * @constructor {
 *                  onopen:fun 握手成功后触发,
 *                  onclose:fun 关闭会话后触发,
 *                  onmessage:fun 接收信息是触发,
 *                  start:fun 开始握手,
 *                  send:fun(str) 发送信息,
 *                  close|stop:fun 停止方法,
 *                  host:str ws://地址:端口,
 *                  name:str 客户端名称,
 *                  autoLink:bool 是否自动重连,默认true
 *                 }
 */
var WSK=function(__TF){
    this.host="ws://127.0.0.1";this.socket=null;this.name='';
    this.autoLink=!0; //--允许断线重连
    this.onopen = function(s){if(typeof s == 'function')this.onopen=s;};
    this.onmessage = function(msg){if(typeof msg == 'function'){this.onmessage=msg;}};
    this.onclose = function(s){if(typeof s == 'function'){this.onclose=s;}};
    /**
     * 开启一个握手会话
     */
    this.start=function() {
        try {
            var that=this;
            this.socket = new WebSocket(this.host);
            this.socket.onopen = function () {
                that.__autoLink_num=0;
                clearTimeout(this.__autoLink_t);
                that.socket.send('__reg__:' + that.name);
                that.__hart();//--定时心跳----
                that.onopen();
            };
            this.socket.onmessage = function (e) {
                if(e.data == '__quit__'){
                    that.close(); return !0;
                }
                var s = that.onmessage(e.data);
                if (s === undefined  || s === null) return !0;
                that.send(s);
            };
            this.socket.onclose = function () {
                that.__autoLink(); //--握手尝试器
            };
        }
        catch (ex) {
            this.__autoLink();
        }
    };
    /**
     * 关闭通讯
     * @type {WSK.stop}
     */
    this.close = this.stop = function () {
        clearTimeout(this.__autoLink_t);
        this.autoLink=!1; //告诉系统不用重试了本操作是人工或服务端停止的
        this.__tmp=[];    //清空排队阵列
        try {this.socket.close();}catch (ex) {}
    };
    /**
     * 发送数据到服务端 引入排队机制规避粘包问题
     * @param msg 要发送的信息
     * @returns {boolean}
     */
    this.send = function (msg) {
        if (msg === undefined  || msg === null) return !1;
        var that=this;
        try{
            if(typeof msg == "boolean") msg=msg?'!0':'!1';//--布尔类型就转换一下形式
            else msg=JSON.stringify(msg);
        }catch(e){msg=msg.toString();}
        this.__tmp.push(msg);
        if(that.__t === undefined) {//--阻止粘包事件策略------------
            this.__t = setInterval(function () {
                if (that.socket.bufferedAmount == 0) //--如果缓冲区在忙碌及等定时器下一轮
                    if (that.__tmp.length) {
                        try{
                            that.socket.send(that.__tmp[0]);
                            
                        }catch (e) {}that.__tmp.splice(0, 1);

                    } else {
                        clearInterval(that.__t);
                        that.__t = undefined;
                    }
            }, 5);
        }
    };
    this.__tmp=[];//--排队缓存
    /**
     * 定时器心跳
     * @param T
     * @returns {boolean}
     */
    this.__hart=function(T){
        if(socket.readyState==2 || socket.readyState==3) return !1;
        if(T) socket.send('__reg__'); //--心跳
        setTimeout(function () {
            this.__hart(1);//log('心跳')
        },5000);
    };
    /**
     * 自动重连内置方法
     * @private
     */
    this.__autoLink_t={};//--重试定时器
    this.__autoLink_num=0;//--重复计数器--
    this.__autoLink = function () {
        if(this.autoLink){
            var that = this;
            this.__al_time=this.__al_time?this.__al_time:1000;
            this.__autoLink_t=setTimeout(function () {
                that.__autoLink_num++;
                if(that.__autoLink_num>2){
                    that.__al_time = 5000;
                }
                if(that.__autoLink_num>10){
                    console.log('放弃尝试....');
                    that.autoLink=!1;
                    that.onclose();
                    return !1;
                }
                console.log('['+that.__autoLink_num+'] 尝试重连...');
                that.start();
            },this.__al_time);
        }else this.onclose();
    };
    if(typeof __TF == 'object' && __TF){ //--传递参数--赋值
        if(__TF.hasOwnProperty('host'))this.host=__TF['host'];
        if(__TF.hasOwnProperty('name'))this.name=__TF['name'];
        if(__TF.hasOwnProperty('onopen') && typeof __TF['onopen'] == 'function')this.onopen(__TF['onopen']);
        if(__TF.hasOwnProperty('onclose') && typeof __TF['onclose'] == 'function')this.onclose(__TF['onclose']);
        if(__TF.hasOwnProperty('onmessage') && typeof __TF['onmessage'] == 'function')this.onmessage(__TF['onmessage']);
        if(__TF.hasOwnProperty('autoLink'))this.autoLink=__TF['autoLink']?true:false;
        if(__TF.hasOwnProperty('auto') && __TF['auto'])this.start();
    }else if(__TF === true) this.start();
    return this;
};



调用实例:

/**---配置参数目录----------------------*/
        window.o=WSK({
            host:"ws://服务器地址:端口",
            name:'客户端名称'
        });
        o.onopen(function(){
            console.log('成功握手')
        });
        o.onmessage(function(msg){
            console.log(msg)
        });
        o.onclose(function(){
            console.log('连接断开')
        });

        $("#start").click(function () {
            o.start();
        });
        $("#stop").click(function () {
            o.stop();
        });


服务器端,命令参考,功能需要您自行编写:


接收来自客户端的命令:
 __reg__:注册名称  服务器端先握手再接收注册,指定时间内不注册断开握手(看作登录吧)
 __reg__ 心跳检测  服务器端接收心跳,如果心跳不存在就断开客户端连接




最后编辑:
作者:Tony
这个人很懒什么也没留!~

发布评论

表情