websocket是html5发布以后出现的一种新技术,说它是新技术,其实也不是多新的技术了,由于毕竟也有2-3年了,可是找了不少国内的实例,缺发现很少,不知道是它很差用呢,仍是说这种技术原来就有缺陷呢,我们暂且不说,今天咱们就来介绍一下websocket的断线重连,,,,html
这里先提供一个类库,https://github.com/joewalnes/reconnecting-websocket ,这是一个websocket重连的类库,对于处理一些简单的断线重连问题仍是比较好用的,,,并且其中的功能也比较全,有兴趣的朋友能够去研究一下html5
接来我要介绍的是我在一个项目中遇到的问题,这是一个比较广泛的断线重连问题。。。好啦,废话很少说,咱们直接看例子git
首先呢 ,咱们要建立一个websocket对象,其中对象的参数是咱们要链接的地址,这个通常是服务端提供的。。。github
var ws = new WebSocket('ws:../../websocket');
而后咱们重写一下监听收到消息的事件,web
ws.onmessage = function(msg){ console.log('msg:',msg); //do something };
接下来咱们重写一下监听关闭链接的事件,websocket
ws.onclose = function(){ console.log('closed....'); };
OK,这样的话,最简单的一个websocket就写好了,那么接下来咱们就要实现断线重连的功能了喽,往下看。。。socket
function reconnect (){ rews = new WebSocket('ws:../../websocket'); rews.onmessage = function(){ //dosomthing }; rews.onclose = function(){ //dosomthing }; }
没错,在这个方法里,咱们把刚才干的事情重写一遍,就是这么easy函数
那么问题来了,咱们要在哪里调用这个重连函数呢,code
var disConnect = function(){ setTimeout(function(){ reconnect(); },5000); }
咱们先写一个函数,每隔5秒去调用一次,这个函数咱们就放在onclose里面,就是这样htm
ws.onclose = disConnect;
ok,这样咱们一个简单的断线重连就作好了,赶忙去试一下吧