VueWebsocket封装详解

一、VueWebsocket简介

VueWebsocket是Vue.js官方推荐的websocket插件，其可以兼容所有的浏览器和Node.js环境，同时具有简便易用的API和丰富的事件系统，可以方便地进行websocket通信。

二、VueWebsocket基本用法

下面是VueWebsocket的基本用法：

// 在main.js文件引入VueWebsocket
import VueWebsocket from 'vue-websocket'
Vue.use(VueWebsocket, 'ws://localhost:8080')

// 在Vue组件中进行websocket通信
export default {
  data() {
    return {
      message: '',
      isConnected: false
    }
  },
  methods: {
    sendMessage() {
      this.$socket.send(this.message)
    }
  },
  sockets: {
    connect() {
      this.isConnected = true
    },
    close() {
      this.isConnected = false
    },
    message(event) {
      console.log('收到消息:', event.data)
    }
  }
}

上述代码中，我们首先在main.js文件中引入了VueWebsocket，并通过Vue.use()进行了安装。接下来，在Vue组件中我们定义了一个message变量和一个isConnected变量，分别用于存储发送的消息和websocket连接状态。sendMessage()方法中通过this.$socket.send()发送消息，在sockets中定义了connect、close和message事件监听器。

三、VueWebsocket封装

1、封装VueWebsocket实例

我们可以将VueWebsocket封装成一个Vue插件，以便在其他Vue组件中通过this.$socket直接访问websocket。

// VueWebsocket.js
import VueWebsocket from 'vue-websocket'

const VueWebsocketPlugin = {}

VueWebsocketPlugin.install = function (Vue, options) {
  Vue.use(VueWebsocket, options.url)
  Vue.prototype.$socket = Vue.prototype.$connect()
}

export default VueWebsocketPlugin

上述代码中，我们首先引入VueWebsocket插件，并定义了一个VueWebsocketPlugin对象。然后，通过Vue.use()安装VueWebsocket，并通过Vue.prototype.$connect()访问websocket实例。

在Vue组件中，可以按照如下方式使用VueWebsocket插件：

// 引入VueWebsocket.js
import VueWebsocketPlugin from './VueWebsocket'

// 安装VueWebsocket
Vue.use(VueWebsocketPlugin, { url: 'ws://localhost:8080' })

export default {
  created() {
    // 发送消息
    this.$socket.send('hello world')

    // 监听消息
    this.$socket.addEventListener('message', event => {
      const msg = event.data
      console.log('收到消息：', msg)
    })
  }
}

上述代码中，我们首先引入前面写的VueWebsocket.js，并通过Vue.use()安装插件。然后在Vue组件中，我们可以直接通过this.$socket.send()发送消息，并通过this.$socket.addEventListener()监听消息。

2、VueWebsocket封装为一个Vue mixin

除了可以封装成Vue插件之外，我们还可以将VueWebsocket封装成一个Vue mixin，以便在Vue组件中复用。

// VueWebsocketMixin.js
import VueWebsocket from 'vue-websocket'

export default {
  data() {
    return {
      isConnected: false
    }
  },
  created() {
    // 安装VueWebsocket
    this.$options.sockets = {
      connect() {
        this.isConnected = true
      },
      close() {
        this.isConnected = false
      }
    }
    Vue.use(VueWebsocket, 'ws://localhost:8080')
  },
  methods: {
    sendMessage(message) {
      if (this.isConnected) {
        this.$socket.send(message)
      } else {
        console.log('websocket未连接！')
      }
    }
  }
}

上述代码中，我们定义了一个VueWebsocketMixin对象，包含了Vue组件中websocket通信所需的基本选项。在created()钩子函数中，我们通过Vue.use()安装了VueWebsocket，并在this.$options.sockets中定义了connect和close事件监听器。sendMessage()方法中，我们进行了websocket连接判断，只有在websocket已连接时才进行消息发送。

在Vue组件中，我们可以按照如下方式使用VueWebsocketMixin：

// 引入VueWebsocketMixin.js
import VueWebsocketMixin from './VueWebsocketMixin'

export default {
  mixins: [VueWebsocketMixin],
  created() {
    // 发送消息
    this.sendMessage('hello world')

    // 监听消息
    this.$socket.addEventListener('message', event => {
      const msg = event.data
      console.log('收到消息：', msg)
    })
  }
}

上述代码中，我们首先引入VueWebsocketMixin，并通过mixins选项将其混入到Vue组件中。然后，我们可以通过this.sendMessage()方法发送消息，并通过this.$socket.addEventListener()监听消息。

3、VueWebsocket进一步封装

除了基本的VueWebsocket封装之外，我们还可以对其进行进一步封装，以便在实际项目开发中更方便地使用websocket。

// VueWebsocket.js
import VueWebsocket from 'vue-websocket'

const MESSAGE_TYPES = {
  CHAT_MESSAGE: 'CHAT_MESSAGE',
  USER_LOGGED_IN: 'USER_LOGGED_IN',
  USER_LOGGED_OUT: 'USER_LOGGED_OUT'
}

const VueWebsocketPlugin = {}

VueWebsocketPlugin.install = function (Vue, options) {
  const url = options.url
  const websocket = Vue.prototype.$websocket = new VueWebsocket(url)

  Vue.prototype.$sendChatMessage = function (message) {
    const msg = { type: MESSAGE_TYPES.CHAT_MESSAGE, message }
    websocket.send(JSON.stringify(msg))
  }

  Vue.prototype.$loginUser = function (username) {
    const msg = { type: MESSAGE_TYPES.USER_LOGGED_IN, username }
    websocket.send(JSON.stringify(msg))
  }

  Vue.prototype.$logoutUser = function () {
    const msg = { type: MESSAGE_TYPES.USER_LOGGED_OUT }
    websocket.send(JSON.stringify(msg))
  }
}

export default VueWebsocketPlugin

上述代码中，我们定义了MESSAGE_TYPES对象，包含了三种消息类型。通过 Vue.prototype.$websocket = new VueWebsocket(url)创建了一个websocket实例，并将其赋值给this.$websocket。在Vue.prototype对象中，我们定义了三个方法，分别用于发送聊天消息、登录用户和注销用户。在消息发送时，我们将消息转换为JSON字符串，并设置对应的消息类型。

在Vue组件中，我们可以使用上述定义的方法快速进行websocket通信：

// 引入VueWebsocket.js
import VueWebsocketPlugin from './VueWebsocket'

Vue.use(VueWebsocketPlugin, { url: 'ws://localhost:8080' })

export default {
  methods: {
    login() {
      // 登录用户
      this.$loginUser('Jack')
    },
    logout() {
      // 注销用户
      this.$logoutUser()
    },
    sendChatMessage() {
      // 发送聊天消息
      this.$sendChatMessage('Hello world!')
    }
  }
}

上述代码中，我们可以直接调用this.$loginUser()、this.$logoutUser()、this.$sendChatMessage()方法进行websocket通信，非常方便。

四、总结

本文从VueWebsocket的基本用法入手，详细介绍了如何将其封装为Vue插件和Vue mixin，并进一步进行了封装，以便在项目开发中更加方便地使用websocket。尽管VueWebsocket已经提供了非常方便的API和事件系统，但对于大型项目而言，如果不适当地进行封装和抽象，会给项目带来很多麻烦。因此，我们必须对VueWebsocket进行适当的封装，以便将其与项目其他部分更好地配合。