如何在组件中使用动态套接字url？

Question

如何使用具有不同urls/名称空间的动态套接字？

我第一次尝试使用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中的动态套接字

这里有一个例子：

父母：

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

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

您可能会遇到跨源的问题，这就是我添加{ origins: 'http://localhost:*/* http://127.0.0.1:*/*' }的原因(例如)。

注：

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

确保这也是有效的，我个人使用它在一些项目。