node.js - 处理 Vue 项目中的多个套接字

Question

现在我有一个使用 Vue-native-socket 与单个套接字交互的 Vue 前端。我需要我的应用程序监听多个套接字，尽管在 Vue-native-socket 的文档页面上没有有关如何实现这一点的信息。

有什么办法可以做到这一点吗？不一定用这个库，我不介意用另一个库重写代码，只要它能工作。

Answer 1

这可能就像连接两个套接字并设置它们各自的监听器一样简单。快速浏览一下，vue-native-socket 完成的大部分内容(在问题的上下文中)也可以使用 vuex 存储来实现，或编写自己的插件，或两者兼而有之!

这是一个简单的解决方案:

store.js

const state = {
  signalSocket: undefined,
  dataSocket: undefined
}

const getters = {
  signalSocket: state => state.signalSocket,
  dataSocket: state => state.dataSocket,
}

const mutations = {
  signalSocket (state, v) {
    state.signalSocket = v
  },
  dataSocket (state, v) {
    state.dataSocket = v
  }
}

export default new Vuex.Store({
  state,
  getters,
  mutations
})

App.vue

<template>
  ...
</template>

<script>
export default {
  computed: {
    signalSocket: {
      get () { return this.$store.getters.signalSocket },
      set (v) { this.$store.commit('signalSocket', v) }
    },
    dataSocket: {
      get () { return this.$store.getters.dataSocket },
      set (v) { this.$store.commit('dataSocket', v) }
    }
  },
  mounted () {
    this.signalSocket = new WebSocket('...')
    this.dataSocket = new WebSocket('...')
    ...
  }
}
</script>

如果您希望此变量在任何地方都可用，就像 vue-socket-native 一样，您可以将以下内容添加到 main.js

main.js

import Vue from 'vue'
import Store from './store'

Vue.use({
  install (Vue, options) {
    Object.defineProperty(Vue.prototype, '$signalSocket', {
      get () {
        return store.getters.signalSocket
      },
      set (v) {
        return store.commit('signalSocket', v)
      }
    })
    Object.defineProperty(Vue.prototype, '$dataSocket', {
      get () {
        return store.getters.dataSocket
      },
      set (v) {
        return store.commit('dataSocket', v)
      }
    })
  }
})