zoukankan      html  css  js  c++  java
  • 小程序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 i=1
    const url = ''//socket链接地址,需要在微信后台配置
    var webSocket = {
      connectSocket: function () {
        // wx.showLoading({
        //   title: '',
        //   mask: true,
        // })
        socketOpen = false
        socketClose = false
        socketMsgQueue = []
        wx.connectSocket({
          url: 'ws://' +url+'/websocket/'+wx.getStorageSync('token'),
          // header: { 'ticket': wx.getStorageSync('token')},
          success: function (res) { 
            if (res) {
              // 成功回调
              // console.log(res)
              // options.success && options.success(res);
            }
          },
          fail: function (res) {
            if (res) {
              // 失败回调
              // 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,
            success: function (res) {
              if (options) {
                options.success && options.success(res);
              }
            },
            fail: function (res) {
              if (options) {
                options.fail && options.fail(res);
              }
            }
          })
        } else {
          socketMsgQueue.push(options.msg)
        }
      },
    
      /**
       * 关闭 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({
            'messageType':1//心跳
          }),
          success: function (res) {
            console.log('socket心跳成功');
            if (heart) {
              heartBeatTimeOut = setTimeout(() => {
                self.heartBeat();
              }, 60000);
            }
          },
          fail: function (res) {
            console.log('socket心跳失败');
            if (heartBeatFailCount > 2) {
              // 重连
              self.connectSocket();
            }
            if (heart) {
              heartBeatTimeOut = setTimeout(() => {
                self.heartBeat();
              }, 60000);
            }
            heartBeatFailCount++;
          },
        });
      }
    }
    
    // 监听WebSocket连接打开事件。callback 回调函数
    wx.onSocketOpen(function (res) {
      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) {
      console.log('WebSocket连接打开失败,请检查!', res)
    })
    
    // 监听WebSocket接受到服务器的消息事件。
    wx.onSocketMessage(function (res) {
      console.log('收到服务器内容:' + res.data)
      if (res.data =='SUCCESS'){
         return;
      }
      webSocket.onSocketMessageCallback(res.data)
    })
    
    // 监听WebSocket关闭。
    wx.onSocketClose(function (res) {
      console.log('WebSocket 已关闭!')
      //if (!socketClose) {
      let time = Math.pow(2, i)
      i++
      if (time==8){
        i=1
      }
        clearTimeout(connectSocketTimeOut)
        connectSocketTimeOut = setTimeout(() => {
          webSocket.connectSocket();
        }, time*1000);
      //}
    })
    
    module.exports = webSocket;
    

     在需要的页面引入,然后在onload函数中加入 

       chat.onSocketMessageCallback = this.onSocketMessageCallback;//onSocketMessageCallback是回调函数名
       以上就是一个完整的wobsocket实例
  • 相关阅读:
    点名
    2017.6.11 NOIP模拟赛
    HEOI 2012 旅行问题
    【1】【JUC】JDK1.8源码分析之ReentrantLock
    Git撤销&回滚操作
    源码分析之CountDownLatch
    【1】AQS详解
    循环屏障CyclicBarrier以及和CountDownLatch的区别
    【JUC】CountDownLatch
    匿名内部类中使用的外部局部变量为什么只能是final变量
  • 原文地址:https://www.cnblogs.com/wmydb/p/10904091.html
Copyright © 2011-2022 走看看