vuejs - Anteil websocket-Verbindung zwischen Komponenten

Erste Schritte mit einem kleinen vuejs Anwendung. Wie öffne ich eine websocket-Verbindung, sagen wir mal in den root-Komponente und die Wiederverwendung der gleichen Verbindung, die in anderen Komponenten?

Ich möchte Komponenten in der Lage sein zu senden und empfangen über die selbe Verbindung.
Diese Komponenten sind gonna gebunden werden, um Strecken, so dass es keine geraden Eltern - Kinder-Beziehung zwischen der Stamm-Komponente und die Komponente gerendert für eine route.

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>

Jetzt würde ich gerne wiederverwenden ws im other-page als nicht verbinden jedes mal, wenn ich die route ändern.

InformationsquelleAutor neric | 2017-03-23
  1. -1

    Führen Sie es durch die router-view.

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

    In jeder Seite Komponente,

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

    Alternativ verwenden Sie ein globales Geschäft wie Vuex oder eine eigene Kreation.

    • cool danke. Relevant doc: router.vuejs.org/en/api/router-view.html unter Verhalten. Auch landete ich Wechsel die server-und client-socket.io und mit der github.com/MetinSeylan/Vue-Socket.io vue-Buchse.io-plugin. Die macht der sockel in jeder Komponente.
    • Dann haben Sie etwas falsch gemacht haben.
    • können Sie neue module erstellen ws-Anschluss, export ws-Instanz, und importieren Sie Sie, wohin Sie wollen. Es ist ziemlich einfach, wenn Sie sehen können, meine Antwort hier.
    InformationsquelleAutor Bert
  2. 2

    Erstellen Sie neue js-Datei (sagen wir mal "/services/ws.js"). Erstellen Sie eine Instanz des websocket.

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

    Und dann in Ihre Vue-Komponente zu importieren.

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

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

    Dies ist die einfachste Möglichkeit zum freigeben von Daten zwischen den Komponenten (hier einfach teilen, WS-Instanz erstellt, in einem anderen Modul). Sie können auch passen MVC-Stil auf Sie, und halten alle Logik in Controllern (andere Module) anstelle von Vue Methoden.

    InformationsquelleAutor Vladimir Ishenko
  3. 1

    Mithilfe einer Vue mixin-oder Plug-in macht dies viel einfacher, wie diese:

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

    Es initialisiert einen socket und teilt sich unter alle Komponenten, auch die einfache Möglichkeit, hinzufügen von Ereignis-Handlern pro Komponente, so dass Sie bekommen eine gute Modularisierung.

    Es ist nicht allzu schwer zu modifizieren, verwenden Sie das native websockets, wenn Sie nicht verwenden möchten Buchse.io; oder Sie können diese benutzen, obwohl ich nicht wie die syntax so viel:

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

    InformationsquelleAutor Halcyon
Schreibe einen Kommentar