uniapp 使用websocket 封装js 并全局使用代码

1. 首先在 `common` 文件夹下新建一个 `websocket.js` 文件，用于封装 WebSocket 相关的方法。

export default {
  // 封装 WebSocket
  createSocket(url) {
    const socket = new WebSocket(url)

    // 连接成功
    socket.onopen = () => {
      console.log('WebSocket 连接成功')
    }

    // 接收消息
    socket.onmessage = (event) => {
      console.log('WebSocket 接收到消息:', event.data)
    }

    // 连接关闭
    socket.onclose = () => {
      console.log('WebSocket 连接关闭')
    }

    // 连接出错
    socket.onerror = (error) => {
      console.log('WebSocket 连接出错:', error)
    }

    return socket
  },

  // 发送消息
  sendMessage(socket, message) {
    if (socket.readyState === WebSocket.OPEN) {
      socket.send(message)
    } else {
      console.log('WebSocket 连接未开启')
    }
  },

  // 关闭连接
  closeSocket(socket) {
    if (socket.readyState === WebSocket.OPEN) {
      socket.close()
    } else {
      console.log('WebSocket 连接未开启')
    }
  }
}

2. 在 `main.js` 中全局引入 `websocket.js`，并挂载到 Vue 原型上，以便在组件中使用。

import websocket from './common/websocket.js'

Vue.prototype.$websocket = websocket

3. 在组件中使用 WebSocket。

export default {
  mounted() {
    // 创建 WebSocket 连接
    const socket = this.$websocket.createSocket('ws://localhost:3000')

    // 发送消息
    this.$websocket.sendMessage(socket, 'Hello WebSocket')

    // 关闭连接
    this.$websocket.closeSocket(socket)
  }
}