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

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

有什么办法吗？不一定要使用此库，只要它可以工作，我就不介意用另一个库重写代码。

最佳答案

这可能就像只连接两个套接字并设置它们各自的侦听器一样简单。乍一看，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
})

应用程序

<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)
      }
    })
  }
})

关于node.js - 处理Vue项目中的多个套接字，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58879395/