时间戳

首页 > 解决方案 > 在 Vue 项目中处理多个套接字

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

问题描述

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

有没有办法做到这一点？不一定用这个库，我不介意用另一个库重写代码，只要它有效。

标签： node.jssocketsvue.js

解决方案

这可以像连接两个套接字并设置它们各自的侦听器一样简单。快速浏览一下，大部分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
})

应用程序.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)
      }
    })
  }
})

推荐阅读