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>

теперь я хотел бы использовать ws на other-page как не подключаться каждый раз, когда я меняю маршрут.

6
vue-router vue.js vuejs2 websocket

3 ответов

пропустите его через router-view.

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

В каждом компоненте страницы

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

кроме того, используйте глобальный магазин, такой как Vuex или один из ваших собственных.

-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.

1

использование Vue mixin или плагина делает это намного проще, например:

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

он инициализирует один сокет и разделяет между всеми компонентами, также имеет простой способ добавления обработчиков событий на компонент, чтобы вы получили хорошую модульность.

не слишком сложно изменить его, чтобы использовать собственные websockets, если вы не хотите использовать сокет.io; или вы можете использовать этот, хотя мне не нравится синтаксис как много:

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

0