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

伊利亚

如何将动态套接字与不同的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');

但是它一直都在等待。

您可以使用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仅允许创建一个实例。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。