uniapp中使用websocket方法

1. uniapp中关于websocket接口有哪些？

// 创建socketTask对象
let socketTask = uni.connectSocket({
   url:'',
})
socketTask对象函数包括：
   onMessage: 监听服务器发来的消息，
   send: 发送消息
   close：关闭连接
   onOpen: 监听连接已打开
   onClose: 监听连接关闭
   onError: 监听连接错误

socketTask对象的 readyState 属性四种状态：
   状态值： 
      0 -> 表示connecting, 正在连接，连接未完成
      1 -> 表示opening， 已连接，可以发送和接受消息
      2 -> 表示closing，正在关闭，还未完成
      3 -> 表示closed，已关闭

   心跳重连可以根据 readyState的状态来判断，如果连接关闭，则重新连接。

2. 封装websocket

// 创建 websocket.js文件
export default class WebsocketTask{
  constructor(url,time){
     this.url = url
     this.data = null
     this.isOpenSocket = false
     // 心跳检测
     this.timeout = time
     this.heartbeat = null
 
     try{
       return this.connectSocketInit()
     }catch(e){
       this.isOpenSocket = false
       this.reconnect();
     } 
  }

  connectSocketInit(){
    this.socketTask = uni.connectSocket({
      url: this.url
    })

    this.socketTask.onOpen((res)=>{
      clearTimeout(this.heartbeat);
      this.isOpenSocket = true
      this.start();
      this.socketTask.onMessage((res)=>{
         //接收消息
      })
    })

    this.socketTask.onClose(()=>{
      this.isOpenSocket = false;
      this.reconnect();
    })
  }

  //发送消息
  send(data){
    this.socketTask.send({
       data,
    })
  }
  //开启心跳检测
  start(){
    this.heartbeat = setTimeout(()=>{
       this.data = {value:'xx'}
       this.send(JSON.stringify(this.data));
    }, timeout)
  }
  // 重新连接
  reconnect(){
   clearInterval(this.heartbeat)
   if(!this.isOpenSocket){
     setTimeout(()=>{
        this.connectSocketInit();
     }, 3000)
   }
  }
}

3.使用方式

// 进入 App.vue 页面
import WebsocketTask from './websocket.js'
// 创建websocket
let websocket = new WebsocketTask('xxx',5000)
// 挂载到全局 或者 定义一个全局变量然后进行赋值也可
Vue.prototype.$websocket = websocket; 

//页面中调用方法
let data = {value:'xx'};
this.$websocket.send(JSON.stringify(data))

参考文章链接：

       https://www.jianshu.com/p/4497432907e9/

       https://blog.csdn.net/lyandgh/article/details/100642941

       https://blog.csdn.net/weixin_42000816/article/details/113307548?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-113307548-blog-112261976.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-113307548-blog-112261976.pc_relevant_aa&utm_relevant_index=1