I wrote what I thought was a relatively simple websocket app for a home project, and it mostly works, but if I leave the page idle for too long (a few days, multiple sleep/wake cycles of the computer) it starts to consume 100% CPU and large amounts of memory (I’ve seen as much as 11GB). Is there something I’m doing obviously wrong, or how should I go about debugging this?
<html>
<head>
<title>Websocket Test</title>
<script>
var SOCKET = null;
function startSocket() {
SOCKET = new WebSocket('wss://[REDACTED]');
SOCKET.addEventListener('open', function(event) {
document.getElementById('disconnected-overlay').style.display = 'none';
});
SOCKET.addEventListener('close', function(event) {
console.log("websocket closed: " + event.code + " (" + event.reason + ")");
document.getElementById('disconnected-overlay').style.display = 'block';
setTimeout(startSocket, 5000);
});
SOCKET.addEventListener('error', function(event) {
console.log("websocket error: " + event);
document.getElementById('disconnected-overlay').style.display = 'block';
setTimeout(startSocket, 5000);
});
}
function mainSetup() {
startSocket();
}
setInterval(function() {
console.log("4 minutes");
if (SOCKET.readyState === WebSocket.OPEN){
SOCKET.send(JSON.stringify({
"user_name": "debugging",
"change": { "AddMinutes": 0 },
}));
} else {
console.log("socket was not open");
}
}, 240000);
</script>
</head>
<body onload="mainSetup()">
<div id="disconnected-overlay">Disconnected</div>
</body>
</html>
I’m currently using Firefox 111.0.1. I haven’t tested it on chrome/ium yet but I might try that soon. My best guess is the timeouts or callbacks from the setInterval are somehow accumulating while the page is idle and then all firing all at once, but I couldn’t find any documentation of that as expected behavior.