sockets - 如何在组件中使用动态套接字URL？

Question

如何将动态套接字与不同的URL/命名空间一起使用？

我首先尝试使用vue-socket.io。

main.js

import VueSocketio from 'vue-socket.io';
Vue.use(VueSocketio, 'http://localhost:8091/notification');

我想动态更改该URL，但是我没有找到一种方法。

我也尝试在组件中使用socket.io-client。

组件:

import io from 'socket.io-client';
const adminSocket = io('http://localhost:8091/notification');

但是它一直都在等待。

Answer 1

您可以使用socket.io-client处理VueJs中的动态套接字

这里是一个例子:

parent :

<MyComponent server="http://127.0.0.1:8000/"></MyComponent>
<MyComponent server="http://127.0.0.1:8000/namespaced-socket"></MyComponent>
<MyComponent :server="dynamicServer"></MyComponent>

//...

components: {
  MyComponent
},

子组件:

import SocketIO from 'socket.io-client'

//...

export default {
  name: 'MyComponent',
  data () {
    return {
      socket: null
    }
  },   
  props: {
    server: {
      type: String,
      required: true
    }
  },   
  methods: {
    newSocket () {
      let socket = SocketIO(this.$props.server, { origins: 'http://localhost:*/* http://127.0.0.1:*/*' })
      this.socket = socket
      this.socket.on('data', (data) => { // your server emits, ready, data, etc...
        console.log('data')
        // do whatever you want with `data`
      })
    }
  },    
  mounted () {
    this.newSocket()
  }
}

在父组件(或 View )中，您可以创建一种在模板中动态添加子组件的方法，并在其中添加新的套接字(如果服务器动态更改，则应使用其他专用方法(例如 this.newSocket())在子组件中处理它)。

跨域可能有问题，这就是为什么我添加了 { origins: 'http://localhost:*/* http://127.0.0.1:*/*' }(例如)。

注意:

vue-socket.io仅允许创建一个实例。

确保它也能正常工作，我个人将其用于某些项目。