Socket Io客户端在Vue Componet上创建多个侦听器

Question

我使用Vue.js作为前端框架。

我正在使用创建的生命周期钩子在组件上添加socket.io侦听器。

created () {
    // socket listener
    this.$socket.on('event', (response) => { .... })
}

现在，如果组件已卸载并稍后重新安装，则会创建两个侦听器。

我尝试使用“一次”代替“开”但同样的问题。

如何确保只有一个监听器处于活动状态？

注意：套接字组件作为实例属性添加到Vue。

Answer 1

您没有说$socket是什么，但处理此问题的方法是在组件被销毁时删除侦听器。

methods:{
  handleEvent(response) { ... }
},
created(){
  this.$socket.on('event', this.handleEvent)
},
beforeDestroy(){
  // using "removeListener" here, but this should be whatever $socket provides
  // for removing listeners
  this.$socket.removeListener('event', this.handleEvent)
}

我将方法removeListener基于，但它可能是根据您的库删除侦听器的其他方法。