Vue websocket方法封装

下面是一个简单的 Vue 中 WebSocket 方法封装的示例：

import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions('websocket', ['initWebSocket', 'closeWebSocket', 'sendMessage']),
    connect() {
      const url = 'ws://localhost:8080/ws'
      const protocols = ['protocol1', 'protocol2']
      this.initWebSocket({ url, protocols })
    },
    disconnect() {
      this.closeWebSocket()
    },
    send(msg) {
      this.sendMessage(msg)
    }
  }
}

在上面的代码中，我们使用了 Vuex 来管理 WebSocket 的状态，具体实现请看如下代码：

import Vue from 'vue'

const state = {
  socket: null
}

const getters = {
  socket: state => state.socket
}

const actions = {
  initWebSocket({ commit }, { url, protocols }) {
    const socket = new WebSocket(url, protocols)
    commit('setSocket', socket)
    socket.addEventListener('open', () => {
      console.log('WebSocket connected')
    })
    socket.addEventListener('close', () => {
      console.log('WebSocket disconnected')
    })
    socket.addEventListener('message', event => {
      console.log(`WebSocket received message: ${event.data}`)
    })
  },
  closeWebSocket({ commit, state }) {
    if (state.socket) {
      state.socket.close()
      commit('setSocket', null)
    }
  },
  sendMessage({ state }, message) {
    if (state.socket) {
      state.socket.send(message)
    }
  }
}

const mutations = {
  setSocket(state, socket) {
    state.socket = socket
  }
}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

在上面的代码中，我们定义了 `initWebSocket`、`closeWebSocket` 和 `sendMessage` 三个方法，其中 `initWebSocket` 方法用于初始化 WebSocket，`closeWebSocket` 方法用于关闭 WebSocket，`sendMessage` 方法用于发送消息。

我们在 Vuex 的 `state` 中定义了 `socket` 属性来存储 WebSocket 的实例。在 `initWebSocket` 方法中，我们使用 `new WebSocket(url, protocols)` 创建了一个 WebSocket 实例，并通过 `commit` 方法将其存储到 `state` 中。在成功连接、断开连接和接收到消息时，我们分别打印了一些信息，以便于调试。在 `closeWebSocket` 方法中，我们先检查 `socket` 是否存在，如果存在则关闭它，并将 `state` 中的 `socket` 属性设置为 `null`。在 `sendMessage` 方法中，我们也先检查 `socket` 是否存在，如果存在则调用它的 `send` 方法发送消息。

最后，在 Vue 组件中，我们用 `mapActions` 将 `websocket` 模块中的 `initWebSocket`、`closeWebSocket` 和 `sendMessage` 方法映射为组件的方法，并在组件中使用这些方法来连接、断开连接和发送消息。