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

Question

我正在尝试创建一个使用 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 监听器，它有效，但我不确定副作用并且已经阅读了几个地方不一定是不关闭连接的修复，我可以理解。

Answer 1

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

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

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

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 });
}