Question

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

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

main.js

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

那个网址我想动态地改变，但我找不到办法去做。

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

组件：

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

但它只是一直在偷看。

Answer 1

您可以使用vue-socket.io

处理VueJ中的动态套接字

这是一个例子：

<强>父：

<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:*/*' }（例如）的原因。

注意：

{{3}}只允许创建一个实例。

确保它也有效，我个人将它用于某些项目。

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

1 个答案: