vue2使用socket.io

在Vue2中使用Socket.io，你需要按照以下步骤进行操作：

1. 在main.js中，首先需要引入Vue和App组件，然后设置Vue的配置参数Vue.config.productionTip为false。

2. 接下来，使用import语句引入VueSocketIO和SocketIO，这两个库是用来在Vue中使用Socket.io的关键。

3. 创建一个VueSocketIO实例，并传入SocketIO的连接地址作为参数。
- 在这个例子中，连接地址是'ws://127.0.0.1:24000'，你可以根据你的实际情况进行修改。

4. 使用Vue.use()方法将VueSocketIO插件注册到Vue中。

5. 最后，创建一个新的Vue实例，并在render函数中将App组件渲染到'#app'元素上。使用$mount()方法将Vue实例挂载到DOM上。

总结以上步骤，你可以在你的main.js文件中添加以下代码：

import Vue from 'vue'
import App from './App.vue'
import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'

Vue.config.productionTip = false

const SOCKETIO = new VueSocketIO({
  debug: true,
  connection: SocketIO('ws://127.0.0.1:24000'),
  vuex: {
    store,
    actionPrefix: 'SOCKET_',
    mutationPrefix: 'SOCKET_'
  },
  options: {
    autoConnect: false
  }
})

Vue.use(SOCKETIO)

new Vue({
  render: h => h(App),
}).$mount('#app')

请确保你已经安装了依赖项vue-socket.io和socket.io-client。你可以使用以下命令在项目中安装这些依赖项：

npm i vue-socket.io -S
npm i socket.io-client -S

注意：在Vue2中，你不能在组件的mounted生命周期钩子中使用this.$socket.on()方法来监听事件。正确的方法是使用VueSocketIO实例的connect()方法来手动连接，并在Vue的实例中使用socket.on()来监听事件。例如：

export default {
  mounted() {
    this.$socket.connect()
    this.$socket.io.on('welcome', (data) => {
      console.log(data);
    })
  }
}

希望这个回答能帮到你！如果你还有其他问题，请随时提问。