websocketインスタンスをvue.jsコンポーネントに渡し、send（）を呼び出すにはどうすればよいですか？

Question

私はボタンをクリックすると、サーバーへのWebソケットの上にメッセージを送信し、送信呼び出ししようとしています：

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

私が送信するボタンをクリックしたときに私が得るエラーは次のとおりです。

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

グローバルウィンドウのスコープでソケットインスタンスを作成してみます。 Vueアプリがマウントされる前に作成され、アプリ全体でアクセスできます。

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!'); 
    }); 
    }, 
},