socket.io socket.connected always returning false

I'm having this issue with socket.io connection. I need to get the socket.connected attribute that is inside socket.io instance. If I console.log the object it shows the "connected" as true, but when I use the variable it returns always false. Here's is the code:

My socketConnection object with singleton pattern

const socketConnection = {
  _instance: null,
  _isConnected: false,
  _interval: null,
  get getInstance() {
    if (!this._instance) {
      this._instance = io.connect(`/${sms.link}`, {
        reconnection: false
      });

      this._instance.on("connect", () => {
        this._isConnected = true;
      });

      this._instance.on("disconnect", () => {
        this._isConnected = false;
        this._interval = window.setInterval(() => {
          if (this._isConnected) {
            clearInterval(this._interval);
            this._interval = null;
            return;
          }
          socketConnection.getInstance;
        }, 5000);
      });
    }
    return this._instance;
  }
};

The function which I call the socketConnection object

function openSocketCommunication() {
  const socket = socketConnection.getInstance;
  if(socket && socket.connected) {
    notification.show("{% trans 'Chat connection established' %}", "success");
    socket.on("incomingMessage", (message) => {
      createMessage(message);
      removeTypingEffect();
      goToBottom();
    });

    socket.on("incomingTyping", () => {
      if (!typingDots) {
        createTypingDots();
      }
      if (!typing) {
        typing = true;
        addTypingEffect();
      }
      clearTimeout(typingTimeout);
      typingTimeout = setTimeout(clearTyping, 2000);
    });
  } else {
    notification.show("{% trans 'Coudn\'t establish chat connection. Try to reload the page' %}", "error");
    typingForm.style.display = 'none';
  }
}

The weird thing is that if I set a 1sec timeout I can see the right value

setTimeout(() => {
    console.log(socket.connected,socket.id)
  }, 1000);

I tried to pack inside a async/await and promise/resolve strategy but still it didn't work. Any thoughts?

The problem is that the socket.io has not connected to the server the first time you run if(socket && socket.connected). So you need to add a listener on 'connect' inside openSocketCommunication, that will react when you actually get the connection up and running.

Something like this:

function openSocketCommunication() {
  const socket = socketConnection.getInstance;
  if(socket) {
    socket.on("connect", () => {
        // Run all code that should run each time you get a reconnect        
        notification.show("{% trans 'Chat connection established' %}", "success");

        // You might need a flag to avoid adding multiple listeners for incomingMessage
        socket.on("incomingMessage", (message) => {
          createMessage(message);
          removeTypingEffect();
          goToBottom();
        });
    
        // You might need a flag to avoid adding multiple listeners for incomingTyping
        socket.on("incomingTyping", () => {
          if (!typingDots) {
            createTypingDots();
          }
          if (!typing) {
            typing = true;
            addTypingEffect();
          }
          clearTimeout(typingTimeout);
          typingTimeout = setTimeout(clearTyping, 2000);
        });
      });
  } else {
    notification.show("{% trans 'Coudn\'t establish chat connection. Try to reload the page' %}", "error");
    typingForm.style.display = 'none';
  }
}