uniapp使用WebSocket+stompjs

uniapp官方文档：https://uniapp.dcloud.net.cn/api/request/websocket.html

• 网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout。
• App平台，2.2.6以下的版本，不支持 ArrayBuffer 类型的数据收发。老版本不愿升级也可以使用 plus-websocket插件 插件替代。
• App平台2.2.6以下的版本，所有 vue 页面只能使用一个 websocket 连接。App下可以使用 plus-websocket 插件替代实现多连接。
• 微信小程序平台1.7.0 及以上版本，最多可以同时存在5个WebSocket 连接。老版本只支持一个socket连接。
• 百度小程序平台自基础库版本 1.9.4 及以后支持多个socket连接。老版本只支持一个socket连接。
• QQ小程序、支付宝小程序平台最多支持同时存在5个socket连接。

 项目的封装：

let socketOpen = false
let socketMsgQueue = []

import Stomp from 'stompjs'

export default {
  client: null,
  init(url, header) {
    if (this.client) {
      return Promise.resolve(this.client)
    }

    return new Promise((resolve, reject) => {
      const ws = {
        send: this.sendMessage,
        onopen: null,
        onmessage: null,
        close: this.closeSocket,
      }

      uni.connectSocket({ url, header })

      uni.onSocketOpen(function (res) {
        console.log('WebSocket连接已打开！', res)

        socketOpen = true
        for (let i = 0; i < socketMsgQueue.length; i++) {
          ws.send(socketMsgQueue[i])
        }
        socketMsgQueue = []

        ws.onopen && ws.onopen()
      })

      uni.onSocketMessage(function (res) {
        ws.onmessage && ws.onmessage(res)
      })

      uni.onSocketError(function (res) {
        console.log('WebSocket 错误！', res)
      })

      uni.onSocketClose((res) => {
        this.client.disconnect()
        this.client = null
        socketOpen = false
        console.log('WebSocket 已关闭！', res)
      })

      Stomp.setInterval = function (interval, f) {
        return setInterval(f, interval)
      }
      Stomp.clearInterval = function (id) {
        return clearInterval(id)
      }

      const client = (this.client = Stomp.over(ws))
      client.connect(header, function () {
        console.log('stomp connected')
        resolve(client)
      })
    })
  },
  disconnect() {
    uni.closeSocket()
  },
  sendMessage(message) {
    if (socketOpen) {
      uni.sendSocketMessage({
        data: message,
      })
    } else {
      socketMsgQueue.push(message)
    }
  },
  closeSocket() {
    console.log('closeSocket')
  },
}

页面中使用：

// 引入文件
import WebSocket from '@/subPages/communication/config/websocket'
import http from '@/api/request'

 

connect() {
  // 'ws://xxxxx:端口/ws' 或 'wss:xxxxx/ws'
  WebSocket.init(Url, {
    login: 'admin',
    passcode: 'admin',
  }).then((client) => {
    client.subscribe( // 订阅
      `/queue/user:${state.userInfo.userId}`,
      (frame) => {
        console.log(frame) // 接收到的数据
      },
      { ack: 'client' } // 消息不会被确认接收，不确认每次连接都会推送
    )
  })
},