uniapp中websocket的使用（二）适用页面存在多个长连

这两天在做直播带货功能，需要用到websocket，页面中会存在适用多个长连接的情况，之前封装过一个websocket的操作类，用那个感觉就不太合适了，今天重新基于socketTask重新封装一个类，记录一下。

一、封装websocket操作类

//导入系统方法
import system from './common'
//导入获取请求头方法
import { getAccessApiHeaders } from './http'

class _WebSocket {
  //是否打开连接
  isOpen = false
  //全局的定时器
  globalTimer = null
  //存储task对象
  socketTask = null
  //连接socket
  async connectSocket(
    linkMark,    //连接标识
    option = {},  //连接需要带的额外的参数
    successFunc = null,   //连接成功回调
    errorFunc = null,        //连接错误回调
    receiveFunc = null,   //接收到消息回调
    closeFunc = null       //连接关闭回调
  ) {
    try {
      //如果连接已存在并且已经打开就不再连接
      if (this.socketTask && this.isOpen) {
        return
      }
      //获取头
      let header = await getAccessApiHeaders()
      //构建参数
      let params = {
        access_token: header['Access-Token'],
        access_t_id: header['Access-T-Id'],
        access_t_id_in: header['Access-T-Id-In'],
        ...option
      }
      //获取对应的长连接URL
      let url = await system.getWebsocketUrl(linkMark, params)
      //建立连接
      this.socketTask = uni.connectSocket({
        url,
        header,
        success() {
          console.log('websocket:' + linkMark + '连接成功！')
        }
      })
      //监听打开事件
      this.socketTask.onOpen((res) => {
        console.log('websocket:' + linkMark + '打开成功！')
        this.isOpen = true
        //开启心跳检测
        this.heartBeatTest()
        //回调
        if (successFunc) {
          successFunc(res)
        }
      })
      //监听连接关闭事件
      this.socketTask.onClose(() => {
        console.log('websocket:' + linkMark + '已关闭！')
        this.isOpen = false
        if (closeFunc) {
          closeFunc()
        }
      })
      //监听websocket错误事件
      this.socketTask.onError((res) => {
        console.log('websocket:' + linkMark + '已出错！')
        this.isOpen = false
        if (errorFunc) {
          errorFunc(res)
        }
      })
      //监听接收到的消息
      this.socketTask.onMessage((res) => {
        if (receiveFunc) {
          receiveFunc(res)
        }
      })
    } catch (error) {
      console.log('websocket:' + linkMark + '异常:' + error)
    }
  }
  //发送消息(msg是一个对象)
  sendMessage(msg = null, successFunc = null, errorFunc = null) {
    if (!this.socketTask || !this.isOpen || !msg) {
      if (errorFunc) {
        errorFunc('未传消息内容或连接未打开！')
      }
      return
    }
    this.socketTask.send({
      data: JSON.stringify(msg),
      success(res) {
        if (successFunc) {
          successFunc(res)
        }
      },
      fail(err) {
        if (errorFunc) {
          errorFunc(err)
        }
      }
    })
  }
  //关闭连接
  closeSocket() {
    if (!this.socketTask || !this.isOpen) {
      return
    }
    //关闭socket连接
    this.socketTask.close()
    //设置关闭状态
    this.isOpen = false
  }
  //心跳检测
  heartBeatTest() {
    //清除定时器
    clearInterval(this.globalTimer)
    //开启定时器定时检测心跳
    this.globalTimer = setInterval(() => {
      this.sendMessage({ action: 'ping', params: '' }, null, () => {
        //如果失败则清除定时器
        clearInterval(this.globalTimer)
      })
    }, 5000)
  }
}
export default _WebSocket

二、导入类并实例化

//导入websocket类
import _WebSocket from '@/common/services/yd-websocket'
//实例化websocket对象
const _websocket = new _WebSocket()

三、一进入页面构建socket连接

//建立socket连接
buildWebSocket() {
      try {
        _websocket.connectSocket(
          'live',   //连接标识
          {}, //可以传递额外的参数
          null,
          () => {
            //出错的回调,重新建立连接
            setTimeout(() => {
              this.buildWebSocket()
            }, 2000)
          },
          (msg) => {
            //根据接收到的消息来处理业务逻辑
          },
          () => {
            //关闭了就重新连接
            setTimeout(() => {
              this.buildWebSocket()
            }, 2000)
          }
        )
      } catch (error) {
        console.log('live socket err:' + error)
      }
},