websocket 断线重连

﹥>﹥吖頭↗ 提交于 2019-12-07 15:46:50

websocket是html5发布之后出现的一种新技术,说它是新技术,其实也不是多新的技术了,因为毕竟也有2-3年了,但是找了很多国内的实例,缺发现不多,不知道是它不好用呢,还是说这种技术原来就有缺陷呢,咱们暂且不说,今天我们就来介绍一下websocket的断线重连,,,,

这里先提供一个类库,https://github.com/joewalnes/reconnecting-websocket ,这是一个websocket重连的类库,对于处理一些简单的断线重连问题还是比较好用的,,,而且其中的功能也比较全,有兴趣的朋友可以去研究一下

接来我要介绍的是我在一个项目中遇到的问题,这是一个比较普遍的断线重连问题。。。好啦,废话不多说,我们直接看例子

首先呢 ,我们要创建一个websocket对象,其中对象的参数是我们要连接的地址,这个一般是服务端提供的。。。

var ws = new WebSocket('ws:../../websocket');

然后我们重写一下监听收到消息的事件,

ws.onmessage = function(msg){
    console.log('msg:',msg);
    //do something
};

接下来我们重写一下监听关闭连接的事件,

ws.onclose = function(){
    console.log('closed....');
};

OK,这样的话,最简单的一个websocket就写好了,那么接下来我们就要实现断线重连的功能了喽,往下看。。。

function reconnect (){
    rews = new WebSocket('ws:../../websocket');
    rews.onmessage = function(){
      //dosomthing  
    };
    rews.onclose = function(){
        //dosomthing
    };
}

没错,在这个方法里,我们把刚才干的事情重写一遍,就是这么easy

那么问题来了,我们要在哪里调用这个重连函数呢,

var disConnect = function(){
    setTimeout(function(){
         reconnect();
    },5000);
}

我们先写一个函数,每隔5秒去调用一次,这个函数我们就放在onclose里面,就是这样

ws.onclose = disConnect;

ok,这样我们一个简单的断线重连就做好了,赶紧去试一下吧

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!