Ausstrahlen von globalen events von websocket-Hörer

Möchte ich dazu beitragen, ein Projekt – so steht es in Vue, und ich bin ein Anfänger in Vue.

Habe ich zwei-Komponenten – Setup und MainApp

Beide brauchen, um zu aktualisieren, einige Staatliche beruhen auf verschiedenen Meldungen aus der websocket. Einige websocket-Nachrichten beeinflussen, die ersteren etwas die letzteren.

Vue nicht weiß, services, also dachte ich, ich würde nur eine benutzerdefinierte Komponente erstellen, mit leeren <template>. instanziieren Sie die websocket es, und geben Sie dann eine this.emit() jedes mal, wenn eine neue Nachricht kommt in den Hörer.

Beiden anderen Komponenten hören würde, der ausstrahlt und in der Lage wäre zu reagieren.

Leider komme ich nicht an die websocket-Komponente zu arbeiten.

main.js:

import Ws from './WsService.vue';
//other imports

const routes = [
  //routes
]


const router = new VueRouter({
  routes //short for `routes: routes`
})   

const app = new Vue({
  router
}).$mount('#app')
//I thought this to be the way to instantiate my webSocket service:
const WsService = new Vue({
  el: '#WsService',
  components: { Ws }
});

index.html

  <body>
    <div id="app">
      <div id="WsService"></div>
      <router-link to="/setup">Setup</router-link>
      <router-link to="/main-app">Main App</router-link>
      <router-view></router-view>
    </div>
    <script src="/dist/demo-app.js"></script>
  </body>

websocket – „service“:

<template>
</template>

<script>
const PORT_LOCAL = 9988; 
var ws = new WebSocket("ws://localhost:" + PORT_LOCAL);
ws.onopen = function() {
     ws.send('{"jsonrpc":"2.0","id":"reg","method":"reg","params":null}');
};

ws.onerror =  function(e) {
      console.log("error in WebSocket connection!");
      console.log(e);
};

export default {

  data() {
    return {
    }
  },

  created() {
    var self = this;
    ws.onmessage =  function(m) {
          var msg = JSON.parse(m.data);
          switch(msg.id) {
            //result for address request
            case "reg": 
              self.$emit("reg_received", msg.result);
              break;
            case "send":
              self.$emit("send_received", msg.result);
              break;
            case "subscribe":
              self.$emit("subscribe_received", msg.result);
              break;
            default:
              console.log(msg);
              break;
          }
    }
  },

  methods: {
  },

  send(id, method, params) {
     ws.send('{"jsonrpc":"2.0","id":"' + id + '","method":"' + method + '","params":null}');

    }
  }

}
</script>

Senden, zum Beispiel aus der Haupt-app (dieser scheint zu funktionieren):

 import WsSvc from './WsService.vue';
 export default {
   data() {
     //
   },
   subscribe() {
     let jsonrpc = "the jsonrpc string";
     WsSvc.send(jsonrpc);
   }
 }

Hören emit:

 export default {
   data() {
     //
   },
   created() {
     this.$on("reg_received", function(result){
       //do smth with the result
     });

   }
 }

Witz diese Konfiguration, die created Haken eigentlich nie aufgerufen wird – und so werde ich nie auf die onmessage Zuhörer. Der Grund, um eine benutzerdefinierte Komponente, die ich dachte, war, dass ich Zugriff auf die emit Funktion.

Es sich anfühlt, ich mache es komplizierter als es sein sollte, aber ich habe es noch nicht geschafft, es richtig zu machen. Die Lösung muss nicht diesem Ansatz Folgen.

  • „Vue nicht weiß, services“. Dies ist nicht wirklich korrekt. Erstellen Sie Ihren API-und import in der Komponente, wo Sie es verwenden möchten. Es gibt keine Notwendigkeit für eine Komponente hier.
  • vielleicht hast du Recht, das Problem ist aber weniger die API, als wie Rückruf vom onmessage und update der anderen Komponenten Eigenschaften.
  • Wie wäre es damit? codesandbox.io/s/4wp90vvr2w
  • Ich habe nicht genau lösen, aber dein link hat mir der Verdacht, es zu lösen. Wenn Sie möchten, liefern Sie als Antwort, ich werde es akzeptieren. Danke!
InformationsquelleAutor faboolous | 2017-10-10



2 Replies
  1. 8

    Gibt es keine Notwendigkeit für eine Buchse bestimmten Komponente in diesem Fall. Was ich in der Vergangenheit getan haben, auf ein paar Projekte zu implementieren, die eine API oder-Objekt zu speichern, das übernimmt die socket-Nachrichten und importieren Sie dann, dass die API oder speichern Sie in die Komponenten, die Sie benötigen. Auch in eine ähnliche Antwort, ich zeigen, wie die Integration eines WebSocket mit Vuex.

    Hier ist ein Beispiel, das das Konzept der Verwendung von Vue als event-emitter mit einem web socket, können importiert werden, in eine Komponente. Die Komponente kann abonnieren und hören Sie die Nachrichten, die er hören will. Die Verpackung der sockel auf diese Weise abstrahiert die raw-socket-interface entfernt und ermöglicht es Benutzern, die Arbeit mit den $on/$off-Abonnements in der Regel eher Vue fashion.

    Socket.js

    import Vue from "vue"
    
    const socket = new WebSocket("wss://echo.websocket.org")
    
    const emitter = new Vue({
      methods:{
        send(message){
          if (1 === socket.readyState)
            socket.send(message)
        }
      }
    })
    
    socket.onmessage = function(msg){
      emitter.$emit("message", msg.data)
    }
    socket.onerror = function(err){
      emitter.$emit("error", err)
    }
    
    
    export default emitter

    Hier ist ein Beispiel dafür, dass code in einer Komponente.

    App.vue

    <template>
      <ul>
        <li v-for="message in messages">
          {{message}}
            </li>
        </ul>
    </template>
    
    <script>
        import Socket from "./socket"
    
        export default {
            name: 'app',
            data(){
                return {
                    messages: []
                }
            },
            methods:{
              handleMessage(msg){
                 this.messages.push(msg) 
              }
            },
            created(){
                Socket.$on("message", this.handleMessage)
            },
            beforeDestroy(){
                Socket.$off("message", this.handleMessage)
            }
      }
    </script>

    Und hier ist ein Beispiel.

  2. 0

    Hey, das sollte für Sie arbeiten besser und einfach

    Diesem mein Beispiel mit .vue-Datei

    yourVueFile.Vue

     <template>
    //key in your template here
    </template>
    
    <script>
    export default {
    //use the created() option to execute after vue instance is created
      created() {
        let ws = new WebSocket("yourUrl");
        ws.onopen = e => {
          ws.send(
            JSON.stringify({ your json code })
          );
    
            ws.onmessage = e => {
            let data = JSON.parse(e.data);
    
    //the this.$data get your data() options in your vue instance
                this.$data.dom = data;
    
          };
        };
      },
      data() {
        return {
           dom: core
        };
      },
      methods: {
    
      }
    };
    </script>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.