コンポーネントで動的ソケットURLを使用するには？

Question

どのように異なるURL /名前空間で動的ソケットを使用できますか？

私は最初にvue-socket.ioで試しました。

main.js

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

そして、そのURL私はdynamicly変更したいと思うが、私はそれを行うための方法を見つけることができませんでした。

---

私はまた、コンポーネントでsocket.ioクライアントてみました。

コンポーネント：

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

それだけですべての時間をpendidng。

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は、ただ1つのインスタンスを作成することができます。

これも機能していることを確認してください。私は個人的にいくつかのプロジェクトに使用しています。