Wie übergebe ich eine Websocket-Instanz an vue.js-Komponenten und rufe send() danach auf?

Question

Ich versuche, eine Nachricht zu rufen über einen Web-Buchse an den Server senden und senden, wenn eine Schaltfläche klicken:

// HelloWorld.vue 

<template> 
    <div class="hello"> 
    <h1>{{ msg }}</h1> 
    <button v-on:click="send($event)">Send</button> 
    </div> 
</template> 

<script> 
export default { 
    name: 'HelloWorld', 
    props: ['socket'], 
    data() { 
    return { 
     msg: 'Welcome to Your Vue.js App', 
    }; 
    }, 
    methods: { 
    send:() => { 
     this.socket.addEventListener('open',() => { 
     this.socket.send('Hello Server!'); 
     }); 
    }, 
    }, 
}; 
</script> 


// App.vue 

<template> 
    <div id="app"> 
    <img src="./assets/logo.png"> 
    <router-view :socket="ws"/> 
    </div> 
</template> 

<script> 
export default { 
    name: 'app', 

    created() { 
    this.ws = new WebSocket('ws://localhost:3000/websocket'); 
    }, 
}; 
</script> 

Die Störung, die ich erhalte, wenn ich auf die Schaltfläche klicken senden:

Uncaught TypeError: Cannot read property 'addEventListener' of undefined at VueComponent.send (HelloWorld.vue?cc3a:19) at Proxy.boundFn (vue.esm.js?efeb:190) at click (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-469af010","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0&bustCache!./src/components/HelloWorld.vue (app.js:905), <anonymous>:13:17) at invoker (vue.esm.js?efeb:2004) at HTMLButtonElement.fn._withTask.fn._withTask (vue.esm.js?efeb:1802)

Answer 1

Versuchen Sie, die Socket-Instanz im globalen Fensterbereich zu erstellen. Sie wird erstellt, bevor die Vue-App bereitgestellt wird und auf die Sie in Ihrer App zugreifen können.

App.vue

<script> 
window.socket = new WebSocket('ws://localhost:3000/websocket'); 
export default { 
    name: 'app' 
}; 
</script> 

HelloWorld.vue

methods: { 
    send:() => { 
    window.socket.addEventListener('open',() => { 
     window.socket.send('Hello Server!'); 
    }); 
    }, 
},