Question

我尝试在方法内而不是在启动时添加Vue套接字群集连接。这是我研究的结果。我看到几个问题。我在一个名为connect（）的方法中添加了连接指令，通过从另一个组件单击来调用此方法。它有效，但是，事件监听器存在问题。我试图使用Vue.extend添加一个将其添加到连接但它阻止对组件进行的任何更新。例如，在我的代码中，我添加了this.msg =“这是一个测试”;但添加事件监听器后，msg变异不起作用。

我还尝试使用这个来添加事件监听器。$ options.SeoScanEvents.nameofwebsocketmessage作为vue.extend的替代方案，但它确实可以工作。

此代码使用dummy 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
} 
*/

  }
}
});

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>

Answer 1

正确的解决方案是

使用autoConnect创建一个vue.use连接：false从'vue-socket-cluster'导入VueSocketCluster

<div class="rcbScroll rcbWidth" style="height:180px;width:100%;">
   <div class="rcbCheckAllItems"><input type="checkbox" class="rcbCheckAllItemsCheckBox">Check All</div>
   <ul class="rcbList" style="list-style:none;margin:0;padding:0;zoom:1;">
      <li class="rcbHovered "><input type="checkbox" class="rcbCheckBox">Dallas , Wanda</li>
      <li class="rcbItem "><input type="checkbox" class="rcbCheckBox">Parker , Tina</li>
      <li class="rcbItem "><input type="checkbox" class="rcbCheckBox">Plano , Samantha </li>
      <li class="rcbItem "><input type="checkbox" class="rcbCheckBox">Richardson , Christina</li>
      <li class="rcbItem "><input type="checkbox" class="rcbCheckBox">Dave , Test</li>
      <li class="rcbItem "><input type="checkbox" class="rcbCheckBox">clinician , test</li>
      <li class="rcbItem "><input type="checkbox" class="rcbCheckBox">Smith , Jasmin</li>
   </ul>
</div>

然后，在导出默认值下添加组件（此处为HelloWorld.vue）事件侦听器

SeoScanEvents：{ connect：function（data）{ console.log（'socket connected'）的console.log（数据） }，随机（数据）{ 的console.log（数据） } }
在方法submit1中，而不是从根调用方法connect，调用将启动连接的方法：this。$ SeoScanClient.connect（）;

如何在方法中向Vue套接字集群客户端添加事件侦听器？

1 个答案: