uniapp websocket 全局封装 并使用例子

Uniapp 提供了使用 WebSocket 的 API，我们可以在全局封装一层 WebSocket 的封装，方便调用。

下面是一个 WebSocket 封装的例子：

// websocket.js
const wsUrl = 'ws://localhost:8080'

export default {
  ws: null,
  isInit: false,
  initWebSocket() {
    this.ws = uni.connectSocket({
      url: wsUrl,
      complete: () => {
        console.log('WebSocket连接已打开！')
      }
    })
    this.isInit = true
    this.ws.onOpen(() => {
      console.log('WebSocket连接已打开！')
    })
    this.ws.onMessage((res) => {
      console.log('收到服务器消息', res)
    })
    this.ws.onError((err) => {
      console.log('WebSocket连接打开失败，请检查！', err)
    })
    this.ws.onClose(() => {
      console.log('WebSocket连接已关闭！')
      this.isInit = false
    })
  },
  sendMsg(msg) {
    if (!this.isInit) {
      this.initWebSocket()
    }
    this.ws.send({
      data: msg,
      success: () => {
        console.log('发送成功')
      },
      fail: (err) => {
        console.log('发送失败', err)
      }
    })
  },
  closeWebSocket() {
    if (this.isInit) {
      this.ws.close()
    }
  }
}

在 `main.js` 中引入并挂载：

// main.js
import websocket from './websocket.js'

Vue.prototype.$websocket = websocket

调用：

// 发送消息
this.$websocket.sendMsg('Hello World!')

// 关闭连接
this.$websocket.closeWebSocket()