前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >websocket断线重连的方法

websocket断线重连的方法

原创
作者头像
挥刀北上
修改2021-02-05 14:41:12
15.5K0
修改2021-02-05 14:41:12
举报
文章被收录于专栏:Node.js开发Node.js开发

我们在是有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/

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档