Est-il possible de lire et d'afficher le contenu d'un fichier txt toutes les quelques secondes en utilisant HTML ?

Question

J'ai un fichier txt qui est mis à jour avec de nouvelles données toutes les quelques secondes. Il est stocké et généré sur le Raspberry Pi, qui fera également office de serveur.

Je souhaite ajouter son contenu au code html pour l'afficher.

Il devrait être mis à jour sans recharger manuellement la page.

Y a-t-il un moyen de faire cela ? Peut-être utiliser AJAX, PHP ou quelque chose de similaire ?

Pas besoin de trouver/écrire du code pour moi car je sais que cela peut prendre beaucoup de temps. Indiquez-moi simplement la bonne direction pour que je puisse apprendre comment le faire.

Answer 1

Vous pouvez utiliser jQuery，$.ajax，$.post或$.get

Ou vous pouvez également utiliser XMLHttpRequest pour la programmation JavaScript (ancienne mais classique)

Pour PHP, vous pouvez utiliser readFile (Aucune API requise côté serveur)

Une petite histoire pourrait aider

Une fois, j'ai utilisé Arduino avec le module WiFi

J'utilise Arduino pour collecter des données, puis je transmets les données à l'esp8266 (module WiFi) et j'utilise GET方法发布到我的网站上，像这样：http://mySite.lo/?firstVar=myFirstVar&secondVar=mySecondVar，服务器从URL中获取GETdata

Mise à jour :

Actualisation de la page

Pour PHP, vous pouvez utiliser header("refresh: 3;")

Pour JavaScript, vous pouvez utiliser setInterval(location.reload(),3000)

Answer 2

Vous pouvez le faire en utilisant des points de terminaison API et des appels ajax côté client. J'ai rédigé un code pour vous. J'ai défini l'URL du point de terminaison sur /url/to/api.php - vous devrez modifier cette URL en fonction des paramètres de votre serveur sur le Raspberry Pi.

Vous devrez également héberger un fichier HTML contenant du code JavaScript qui interroge votre API toutes les quelques secondes. Je l'ai configuré pour qu'il s'exécute toutes les 5 secondes, en utilisant setInterval.

<script>
// 客户端代码（JavaScript）- 应该放在</body>标签之前
(async () => {
    setInterval(async () => {
        const data = await fetch("/url/to/api.php").then(response => response.text());
        document.getElementById("#htmlElementWithThisId").innerHTML(data);
    }, 5000);
})()
</script>

// 在HTML中，您必须有一个具有id为"htmlElementWithThisId"的元素 - 这是内容将显示的位置

<div id="htmlElementWithThisId"></div>

Enfin, dans votre fichier api.php, vous lirez votre fichier et « ferez écho » au contenu du fichier à chaque requête.