Отправка XMLHttpRequests периодически вызывает непредвиденные ответы и приводит к путанице веб-страницы в Arduino

Question

Так что в основном я работаю над небольшим проектом с использованием Arduino, где ESP32 выступает в качестве веб-сервера. Я начинающий веб-разработчик, поэтому извините за невежество, когда я читаю описание проблемы ниже:

Идея состоит в том, что на одной из веб-страниц "dashboards.html" отображается значок сигнала Wi-Fi, который периодически обновляется каждые 500 мс (я знаю, что это излишне малый период, но это не имеет отношения к моей проблеме), и он показывает сигнал сила между ESP32 и маршрутизатором. Ниже приведен фрагмент кода javascript с веб-страницы «dashboards.html», который запрашивает сигнал Wi-Fi для обновления значка на его основе:

setInterval(function() {
  getData();
}, 500);

function getData() {
   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200) {
        var receivedString = this.responseText;
        var signal = parseInt(receivedString);

        //update wifi signal image based on signal strength
        var wifiImage = document.getElementById("wifi_img");


        if(signal < -55){
            wifiImage.src="signal_wifi_2.png"
        }else{
            wifiImage.src="signal_wifi_3.png"
        }


    }
  };
  xhttp.open("GET", "updatewifisignal", true);
  xhttp.send();


}

Связь между сигналом и изображением, очевидно, далека от точной, но это только для того, чтобы протестировать код, который отлично работает. Теперь вот код на стороне сервера, который получает запрос и отправляет сигнал Wi-Fi:

if (strcmp(file_name, "updatewifisignal") == 0) {

            int rssi = WiFi.RSSI();

            Serial.println(rssi);

            client->println(rssi);

} 

где "имя_файла" - это имя запрошенного ресурса в запросе GET, отправленном клиентом.

До этого момента все работало гладко, и сигнал обновлялся каждые полсекунды. Однако, если мне случится запросить другую веб-страницу, используя гиперссылку в «dashboards.html» сразу после того, как был отправлен запрос на обновление значка wifi, то есть большая вероятность того, что браузер отобразит недавно запрошенную веб-страницу в беспорядке.

Я пытался решить эту проблему безуспешно уже 3 дня подряд. Вы, вероятно, можете выяснить причину, по которой это происходит так же, как и я, но вот что вызывает это последовательно:

• сервер получает запрос на сигнал wifi
• сервер отправляет сигнал Wi-Fi
• как раз вовремя, клиент отправляет запрос на новую веб-страницу
• клиент получает сигнал Wi-Fi вместо
• сервер получает запрос на новую веб-страницу
• сервер отправляет новую веб-страницу
• клиент отображает странно выглядящую веб-страницу

поэтому мой мыслительный процесс пошел так:

• Как я могу попросить клиента отменить ранее отправленный запрос, когда он делает запрос на новую веб-страницу?

  Я подумал, что не могу этого сделать, потому что после отправки запроса вы ничего не можете с этим поделать.

• Хорошо, поэтому мне нужно указать серверу отбросить запрос на обновление сигнала, как только он получит запрос веб-страницы.

  Но сервер получает эти запросы по порядку. Как он может знать, что при поступлении запроса на обновление сигнала ожидается предстоящий запрос веб-страницы? Нету.

• Поэтому установите таймер, если сервер получает запрос на обновление сигнала и запрос веб-страницы в течение очень короткого периода времени, отбросьте первый.

  Сервер может отправлять сигнал Wi-Fi прямо по истечении таймера, а клиент запрашивает веб-страницу. Так что это возвращает нас к самому началу.

Может быть, есть другие виды запросов, о которых я не знаю, может быть, это просто очень старая реализация. Буду признателен за любую помощь, которую вы можете предложить.

Спасибо!