vue socket通信

Vue中使用Vue-socket.io可以实现即时聊天应用的socket通信。通过vuex管理状态，可以实现多个组件之间的通信。

以下是一个示例代码，演示了如何在Vue中使用Vue-socket.io进行socket通信：

// main.js
import Vue from 'vue'
import App from './App.vue'
import VueSocketIO from 'vue-socket.io'
import store from './store'

Vue.use(new VueSocketIO({
  debug: true,
  connection: 'http://localhost:3000', // socket服务器地址
  vuex: {
    store,
    actionPrefix: 'SOCKET_',
    mutationPrefix: 'SOCKET_'
  }
}))

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

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    messages: [] // 存储聊天消息的数组
  },
  mutations: {
    SOCKET_NEW_MESSAGE(state, message) {
      state.messages.push(message) // 接收到新消息时，将其添加到messages数组中
    }
  },
  actions: {
    sendMessage(context, message) {
      context.commit('SOCKET_NEW_MESSAGE', message) // 发送消息时，通过mutation更新state中的messages数组
      this._vm.$socket.emit('newMessage', message) // 向socket服务器发送newMessage事件
    }
  }
})

<!-- App.vue -->
<template>
  <div>
    <div v-for="message in messages" :key="message.id">{{ message.text }}</div>
    <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="输入消息">
  </div>
</template>

<script>
export default {
  data() {
    return {
      newMessage: ''
    }
  },
  computed: {
    messages() {
      return this.$store.state.messages // 通过vuex的state获取聊天消息
    }
  },
  methods: {
    sendMessage() {
      this.$store.dispatch('sendMessage', this.newMessage) // 调用vuex的action发送消息
      this.newMessage = '' // 清空输入框
    }
  }
}
</script>

在上述示例中，通过Vue.use(VueSocketIO)将Vue-socket.io插件安装到Vue中。在main.js中配置了socket服务器的地址，并将vuex与socket通信关联起来。在store.js中定义了state、mutations和actions，用于存储和处理聊天消息。在App.vue中，通过computed属性获取vuex中的聊天消息，并通过methods方法发送消息。