vuejs - 在组件之间共享 websocket 连接答案

【问题标题】：vuejs - share websocket connection between componentsvuejs - 在组件之间共享 websocket 连接
【发布时间】：2017-08-16 09:44:58
【问题描述】：

开始使用小型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，以免每次更改路线时都重新连接。

【问题讨论】：

标签： websocket vue.js vuejs2 vue-router

【解决方案1】：

创建新的 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 实例）。您还可以在其上安装 MVC 样式，将所有逻辑保留在控制器（其他模块）中而不是 Vue 方法中。

【讨论】：

【解决方案2】：

使用 Vue mixin 或插件可以让这变得更容易，就像这样：

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

它初始化一个套接字并在所有组件之间共享，还可以轻松地为每个组件添加事件处理程序，以便您获得良好的模块化。

如果你不想使用socket.io，修改它以使用本机websockets并不难；或者你可以使用这个，虽然我不太喜欢这种语法：

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

【讨论】：