Мне было трудно найти подходящее название для этого вопроса, надеюсь, это сработает ..
С помощью базы данных Firebase в реальном времени и некоторого кода Arduino я отображаю уровни влажности почвы в моем горшке. Веб-сайт. Однако, когда данные Firebase обновляются (каждые 0,3 секунды), вместо того, чтобы обновлять одно значение на веб-сайте, он добавляет новую строку / печатает каждое обновление. Через некоторое время мой веб-сайт теперь выглядит так: Moisture: 661Moisture: 658Moisture: 660Moisture: 658Moisture: 657, и он продолжает добавлять Moisture: xxx после него с каждым обновлением. Я хочу, чтобы это отображалось один раз, и pu sh, чтобы данные обновляли первое значение, а не добавляли новое. Я оставлю свой код ниже, хотелось бы несколько советов о том, как go в этом. Вроде трудно найти что-то об этом в inte rnet, так как я не уверен, что я ищу (новичок в JS). Заранее спасибо!
Код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles.css">
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-messaging.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "xx",
authDomain: "xx",
databaseURL: "xx",
projectId: "xx",
storageBucket: "xx",
messagingSenderId: "xx",
appId: "xx"
};
firebase.initializeApp(config);
</script>
<script>
var database = firebase.database();
var ref = firebase.database().ref("plant-patrol/Moisture");
ref.once("value")
.then(function(snapshot) {
var key = snapshot.key; // "plant-patrol"
var childKey = snapshot.child().key; // "Moisture"
});
</script>
<script>
var ref = firebase.database().ref();
ref.on("value", function(snapshot) {
console.log(snapshot.val());
var snapshotJSON = JSON.stringify(snapshot.val());
var moisture = snapshotJSON;
moisture = moisture.replace(/[{""}]/g, '');
moisture = moisture.replace(/[:]/g, ': ');
document.write(moisture);
}, function (error) {
console.log("Error: " + error.code);
});
</script>
<script src="/script.js" defer></script>
</head>
</html>