web-dev-qa-db-ja.com

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

小さな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を再利用したいと思います。

websocketvue.jsvuejs2vue-router
9
neric

新しいjsファイルを作成します（「/services/ws.js」としましょう）。 websocketのインスタンスを作成します。

const WS = new WebSocket('ws://localhost:8080');
export default WS;

次に、Vueコンポーネントにインポートします。

<script>
 import WS from '../services/ws';

 export default {
   // here WS is your websocket instance
 }
 </script>

これは、コンポーネント間でデータを共有する最も簡単な方法です（ここでは、別のモジュールで作成されたWSインスタンスを共有するだけです）。Vueメソッド。

2
Vladimir Ishenko

Vueミックスインまたはプラグインを使用すると、次のように非常に簡単になります。

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

1つのソケットを初期化し、すべてのコンポーネント間で共有します。また、コンポーネントごとにイベントハンドラーを簡単に追加できるため、優れたモジュール化が可能です。

Socket.ioを使用したくない場合は、ネイティブWebSocketを使用するように変更することはそれほど難しくありません。または、これを使用することもできますが、構文はあまり好きではありません。

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

1
Halcyon