uniapp小程序webSocket封装使用

目录

• 1，前言
• 2，代码实现
• 3，使用
  • 3.1，初始化
  • 3.2，发送消息
  • 3.3，接收消息

1，前言

最近在做IOT的项目，里面有个小程序要用到webSocket，借这个机会，封装了一个uniapp小程序适用的Socket类，具体实现如下。

2，代码实现

class webSocketClass {
  constructor(url, interval) {
    this.url = url
    this.data = null
    this.isCreate = false // WebSocket 是否创建成功
    this.isConnect = false // 是否已经连接
    this.isInitiative = false // 是否主动断开
    this.heartbeatInterval = interval // 心跳检测间隔
    this.heartbeatTimer = null // 心跳检测定时器
    this.reconnectTimer = null // 断线重连定时器
    this.socketExamples = null // websocket实例
    this.againTime = 3 // 重连等待时间(单位秒)
  }

  // 初始化websocket连接
  initSocket() {
    const _this = this
    this.socketExamples = uni.connectSocket({
      url: _this.url,
      header: {
        'content-type': 'application/json'
      },
      success: (res) => {
        _this.isCreate = true
        console.log(res)
      },
      fail: (rej) => {
        console.error(rej)
        _this.isCreate = false
      }
    })
    this.createSocket()
  }

  // 创建websocket连接
  createSocket() {
    console.log('WebSocket 开始初始化')
    if (this.isCreate) {
      // 监听 WebSocket 连接打开事件
      try {
        this.socketExamples.onOpen(() => {
          console.log('WebSocket 连接成功')
          this.isConnect = true
          clearInterval(this.heartbeatTimer)
          clearTimeout(this.reconnectTimer)
          // 打开心跳检测
          this.heartbeatCheck()
        })
        // 监听 WebSocket 接受到服务器的消息事件
        this.socketExamples.onMessage((res) => {
          console.log('收到消息')
          uni.$emit('message', res)
        })
        // 监听 WebSocket 连接关闭事件
        this.socketExamples.onClose(() => {
          console.log('WebSocket 关闭了')
          this.isConnect = false
          this.reconnect()
        })
        // 监听 WebSocket 错误事件
        this.socketExamples.onError((res) => {
          console.log('WebSocket 出错了')
          console.log(res)
          this.reconnect()
        })
      } catch (error) {
        console.warn(error)
      }
    } else {
      console.warn('WebSocket 初始化失败!')
    }
  }

  // 发送消息
  sendMsg(value) {
    const param = JSON.stringify(value)
    return new Promise((resolve, reject) => {
      this.socketExamples.send({
        data: param,
        success() {
          console.log('消息发送成功')
          resolve(true)
        },
        fail(error) {
          console.log('消息发送失败')
          reject(error)
        }
      })
    })
  }

  // 开启心跳检测
  heartbeatCheck() {
    console.log('开启心跳')
    this.data = { state: 1, method: 'heartbeat' }
    this.heartbeatTimer = setInterval(() => {
      this.sendMsg(this.data)
    }, this.heartbeatInterval * 1000)
  }

  // 重新连接
  reconnect() {
    // 停止发送心跳
    clearInterval(this.heartbeatTimer)
    clearTimeout(this.reconnectTimer)
    // 如果不是人为关闭的话，进行重连
    if (!this.isInitiative) {
      this.reconnectTimer = setTimeout(() => {
        this.initSocket()
      }, this.againTime * 1000)
    }
  }

  // 关闭 WebSocket 连接
  closeSocket(reason = '关闭') {
    const _this = this
    this.socketExamples.close({
      reason,
      success() {
        _this.data = null
        _this.isCreate = false
        _this.isConnect = false
        _this.isInitiative = true
        _this.socketExamples = null
        clearInterval(_this.heartbeatTimer)
        clearTimeout(_this.reconnectTimer)
        console.log('关闭 WebSocket 成功')
      },
      fail() {
        console.log('关闭 WebSocket 失败')
      }
    })
  }
}

export default webSocketClass

3，使用

直接实例化封装的socket类，调用初始化方法就行了，当收到消息的时候，会触发$emit事件，只需要使用$on监听message事件就行。

3.1，初始化

import WebSocketClass from '../../utils/webSocket'
const app = getApp()

onLoad() {
  app.globalData.socketObj = new WebSocketClass('wss://www.baidu.com', 90)
  app.globalData.socketObj.initSocket()
}

3.2，发送消息

methods: {
  sendMessage() {
    const param = { value: '我是一个消息' }
    app.globalData.socketObj.sendMsg(param)
  }
}

3.3，接收消息

// 开启监听
onLoad() {
  uni.$on('message', this.getMessage)
},
// 页面卸载时取消监听
onUnload() {
  uni.$off('message', this.getMessage)
},
methods: {
  // 接收到消息的回调
  getMessage(msg) {
    console.log(msg)
  }
}

---

如果看了觉得有帮助的，我是@鹏多多，欢迎 点赞 关注 评论；END

---

PS：在本页按F12，在console中输入document.querySelectorAll('.diggit')[0].click()，有惊喜哦

---

公众号

往期文章

• 超详细的Cookie增删改查
• 助你上手Vue3全家桶之Vue-Router4教程
• 助你上手Vue3全家桶之Vue3教程
• 助你上手Vue3全家桶之VueX4教程
• 使用nvm管理node.js版本以及更换npm淘宝镜像源
• 超详细！Vue-Router手把手教程
• vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
• 微信小程序实现搜索关键词高亮
• 超详细！Vue的九种通信方式
• 超详细！Vuex手把手教程

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金