微信小程序版webSocket组件的封装

最近接了一个微信小程序项目开发,其中用到了 webSocket,所以三下五除二的封装了一下,特此分享给大家,为需要的小伙伴提供参考。

如果小伙伴想学小程序开发的可以看我之前一篇文章《微信小程序入门教程实例讲解

// socket 已经连接成功
var socketOpen = false
// socket 已经调用关闭 function
var socketClose = false
// socket 发送的消息队列
var socketMsgQueue = []
// 判断心跳变量
var heart = ''
// 心跳失败次数
var heartBeatFailCount = 0
// 终止心跳
var heartBeatTimeOut = null;
// 终止重新连接
var connectSocketTimeOut = null;
// 心跳信息
var connectFailTimes = 0
 
var webSocket = {
 
  /**
   * 创建一个 WebSocket 连接
   * @param {options} 
   *   url          String    是    开发者服务器接口地址,必须是 wss 协议,且域名必须是后台配置的合法域名
   *   header        Object    否    HTTP Header , header 中不能设置 Referer
   *   method        String    否    默认是 GET,有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
   *   protocols    StringArray    否    子协议数组    1.4.0
   *   success      Function    否    接口调用成功的回调函数
   *   fail         Function    否    接口调用失败的回调函数
   *   complete      Function    否    接口调用结束的回调函数(调用成功、失败都会执行)
   */
  connectSocket: function(options) {
    wx.showLoading({
      title: '',
      mask: true,
    })
    socketOpen = false
    socketClose = false
    this.webSocketClose = false
    socketMsgQueue = []
    wx.connectSocket({
      url: 'wss://aqm.runde.pro/wss',
      success: function(res) {
        if (options) {
          // 成功回调
          options.success && options.success(res);
        }
      },
      fail: function(res) {
        if (options) {
          // 失败回调
          options.fail && options.fail(res);
        }
      }
    })
  },
 
  /**
   * 通过 WebSocket 连接发送数据
   * @param {options} 
   *   data    String / ArrayBuffer    是    需要发送的内容
   *   success    Function    否    接口调用成功的回调函数
   *   fail    Function    否    接口调用失败的回调函数
   *   complete    Function    否    接口调用结束的回调函数(调用成功、失败都会执行)
   */
  sendSocketMessage: function(options) {
    if (socketOpen) {
      wx.sendSocketMessage({
        data: options.msg,
        // data: JSON.stringify(options),
        success: function(res) {
          if (options) {
            options.success && options.success(res);
          }
        },
        fail: function(res) {
          if (options) {
            options.fail && options.fail(res);
          }
        }
      })
    } else {
      socketMsgQueue.push(options)
    }
  },
 
  /**
   * 关闭 WebSocket 连接。
   * @param {options} 
   *   code    Number    否    一个数字值表示关闭连接的状态号,表示连接被关闭的原因。如果这个参数没有被指定,默认的取值是 1000 (表示正常连接关闭)
   *   reason    String    否    一个可读的字符串,表示连接被关闭的原因。这个字符串必须是不长于 123 字节的 UTF-8 文本(不是字符)
   *   fail    Function    否    接口调用失败的回调函数
   *   complete    Function    否    接口调用结束的回调函数(调用成功、失败都会执行)
   */
  closeSocket: function(options) {
    if (connectSocketTimeOut) {
      clearTimeout(connectSocketTimeOut);
      connectSocketTimeOut = null;
    }
    socketClose = true;
    var self = this;
    self.stopHeartBeat();
    wx.closeSocket({
      success: function(res) {
        console.log('WebSocket 已关闭!');
        if (options) {
          options.success && options.success(res);
        }
      },
      fail: function(res) {
        if (options) {
          options.fail && options.fail(res);
        }
      }
    })
  },
 
  // 收到消息回调
  onSocketMessageCallback: function(msg) {
 
  },
 
  // 开始心跳
  startHeartBeat: function() {
    console.log('socket 开始心跳')
    var self = this;
    heart = 'heart';
    self.heartBeat();
  },
 
  // 结束心跳
  stopHeartBeat: function() {
    console.log('socket 结束心跳')
    var self = this;
    heart = '';
    if (heartBeatTimeOut) {
      clearTimeout(heartBeatTimeOut);
      heartBeatTimeOut = null;
    }
    if (connectSocketTimeOut) {
      clearTimeout(connectSocketTimeOut);
      connectSocketTimeOut = null;
    }
  },
 
  // 心跳
  heartBeat: function() {
    var self = this;
    if (!heart) {
      return;
    }
    self.sendSocketMessage({
      // msg: JSON.stringify({
      //   'msg_type': 'heart'
      // }),
      msg: JSON.stringify({
        "act": "app_heartbeat"
      }),
      success: function(res) {
        console.log('socket 心跳成功');
        if (heart) {
          heartBeatTimeOut = setTimeout(() => {
            self.heartBeat();
          }, 7 * 1000);
        }
      },
      fail: function(res) {
        console.log('socket 心跳失败');
        if (heartBeatFailCount > 2) {
          // 重连
          self.connectSocket();
        }
        if (heart) {
          heartBeatTimeOut = setTimeout(() => {
            self.heartBeat();
          }, 7 * 1000);
        }
        heartBeatFailCount++;
      },
    });
  }
}
 
// 监听 WebSocket 连接打开事件。callback 回调函数
wx.onSocketOpen(function(res) {
  connectFailTimes = 0
  console.log('WebSocket 连接已打开!')
  wx.hideLoading();
  // 如果已经调用过关闭 function
  if (socketClose) {
    webSocket.closeSocket();
  } else {
    socketOpen = true
    for (var i = 0; i < socketMsgQueue.length; i++) {
      webSocket.sendSocketMessage(socketMsgQueue[i])
    }
    socketMsgQueue = []
    webSocket.startHeartBeat();
  }
})
 
// 监听 WebSocket 错误。
wx.onSocketError(function(res) {
  connectFailTimes++
  console.log('WebSocket 连接打开失败,请检查!', res)
})
 
// 监听 WebSocket 接受到服务器的消息事件。
wx.onSocketMessage(function(res) {
  console.log('收到服务器内容:' + res.data)
  webSocket.onSocketMessageCallback(res.data)
})
 
// 监听 WebSocket 关闭。
wx.onSocketClose(function(res) {
  console.log('WebSocket 已关闭!')
  webSocket.webSocketClose = true;
  if (connectFailTimes <= 3) {
    if (!socketClose) {
      clearTimeout(connectSocketTimeOut)
      connectSocketTimeOut = setTimeout(() => {
        webSocket.connectSocket();
      }, 3000);
    }
  } else {
    wx.hideLoading()
    wx.showModal({
      title: '',
      content: '服务器异常,请重新登录',
    })
    clearTimeout(connectSocketTimeOut)
  }
})
 
module.exports = webSocket;

 

「点点赞赏,手留余香」

2

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 微信小程序版webSocket组件的封装

发表回复