Question

当前使用Angular，socket.io和express创建一个应用程序。但是，我遇到了一个异步问题，很难解决。这是代码：

  export class WebsocketService {

  this.socket;

  public connect() {
    const token = sessionStorage.getItem('token');
    this.socket = io('http://localhost:3000', { query: { token: token } });
  }

  public getSocket () {

      // this function should only return this.socket when it is available

      return this.socket;

  }

这个想法是，首先在应用程序中某个位置与Websocket连接一次，因此io函数被调用一次：

    this.socket = io('http://localhost:3000', { query: { token: token } });

然后在应用程序的其余部分，应传递this.socket属性。但是，this.socket应该始终返回对象，如果不存在则应等待。

该实现还应该处理应用程序的其他部分，这些部分尝试调用getSocket并返回未定义的返回值。基本上，getSocket绝不应该返回未定义的状态，它应该等待连接然后返回this.socket。

我尝试了一些许诺，但似乎找不到一个好的解决方案。

Answer 1

我不知道您为什么需要connect方法，但这是一种方法

export class WebsocketService {

  getSocket() {

    // this function should only return this.socket when it is available

    if (!this.socket || (this.socket && this.socket.disconnected)) {

      this.socket = new Promise((resolve, reject) => {

        const token = sessionStorage.getItem('token');
        const s = io('http://localhost:3000', { query: { token: token } });

        s.on('connect', () => {
          console.log(socket.connected); // true
          resolve(s);
        });

        s.on('disconnect', () => {
          console.log(socket.disconnect); // true
          reject(s);
        });
      });
    }

    return this.socket;
  }
}

然后，用法是：

service.getSocket().then(socket => {
    // Use the socket
});

或使用async / await：

const socket = await service.getSocket();
// Use the socket

Answer 2

export class WebsocketService {
    this.socket = io('http://localhost:3000', { query: { token: token }})
    public getSocket () {
        return new Promise((res) => {
           while (!this.socket.connected) {}
           res(this.socket)
        })
    }
}

然后致电：service.getSocket().then((socket) => {})

仅在连接时给您插座。假设套接字将能够重新连接，但是如果永远无法重新连接，则可能会出现一些错误。

Javascript，异步问题所需的解决方案

2 个答案: