Я пытаюсь добавить кластерное соединение с сокетом Vue внутри метода, а не при запуске.Вот результат моего исследования.Я вижу несколько вопросов.Я добавил директивы подключения в метод с именем connect (), этот метод вызывается щелчком другого компонента.Это работает, но затем возникает проблема со слушателями событий.Я попытался добавить один с помощью Vue.extend, чтобы добавить его к соединению, но он блокирует любое обновление, сделанное на компоненте.Например, в своем коде я добавил this.msg = "это тест";но мутация msg не работает после добавления прослушивателей событий.
Я также пытался добавить прослушиватели событий, используя это. $ options.SeoScanEvents.nameofwebsocketmessage в качестве альтернативы vue.extend, но он работает наall.
Этот код использует структуру приложения-пустышки vue.js.Поэтому, если вы хотите повторить эту проблему, вам просто нужно установить фиктивную структуру приложения VUEJS, а затем заменить main.js и HelloWorld.vue следующим.Затем для работы на порту 8000 требуются серверные файлы по умолчанию: server.js и worker.js из socketcluster.io. Он должен возвращать случайное число.
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
}
*/
}
}
});
HelloWorld.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>