在Angular App中使用前进和后退导航箭头时断开套接字

Question

我正在开发一个Angular应用程序，该应用程序需要与路径"/room"中的后端进行套接字连接(使用socket.io-client库。在路径"/rroom"的主组件的ngOnInit((中建立连接(。套接字在ngOnDestroy((中断开连接。

ngOnInit() {
this.socket = io(environment.SOCKET_URI, {query: `roomId=${this.roomId}&username=${this.username}`});
this.socket.on('connect', () => {
console.log("Socket connection with server established");
})
this.socket.on('disconnect', (reason) => {
this.openSnackBar("You've left the room", "");
this.router.navigate(['dashboard']);
})
}
ngOnDestroy() {
this.socket.emit('disconnect', '');
}

我使用node.js后端。我处理断开如下：

socket.on('disconnect', () => {
socket.emit('message', 'Socket connection aborted');
socket.disconnect(true);
}

如果我强制导航到另一个路径，即直接在URL栏上键入路径或使用路由器，则会调用ngOnDestroy((函数以及后端的"disconnect"回调。

但是，如果我在浏览器中使用"后退"或"前进"导航箭头，则会调用ngOnDestroy((，但不会触发后端的"断开连接"回调，套接字将继续存在于后端。只有在刷新导航到的新页面后，回调才会被触发，套接字才会完全断开。

是什么导致了这种行为？谢谢你的帮助。

Answer 1

显然，我必须在客户端使用以下命令来断开套接字的连接：

ngOnDestroy() {
// this.socket.emit('disconnect', '');
this.socket.disconnect();
}

由于某些原因，在使用前后导航箭头时断开连接与上一个命令不起作用。