Socket Io 客户端在 Vue 组件上创建多个监听器

Question

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

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

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

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

我尝试使用“once”代替“on”，但同样的问题。

如何确保只有一个 Listener 处于活动状态？

注意：socket 组件是作为实例属性添加到 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)
}

我基于 this answer 的方法 removeListener 但它可能是删除侦听器的其他方法，具体取决于您的库。