webscoket断开php,WebSocket掉线重连的解决办法

WebSocket掉线重连的解决办法(reconnecting-websocket.js的使用)

阅读文字大小：【小】   【大】    文章背景：    展开

html5 的 WebSocket 帮我们实现了长连接功能，但实际使用中发现 WebSocket 链接还是不是非常稳定的，经常自我掉线了，下面就分享两种方法解决一下这个问题。

方法一

ReconnectingWebSocket 是一个小型的 JavaScript 库，封装了 WebSocket API 提供了在连接断开时自动重连的机制。

只需要简单的将：

1ws =new WebSocket();

替换成：

1ws =new ReconnectingWebSocket();

方法二

非常严格的解决 webSocket 重连，包括网络断线后重连的解决方法：

1、websocket 重连的脚本(reconnecting-websocket.js)：

2、监听网络状态的脚本(offline.js)：

https://github.com/hubspot/offline

3、页面引用：上述脚本

4、JavaScript demo

01var socketStatus=false;

02function tanchuang(){

03Offline.check();

04if(!socketStatus){

05$('.big_toast div').html('网络连接已断开！');

06$('.big_toast').css('left','45%');

07$('.big_toast').fadeIn("fast");

08$('.big_toast').fadeOut(2000);

09if(Offline.state ==='up' && websocket.reconnectAttempts>websocket.maxReconnectInterval){

10window.location.reload();

11}

12//    buildSocket();

13}else{

14websocket.send("{}");

15}

16}

17var websocket;

18buildSocket();

19function buildSocket(){

20if ('WebSocket' in window) {

22}else if ('MozWebSocket' in window) {

25}else {

28

29}

30

31}

32websocket.onopen =function (evnt) {

33socketStatus=true;

34clearInterval(t1);//去掉定时器

35t2=setInterval(tanchuang,3000);

36// tanchuang();

37};

38websocket.onmessage =function (evnt) {

39};

40websocket.onerror =function (evnt) {

41socketStatus=false;

42};

43websocket.onclose =function (evnt) {

44socketStatus=false;

45};

最终的效果是：当网络断开连接后，会先重连3000次，如果3000次重连不上则浏览器放弃重连，开始监听网络状态，如果网络一恢复，则直接刷新页面，恢复数据正常。