我尝试在方法内而不是在启动时添加 Vue 套接字集群连接。这是我的研究结果。我看到几个问题。我在名为 connect() 的方法中添加了连接指令，该方法通过单击另一个组件来调用。它可以工作，但是事件侦听器存在问题。我尝试使用 Vue.extend 添加一个以将其添加到连接中，但它会阻止对组件进行的任何更新。例如，在我的代码中，我添加了 this.msg="this is a test"; 但是在我添加事件侦听器后，味精突变不起作用。
我还尝试使用 this.$options.SeoScanEvents.nameofwebsocketmessage 添加事件侦听器作为 vue.extend 的替代方案，但它确实有效。
此代码使用虚拟 vue.js 应用程序的结构。所以如果你想复制这个问题，你只需要安装一个 VUEJS 应用程序的虚拟结构，然后将 main.js 和 HelloWorld.vue 替换为以下内容。然后，您需要 socketcluster.io 中的默认 server.js 和 worker.js 在端口 8000 上运行。它应该返回一个随机数。
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import VueSocketCluster from 'vue-socket-cluster'
Vue.config.productionTip = false
/* eslint-disable no-new */
const vm = new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
SeoScanEvents:{
connect: function(data){ // I added it here to see in vm object if I could replicate the property. For sure it does not work because it comes before the connection directives.
console.log('socket connected')
console.log(data)
},
// ['error','connect','disconnect','connectAbort','connecting', etc ...] See socket cluster docs
error () {
//An error occurred on the connection name echo
},
connecting () {
},
// ...
// for hyphen separated events such as 'custom-error' use ...
customError () {
},/*
random(data){
console.log(data)
}*/
},
methods:{
connect(){
Vue.use(VueSocketCluster, {
connections: [{
name: 'SeoScan',
hostname: 'localhost',
secure: false,
port: 8000,
rejectUnauthorized: false
}]
})
var Comp = Vue.extend({
SeoScanEvents:{
random: function(data){
console.log(data);
}
}
});
new Comp().$mount('#app'); // this works but it blocks any updates on my vue component for example the this.msg=... below does not work
console.log(this);
/*
this.$options.SeoScanEvents.random = function random(data) { // this does not work
console.log(data) // should show the random numbers generated by the default server config file from Socket Cluster
}
*/
}
}
});
你好世界.vue
<template ref="gogo">
<div class="hello">
<h1>{{ msg }}</h1>
<h2 @click="submit1">Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template>
<script>
var message = 'Vue.js is rad';
export default {
name: 'HelloWorld',
data () {
return {
msg: message,
myArray: []
}
},
methods:{
submit1(){
console.log(this);
this.msg="this is a test"; // this does not work when I add the event listeners using Vue.extend
console.log(new Date())
this.$root.connect(); // trigger Vue Socket cluster connection
}
},
mounted(){
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>