在构造函数中初始化后未定义角度套接字

Question

我正在尝试在前端上设置实时套接字服务。我在构造函数中定义套接字，并具有使用它的方法。然后，将这些方法预订到将服务注入到的另一个组件中。首次加载使用此服务的组件时，一切正常。

但是，当我刷新组件时，控制台显示2条Cannot read property 'on' of undefined错误消息和来自构造函数的Socket connection is ready.消息，但功能中断。这可能是因为在服务中的构造函数创建套接字之前，方法已被预订？

此外，在不刷新的情况下，当我转到另一个组件并返回时，我没有收到任何错误消息，但是无论如何功能都会中断。

  private socket;
  private URL = environment.backendUrl;

  constructor(private userService: UserService) {
    this.userService.getAccessToken().then(token => {
      this.socket = io(this.URL, {
        query: { token }
      });
      this.socket.on('ready', () => {
        console.log('Socket connection is ready.');
      });
    });
  }

  emitMethod1() {
    this.socket.emit('emitMethod1', stuff);
  }

  getEvent2() {
    const observable = new Observable(observer => {
      try {
        this.socket.on('event2', stuff => {
          observer.next(stuff);
        });
      } catch (err) {
        console.error(err);
      }
      return () => {
        this.socket.disconnect();
      };
    });

    return observable;
  }

  getEvent3() {
    const observable = new Observable(observer => {
      try {
        this.socket.on('event3', stuff => {
          observer.next(stuff);
        });
      } catch (err) {
        console.error(err);
      }
      return () => {
        this.socket.disconnect();
      };
    });

    return observable;
  }