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套接字连接的创建，实施策略要容易得多。

对于初学者，我不得不在服务器端重构一些事情，以确保特定的命名空间只被初始化一次。通过确保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 });
}

如何关闭Angular 2/4 +和Socket.io中的websocket

1 个答案: