webSocket通用对象封装,心跳检测+断线重连

本文介绍了一种WebSocket封装方法,包括基本事件处理、心跳检测及断线重连功能。通过封装,开发者可以轻松实现与硬件的稳定通信。

webSocket通用对象封装

项目中很多用到webSocket与硬件对接,为此封装通用工具
1.websocket四大基础事件
2.扩展心跳检测与断线重连功能
3.核心对象封装,生成与销毁不需要客户端控制

      function sesWebSocket(wsurl) {
    this.connectURL = wsurl || "";
    this.time = 5000;//心跳时间
    this.heartMsg = ""; //心跳发送内容
    this.timeoutObj =null;
    this.serverTimeoutObj =null;
    this.reconnectTime =null;
    this.isDestroy = false;
    this.onopen= function(event) {
        // 自定义WSC连接事件:服务端与前端连接成功后触发
        console.log(event)
    };
    this.onmessage= function(event) {
        // 自定义WSC消息接收事件:服务端向前端发送消息时触发
        console.log(event)
    };
    this.onerror= function(event) {
        // 自定义WSC异常事件:WSC报错后触发
        console.log(event)
    };
    this.onclose= function(event) {
        // 自定义WSC关闭事件:WSC关闭后触发
        console.log(event)
    };
    this.webSocketObj = new WebSocket(wsurl);
}
sesWebSocket.fn = sesWebSocket.prototype = {
    create : function(obj) {
        if(obj){
            $.extend(true, this, obj);
        }
        var websocket = this.webSocketObj;
        var currentThis = this;
        websocket.onopen = function(evnt) {

            currentThis.onopen(evnt);
        };
        websocket.onmessage = function(evnt) {

            currentThis.onmessage(evnt);
        };
        websocket.onerror = function(evnt) {

            currentThis.onerror(evnt);
        };
        websocket.onclose = function(evnt) {

            currentThis.onclose(evnt);
            currentThis.aaa();
        };
        this.reconnectTime = currentThis.reconnectTime;
    },
    aaa:function(){
        if(!this.isDestroy){
            this.isDestroy = true;
            this.webSocketObj.close();
            var c  =  this;
            this.reconnectTime=setTimeout(function(){
                c.reconnect();
            },c.time)
        }
    },
    destroy : function() {
        clearTimeout(this.timeoutObj);
        clearTimeout(this.serverTimeoutObj);
        clearTimeout(this.reconnectTime);
        this.isDestroy = true;
        this.webSocketObj.close();
    },
    heartStart : function(time, msg) {
        if (this.webSocketObj.readyState != 1) {
            return false;
        }
        if(time){
            this.time = time;
        }
        if(msg){
            this.heartMsg = msg;
        }
        var self = this;
        this.timeoutObj = setTimeout(function() {
            self.webSocketObj.send(msg);
            self.serverTimeoutObj = setTimeout(function() {
                self.reconnect();
            }, self.time)
        }, this.time);
        this.serverTimeoutObj = self.serverTimeoutObj;
    },
    heartReset: function(){
        clearTimeout(this.timeoutObj);   
        clearTimeout(this.serverTimeoutObj);
        var time = this.time;
        var msg = this.heartMsg;
         this.heartStart(time,msg);
    },
    reconnect : function() {
        if(this.timeoutObj){
            clearTimeout(this.timeoutObj);
            clearTimeout(this.serverTimeoutObj);
        }
        var wsurl= this.connectURL;
        this.webSocketObj = new WebSocket(wsurl);
        this.isDestroy = false;
        this.create();
    },
}
var $sesWebSocket = function(wsurl) {
    return new sesWebSocket(wsurl);
}

sesWebSocket.export = function(fn) {
    jQuery.extend(sesWebSocket.prototype, fn);
}


//jsp页面代码
var url = "ws://127.0.0.1:8888";
    var wsobj =  $sesWebSocket(url);
    var opt ={
        onopen:function(event){
            wsobj.webSocketObj.send("ws send message");
            wsobj.heartStart(5000,'heart send message');
        },
        onmessage:function(event){
            wsobj.heartReset();
        } 
    }
    wsobj.create(opt); 

    var url2 = "ws://192.168.126.11:8888";
    var wsobj2 =  $sesWebSocket(url2);
    var opt2 ={
        onopen:function(event){
            wsobj2.webSocketObj.send("ws send message");
            wsobj2.heartStart(5000,'heart send message');
        },
        onmessage:function(event){
            wsobj2.heartReset();
        } 
    }
    wsobj2.create(opt2); 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值