我想参与一个项目 - 这是写在Vue公司，我在Vue公司是初学者。
我有两个组成部分 - Setup和MainApp
双方将根据需要从WebSocket的不同消息更新一些状态。一些消息的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功能。
我感觉我在做这复杂得多，它应该是，但我没有设法还没有得到它的权利。该解决方案并不需要采用这种做法。
有没有必要在这种情况下，插座特定组件。我在过去做了几个项目是实现该处理套接字消息，然后导入API或存储到需要它的组件的API或存储对象。此外in a similar answer，我将展示如何在Vuex一个WebSocket的整合。
这里是结合使用的Vue作为具有可以导入到任何组分的web套接字事件发射器的概念的例子。该组件可以订阅和听它想听的消息。包裹在这样的插座抽象原始套接字接口路程，允许用户与在$ / $关闭订阅在一个更典型的Vue的方式工作。
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
以下是在一个组件正在使用的代码的一个例子。
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>
这里是一个working example。
嘿，这应该为你工作好，易于
这是我与.vue文件示例
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>