websocket断线重连的方法

2021-02-05 14:41:12 浏览数 (1)

我们在是有websocekt的时候,有的时候由于某些原先websocket会断开连接,我们需要重现连接,该如何实现呢?这就需要我们仔细研究websocket的api的使用了。

首先我们要熟悉如下几个api

1、连接websocket的服务器的websocekt函数

2、websocekt断开后触发的onclose函数

由上面这两个函数就可以了,大致思路梳理一下:

1、首先开发一个函数websocketinit,函数主要是websocket的连接逻辑,监听信息,发送信息

2、监听onclose事件,onclose触发后重新执行websocketinit事件

思路有了大致代码如下:

代码语言:javascript复制
  function webSocketInit(service){
   //1、初始化ws
   //2、监听onclose事件 重新执行websocketInit函数
  }
  
  

具体代码如下:

代码语言:javascript复制
//1.创建websocket客户端
  var wsServer = 'ws://ip/';
  var limitConnect = 3;  // 断线重连次数
  var timeConnect = 0;
  webSocketInit(wsServer);

  //socket初始化
  function webSocketInit(service){
    var ws = new WebSocket(service);
    ws.onopen = function () {
      console.log("已连接TCP服务器");
    };
    ws.onmessage = function (msg) {
      console.log(msg);
    };
    ws.onclose = function () {
      console.log('服务器已经断开');
      reconnect(service);
    };

    // 重连
    function reconnect(service) {
      // lockReconnect加锁,防止onclose、onerror两次重连
      if(limitConnect>0){
          limitConnect --;
          timeConnect   ;
          console.log("第" timeConnect "次重连");
          // 进行重连
          setTimeout(function(){
            webSocketInit(service);
          },2000);

      }else{
        console.log("TCP连接已超时");
      }
    }

    // 心跳 * 回应
    setInterval(function(){
      websocket.send('');
    }, 1000*100);

以上便是手动实现websocket重连的解决方案,还有一种方式是使用一个叫做reconnecting websocket的库:

只要把:

代码语言:javascript复制
var ws = new WebSocket('ws://....');

替换成:

代码语言:javascript复制
var ws = new ReconnectingWebSocket('ws://....');

这样就好了。

ReconnectingWebSocketa同样支持onopen、onmessage、onclose这些事件。

参考:https://www.cnblogs.com/wesky/p/12111929.html

https://www.uedbox.com/post/9276/

0 人点赞