websocket 断线重连

最新推荐文章于 2025-04-17 18:34:47 发布

无月大大

最新推荐文章于 2025-04-17 18:34:47 发布

阅读量9.2k

点赞数 1

文章标签： websocket 网络协议网络

原文链接：https://www.cnblogs.com/wesky/p/12111929.html

版权

本文介绍了一个WebSocket客户端的实现方式，包括如何初始化连接、处理消息、关闭连接及错误情况，并详细解释了重连机制的实现过程，特别是通过加锁来避免重复重连的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//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);
    };
    ws.onerror = function (err) {
      //console.log("服务器报错：");
      reconnect(service);
    };

    // 重连
    function reconnect(service) {
      // lockReconnect加锁，防止onclose、onerror两次重连
      if(limitConnect>0){
        if(localStorage.getItem('lockReconnect')!=true){
          localStorage.setItem("lockReconnect",1);
          limitConnect --;
          timeConnect ++;
          console.log("第"+timeConnect+"次重连");
          // 进行重连
          setTimeout(function(){
            webSocketInit(service);
            localStorage.removeItem("lockReconnect");
          },2000);
        }
      }else{
        console.log("TCP连接已超时");
      }
    }

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

注意：

1.onclose、onerror出现两个，tcp重连的时候会重连两次；为避免这种情况，需要进行加锁lockReconnect

2.limitConnect 断线重连次数；timeConnect从0次开始播报

//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);