0
私はプロジェクトに貢献したい - それはVueで書かれており、私はVueの初心者です。どちらがWebSocketの異なるメッセージに基づいて、いくつかの状態を更新する必要がありますSetupとMainAppvue：websocket listenerからグローバルイベントを出す
-
私は2つのコンポーネントがあります。いくつかのwebsocketメッセージは、前者に影響を与えます。
Vueはサービスを知らないので、空の<template>というカスタムコンポーネントを作成すると思いました。そのWebSocketをインスタンス化し、リスナーで新しいメッセージが発生するたびにthis.emit()を発行します。
他の両方のコンポーネントが発光を聞いて反応することができます。
残念ながら、私はwebsocketコンポーネントを動作させることができません。
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 "サービス"：
<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>
メインアプリから例えば送信（これが動作しているようです） ：
import WsSvc from './WsService.vue';
export default {
data() {
//
},
subscribe() {
let jsonrpc = "the jsonrpc string";
WsSvc.send(jsonrpc);
}
}
emitに聞く：
export default {
data() {
//
},
created() {
this.$on("reg_received", function(result){
//do smth with the result
});
}
}
ウィットこの構成、createdフックが実際に呼び出されることは決してありません - ので、私はonmessageリスナーを打つことは決してないだろう。私が思ったカスタムコンポーネントを持っている理由は、私がemit関数にアクセスできるということでした。
私はそれをもっと複雑にしていると感じていますが、私はまだそれを正しく管理していません。ソリューションはこのアプローチに従う必要はありません。
"Vueがサービスを知りません"。これは本当に正しいわけではありません。 APIをビルドし、使用するコンポーネントにインポートしてください。ここにコンポーネントは必要ありません。 – Bert
@Bertあなたが正しいかもしれませんが、問題は、onmessageからコールバックして他のコンポーネントのプロパティを更新する方法よりも、APIが少なくて済みます。 – faboolous
これはいかがですか？ https://codesandbox.io/s/4wp90vvr2w – Bert