在 Angular 应用程序中使用前进和后退导航箭头时断开套接字答案

【问题标题】：Disconnect Socket while using Forward & Backward navigation arrows in Angular App在 Angular 应用程序中使用前进和后退导航箭头时断开套接字
【发布时间】：2020-12-05 08:53:22
【问题描述】：

我正在开发一个 Angular 应用程序，该应用程序需要与路径“/room”中的后端建立套接字连接（使用 socket.io-client 库。在路径“/room”的主要组件的 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() 函数以及后端中的“断开连接”回调。

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

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

【问题讨论】：

标签： node.js angular sockets socket.io

【解决方案1】：

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

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

由于某种原因，使用向后和向前导航箭头时的断开连接不适用于上一个命令。

【讨论】：