Wie wird die dynamische Socket-URL in Komponenten verwendet?

Question

Wie kann ich dynamischen Socket mit verschiedenen URLs/Namespaces verwenden?

Ich versuchte zuerst mit vue-socket.io.

main.js

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

Und das URL ich dynamicly ändern wollen würde, aber ich finde es nicht einen Weg zu tun.

---

Ich habe auch versucht mit socket.io-Client in einer Komponente.

Komponente:

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

aber nur pendidng die ganze Zeit.

Answer 1

können Sie behandeln dynamische Steckdosen in VueJs mit socket.io-client

Hier ein Beispiel:

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 
}, 

Kinder Komponente:

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

In Ihrer übergeordneten Komponente (oder View) können Sie eine Methode erstellen, um dynamisch eine untergeordnete Komponente in der Vorlage hinzuzufügen, mit einem neuen Socket (wenn sich der Server dynamisch ändert, sollten Sie ihn im Untersystem mit einer anderen dedizierten Methode behandeln this.newSocket()).

Es ist möglich, dass Sie ein Problem mit dem Crossorigin haben können, deshalb habe ich { origins: 'http://localhost:*/* http://127.0.0.1:*/*' } (zum Beispiel) hinzugefügt.

Hinweis:

vue-socket.io erlaubt nur eine einzelne Instanz zu erstellen.

sicher sein, dass so gut funktioniert, ich es persönlich für einige Projekte verwenden.