Vue 项目 WebSocket 配置：使用 vue-socket.io 插件

在 Vue 项目中，可以使用 'vue-socket.io' 插件来配置 WebSocket。这个插件可以让你在 Vue 应用中轻松地集成 Socket.io 库。你可以通过 npm 安装它，然后在 main.js 中引入它并将其添加到 Vue 实例中。具体操作如下：

安装 'vue-socket.io' 插件：npm install vue-socket.io
在 main.js 中引入 'vue-socket.io' 并将其添加到 Vue 实例中：

import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'

Vue.use(new VueSocketIO({
  debug: true,
  connection: SocketIO('http://localhost:3000')
}))

这里的 'connection' 属性指定了 Socket.io 服务器的地址。

在组件中使用 WebSocket：

<template>
  <div>
    <p v-for='message in messages' :key='message'>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: []
    }
  },
  mounted() {
    this.$socket.on('message', message => {
      this.messages.push(message)
    })
  }
}
</script>

这里的 this.$socket 即为配置好的 WebSocket 连接，可以使用它的 'on' 方法来监听服务器发送的消息。