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