使用Vue時，Pusher和Vue.js組件不會離開通道路由器

Question

我正在使用Pusher和Laravel Echo爲我的應用程序中的某些區域創建存在通道。 我所有的前端路由都是使用Vue Router完成的。

當在路由之間切換時，Vue路由器會根據我的路由設置加載某些組件。它工作得很好，但是，Pusher不會自動斷開用戶與這些頻道的連接。只有當我運行完整頁面刷新時纔會發生，這不是我想要的。

在我的組件，JS代碼加入推通道內mounted，像這樣：

data() { 
     return { 
      users: [], 
     } 
    }, 
    mounted() { 
     Echo.join('transaction.' + this.tid) 
      .here(users => { 
       this.users = users; 
       } 
      }) 
      .joining(user => { 
       this.users.push(user); 
      }) 
      .leaving(user => { 
       this.users.splice(this.users.indexOf(user), 1); 
      }); 
    }, 
    methods: { 
     // ... 
    }, 

如何斷開使用Vue的路由器的路由通道中的用戶，而無需刷新頁面？

謝謝。

Answer 1

我相信Vue路由器可能會因性能原因而使組件實例保持活動狀態。因此，即使在組件之間路由時，websocket通道仍然可以連接。

爲防止出現此問題，您可以使用Vue的組件destroyed方法手動離開通道。

由於您使用Laravel的回聲，所有你需要做的是：Echo.leave('channel-name')

... 
methods: { 
    // ... 
}, 
destroyed() { 
    Echo.leave('transaction.' + this.tid); 
}