vuejs - コンポーネント間のWebSocket接続を共有する

Question

小さなvuejsアプリケーションを使い始める。ルートコンポーネントでwebsocket接続を開き、他のコンポーネントで同じ接続を再利用する方法を教えてください。

コンポーネントが同じ接続で送受信できるようにします。 これらのコンポーネントはルートに結び付けられ、ルートコンポーネントとルート用にレンダリングされたコンポーネントの間に直接的な親子関係は存在しません。

App.vue：

<template> 
    <div id="app"> 
    <h1>My app</h1> 
    <router-link to="/">P&L</router-link> 
    <router-link to="/other-page">other page</router-link> 
    <router-view></router-view> 
    </div> 
</template> 

<script> 
export default { 

    name: 'app', 
    data() { 
    return { 
     ws: null 
    } 
    }, 

    created() { 
    this.ws = new WebSocket('ws://localhost:8123/ws') 
    }, 
    methods: { 
    } 
    } 
} 
</script> 

今、私はルートを変更するたびに再接続しないようother-pageにwsを再利用したいと思います。

Answer 1

router-viewを通過させます。各ページの構成要素で

<router-view :socket="ws"></router-view> 

、また

{ 
    props:["socket"], 
    data... 
} 

、Vuexたり、独自の創造の一つのようなグローバルストアを使用します。 Vueのミックスインやプラグインを使用して

Answer 2

はこの1つのように、これは非常に簡単になります：

https://github.com/icebob/vue-websocket

それはとてもコンポーネントごとにイベントハンドラを追加する簡単な方法を持っても、すべての構成要素のうちの1つのソケットと株式を初期化しますあなたは良いモジュール化を得る。

socket.ioを使用したくない場合は、ネイティブWebSocketを使用するように変更することはあまり難しくありません。

https://www.npmjs.com/package/vue-native-websocket