如何在 Angular 2/4+ 和 Socket.io 中关闭 websocket答案

【问题标题】：How to close a websocket in Angular 2/4+ and Socket.io如何在 Angular 2/4+ 和 Socket.io 中关闭 websocket
【发布时间】：2017-08-08 14:13:01
【问题描述】：

我正在尝试创建一个使用 websockets 的应用程序，但我遇到了可怕的“多连接”问题，每次重新加载页面而不是关闭并重新打开一个新的 websocket 时，只是将另一个连接添加到列表中。我的问题是，是否有人知道从 Angular 2/4+ 关闭 Socket.io websocket 的最佳/正确方法。

这是我所拥有的代码：

service.ts

getUserSocket(userID: string): Observable<any> {
    return new Observable(_Observer => {

        // Setup the socket namespace subscription
        this.UserSocket = io(NTC_API_URL + `/user/${userID}`, { secure: true });

        this.UserSocket.on('message', _Message => {
            console.log(_Message);
        })
    })
}

closeUserSocket() {
    this.UserSocket.disconnect();
    this.UserSocket.close();
}

component.ts

ngOninit() {
    // Setup the User Socket
    this.UserSocket = this._UsersService.getUserSocket(this.currentUser.userID)
    .subscribe(_UserSocketMessage => {
        console.log(_UserSocketMessage);
    })
}

ngOnDestroy() {
    this.UserSocket.unsubscribe();
    this._UsersService.closeUserSocket();
}

这似乎不起作用，因为我仍然可以通过登录应用程序来观察连接堆积，我已确认调用要销毁的组件。

我尝试的另一个选项是使用once 侦听器而不是on 侦听器，它有效，但我不确定副作用，并阅读了几个地方，它不一定是不关闭连接的修复，我能理解。

【问题讨论】：

.disconnect 方法应该用一个布尔值调用，该值指示是否关闭底层连接。所以你应该试着打电话给.disconnect(true)。参考：stackoverflow.com/a/31349392/5619416
你确定吗？我的智能感知对我大喊大叫，因为 disconnect() 方法不接受任何参数。
啊，我想你指的是server 方法而不是client 方法。客户端正在 Angular 端使用。
另一种选择可能是在 observable 上使用 takeUntil() 方法，但我只是不确定在知道何时关闭订阅方面我将基于什么声明。
啊，对不起。我认为客户端和服务器端的方法签名是相同的。好吧，据我所知，.disconnect() 和 .close() 应该可以完成这项工作，但是，为了它，您可以尝试从客户端发出一个特殊事件，例如 closeConnection，然后在服务器上监听并为相应的客户端调用 .disconnect(true) 方法。这可能行得通。

标签： javascript node.js angular sockets socket.io

【解决方案1】：

经过相当多的修补和研究，我发现 Web 套接字具有弹性。换句话说，由于它们被设计为尽可能重新连接，因此专注于disconnect 和close 是错误的方法。在创建网络套接字连接方面执行政策要容易得多。

首先，我不得不在服务器端重构一些东西，以确保特定的命名空间只被初始化一次。这不是通过更改初始化代码来实现的，而是通过确保 Web 套接字初始化仅发生在仅在启动时发生的地方，或者在仅极有可能发生一次的进程中发生的，例如创建特定用户.

在角度方面，它也非常简单，我所要做的就是将套接字分配给服务中的一个属性，然后在建立套接字连接之前检查它是否存在。因此，只有在以前不存在连接时才创建连接。

service.ts

// Setup the socket namespace subscription
if (!this.UserSocket) {
    // Initialize user permissions socket
    this.UserSocket = io(NTC_API_URL + `/user/${this.LocalUser.userID}`, { secure: true });
}

【讨论】：