sockets - 组件中的开放式 socket 连接

Question

按照官方文档vue-socketio，我在store.js中初始化了套接字。

import VueSocketio from 'vue-socket.io'
import socketio from 'socket.io-client'
Vue.use(VueSocketio, socketio(process.env.SOCKET_PATH), store)

但是套接字在打开项目后立即打开。我可以避免这个字符串Vue.use(VueSocketio, socketio(ws://somepath), store)并在我的组件中使用类似this.$socket.connect(ws://somepath)的代码。以及如何从1个客户端打开两个不同的套接字连接？

Answer 1

您可以使用html5 WebSocket。而且您不需要导入或要求它。已经提供了。您可以打开任意数量的连接。在组件的脚本中:

...
data() {
  return {
    ws1:  null,
    ws2:  null,
  }
},
mounted() {
  this.startStream1()
  this.startStream2()
},
methods: {
  startStream1 () {
    let vm           = this
    vm.ws1           = new WebSocket("wss://somepath1")
    vm.ws1.onmessage = function (event) {
      vm.$store.dispatch("handleStream", JSON.parse(event.data))

    }
    vm.ws1.onerror   = function (error) {
      console.log(error)
    }
  },
  closeStream1 () {
    this.ws1 && this.ws1.close()
  },
  startStream2() {
    let vm          = this
    vm.ws2          = new WebSocket("wss://somepath2")
    ...
  },
  ...
}