Reactjs Websocket connection is not stable - reactjs

Question

I'm new to Reactjs. I have a code written in Reactjs. The code below is to get a response from server by using Websocket. Every 10 secs, under the componentDidUpdate it will run the retrieveServerData to get the latest information.
I have 3 enquiries that I need to send to server, for each enquiry i will open a new socket inside ws.onmessage() . This works well, data can be retrieved correctly with no any connection error.
class Subject extends React.Component {
componentDidUpdate = (prevProps, prevState) => {
setTimeout(() => {
this.setState({
//set some state
}, () => {
this.interval = setInterval(() => this.retrieveServerData(), 5000);
});
}, 10000);
}
retrieveServerData = () => {
let statusEn = "enabled";
let enquiry = ["data1", "data2", "data3"];
for (let i = 0; i < 2; i++) {
let dataMethod = {
Name: "AAA",
Subject: "Math",
Day: "Thursday",
Parameters: { Data: enquiry[0] }
};
let ws = new WebSocket("ws://localhost:XXX");
let dataMethodInString = JSON.stringify(dataMethod);
ws.onopen = () => {
ws.send(dataMethodInString);
};
ws.onmessage = (event) => {
if (event.data !== "Socket server connected") {
if (!event.data.includes("Error")) {
let myArray = ProcessElement(event.data);
console.log("myArray 0: ", commands[0], myArray);
//2nd
let ws = new WebSocket("ws://localhost:XXX");
let dataMethodCopy = JSON.parse(JSON.stringify(dataMethod));
dataMethodCopy["Parameters"] = { Data: commands[1] };
let dataMethodInString = JSON.stringify(dataMethodCopy);
ws.onopen = () => {
ws.send(dataMethodInString);
};
ws.onmessage = (event) => {
if (event.data !== "Socket server connected") {
if (event.data.includes("Error") === false) {
let myArray = ProcessElement(event.data);
console.log("myArray 1: ", myArray);
let ws = new WebSocket("ws://localhost:XXX");
let dataMethodCopy = JSON.parse(JSON.stringify(dataMethod));
dataMethodCopy["Parameters"] = { Data: commands[2] };
let dataMethodInString = JSON.stringify(dataMethodCopy);
ws.onopen = function () {
ws.send(dataMethodInString);
};
ws.onmessage = (event) => {
if (event.data !== "Socket server connected") {
if (event.data.includes("Error") === false) {
let myArray = ProcessElement(event.data);
console.log("myArray 2: ", myArray);
} else {
console.log("myArray 2 error ");
}
ws.close(1000, "request 2 fetch completed");
}
};
} else {
console.log("myArray 1 error ");
}
ws.close(1000, "request 1 fetch completed");
}
};
} else {
console.log("myArray 0 error ");
}
ws.close(1000, "request 0 fetch completed");
}
};
}
};
}
I tried to simplify the code above, instead of opening 1 connection for each enquiry, I want to have 1 connection and send 3 enquiries.
retrieveServerData = () => {
let statusEn = "enabled";
let commands = ["data1", "data2", "data3"];
for (let i = 0; i < 2; i++) {
let commandResponse = [];
const getDataMethod = (command) => {
return JSON.stringify({
Name: "AAA",
Subject: "Math",
Day: "Thursday",
Parameters: { Data: command }
});
};
let ws = new WebSocket("ws://localhost:XXX");
ws.onopen = () => {
commands.forEach((command) => {
setTimeout(() => {
ws.send(getDataMethod(command));
}, 500);
});
};
ws.onmessage = (event) => {
if (event.data !== "Socket server connected") {
if (!event.data.includes("Error")) {
let myArray = ProcessElement(event.data);
console.log(myArray);
if (myArray.length > 0) commandResponse.push(myArray);
if (commandResponse.length === commands.length) {
console.log(commandResponse);
}
}
}
};
ws.onerror = (e) => {
console.log(`${i}: `, e);
};
}
};
Data can be retrieved, but I will get some error connections in between (err connection is refused / err connection is reset).
WebSocket is already in CLOSING or CLOSED state.
failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
failed: Error during WebSocket handshake: net::ERR_CONNECTION_RESET
Can i get some direction on how to fix it? Thank you