ESP32をスマホからWiFi接続した際に、1回のアクセスでブラウザ上に同じデータが5個同時に表示されてしまう

前提・実現したいこと

ESP32をサーバーとして起動し、スマホからWiFi接続した際に、ブラウザ上でESP32のセンシングデータをグラフおよび数値（テーブル表示）として確認できるプログラムを作成しました。PCからブラウザを立ち上げた際は、グラフもテーブルも問題なく表示できるのですが（センシング間隔が約5秒に1点なので、ブラウザ上の表示間隔も5秒間隔になっています、添付イメージ図の左図参照）、スマホからブラウザを立ち上げて確認すると、テーブル表示で同じ数値データが５個まとめて表示されてしまいます。（添付イメージ図の右図を参照）
スマホにおけるこの事象をプログラムで修正することはできるでしょうか？それとも端末固有の問題などありますでしょうか？ご教示いただけましたら幸いです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード(ESP32コンパイル用)

※WiFiに関する部分のみ記載

#include <WiFi.h>
#include <WiFiClient.h>
#include <ESP32WebServer.h>
#include <FS.h>
#include <SPIFFS.h>

void setup() {
  SPIFFS.begin();
  WiFi.mode(WIFI_AP);
  WiFi.softAP(ssid, pass);
  Serial.print("network: "); Serial.println(ssid);
  Serial.print("address: "); Serial.println(WiFi.softAPIP());
  delay(50);
  Server.on("/readADC", handleADC); //This page is called by java Script AJAX
  Server.onNotFound(handleNotFound);  //  ファイルアクセス時の応答関数を設定
  Server.begin();                     //  ウェブサーバ開始
  }

void loop() {
  Server.handleClient();
}
  
void  handleADC() {
String data = "{\"Temp\":\"" + String(temp, 1) + "\",\"Kasoku1\":\"" + String(kasokudo1, 1) + "\",\""Kasoku2\":\"" + String(kasoku2, 1) + "\"}";
Server.send(200, "text/plane", data); //Send ADC value only to client ajax request

該当のソースコード(HTML)

※WiFiに関する部分のみ記載

<!DOCTYPE html>
<html lang="ja">

<head>

</head>
<body>

<script>
//グラフ＆![イメージ説明](37e61cd482e7ae70a2f98b6ec14ebd2c.png)テーブル表示に関するコード


//On Page load show graphs
window.onload = function() {
	console.log(new Date().toLocaleTimeString());
	showGraph(5,10,4,58);
};

//Ajax script to get ADC voltage at every 5 Seconds
//Read This tutorial https://circuits4you.com/2018/02/04/esp8266-ajax-update-part-of-web-page-without-refreshing/

setInterval(function() {
  // Call a function repetatively with 5 Second interval
  getData();
}, 1000); //5000mSeconds update rate

function getData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     //Push the data in array
    var time = new Date().toLocaleTimeString();

    //var ADCValue = this.responseText;
    var txt = this.responseText;
    var obj = JSON.parse(txt);

      timeStamp.push(time);
      Temp.push(obj.Temp);
      Temp.push(obj.Kasokudo1);
      Temp.push(obj.Kasokudo2);
      showGraph();	//Update Graphs
      //Update Data Table
      var table = document.getElementById("dataTable");
      var row = table.insertRow(1);	//Add after headings
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);
      var cell4 = row.insertCell(3);

      cell1.innerHTML = time;
      cell2.innerHTML = obj.Temp;
      cell3.innerHTML = obj.Kasokudo1;
      cell4.innerHTML = obj.Kasokudo2;
      
    }
  };
  xhttp.open("GET", "readADC", true);	//Handle readADC server on ESP8266
  xhttp.send();
}
</script>
</body>
</html>

試したこと

HTMLコードの下記の部分で、1000としているところを4500などとして、センシング間隔に近い値を入れて試してみましたが、意図する表示とはなりませんでした。

setInterval(function() {
// Call a function repetatively with 5 Second interval
getData();
}, 1000); //5000mSeconds update rate

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

tmp

2021/04/22 03:43

１回のアクセスで５個できるってことですよね？？症状から、 >>if (this.readyState == 4 && this.status == 200) { などのthisをxhttpに置き換えてみては、どうでしょうか？

Uka

2021/04/22 04:20

tmpさん、ご回答ありがとうございます。おっしゃるように、1回のアクセスで同じデータが5個表示されてしまいます。アドバイスいただきましたように、thisからxhttpに置き換えて試してみましたが、現象は変わりませんでした。

行動規範の内容に同意します

回答1件

onreadystatechange は呼んで字のごとく XMLHttpRequest の状態が変化するたびに呼ばれます。
XMLHttpRequest.onreadystatechange - Web API | MDN
そのせいで複数回セルが追加されたりしているものと思われます。XMLHttpRequest は使いにくいので fetch を使って見ると良いでしょう。
Fetch の使用 - Web API | MDN

投稿2021/04/30 02:39