Vue.js 在组件之间共享 websocket 连接

发布于05月23日

开始使用一个小型的vuejs应用程序.如何在根组件中打开websocket连接，并在其他组件中重用相同的连接？

我希望组件能够通过相同的连接发送和接收.

应用程序.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，这样就不会在每次改变路由时重新连接.

推荐答案

创建新的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>

This is a simpliest way to share data between components (here you simply share WS instance created in another module). You also can fit MVC-style on it, keeping all logic in controllers (other modules) instead of Vue methods.