Dotaz: Javascript - opakované načteni v HTML

[plysak1904]

Zdravím a prosím o radu. Jak mám v HTML opakovaně načítat externí javascript jen tehdy, když se jeho obsah změní? Zatím to mám tak, že s pravidelným intervalem načítám znovu celou stránku.

Na RPi mi běží v pythonu cyklus, který po minutě načítá čidla a spouští přes relé zařízení. A stav systému píše do javascriptů, které se načítají v HTML a zobrazují stav na webové stránce.

Přes form a PHP scripty potom z webu dávám pokyny pro řízení systému zpět do pythonu.

Aby byl web aktuální, musí se rovněž načítat s krátkým intervalem. To ale nechci. Zatím jsem vždy našel jen přepsání celé stránky.

Děkuji předem za tipy, kde hledat řešení.

---

---

Odpovědi

[panika]

chces proste SPA / dynamickej web, jestli tomu dobre rozumim. Ja pouzivam ze strany pythonu Flask (udelas si REST api) a z js strany Vue. Php k tomu podle me vubec nepotrebujes.
urcite jsou v obou jazycich i progresivnejsi technologie, ale ty nemam vozkouseny.

[z_sk]

O websocket si nepocul?

[plysak1904]

Příloha:

• IMG-20200929-WA0002[1439].jpg (154197 bytů)

Oběma (panika i debian+) děkuji za odpověď. Ale nepředeslal jsem, že jsem lama a hraju si s HTML, Javascriptem a PHP teprve asi 3 týdny a následující řešení jsem si vymyslel sám. Jen mne svojí funkčností neuspokojuje. Takže určitě Flask a Vue.js i websocket budou asi řešení, ale Vaše odpovědi jsou na mne trošku hrr a zatím se s tím moc neumím vypořádat. Když to zjednoduším - když na RPi v pythonu mám pro funkci termostat nastavenou teplotu v pokoji na 22st.C, tak to dám do souboru topeni.js, kterej mi to vypíše na HTML stránce. Na stejné stránce zmačknu (Přidat +1st.C) a script prikazy.php mi do souboru přikazy.txt zapíše "T+". To si python v dalším cyklu přečte a nastaví proměnnou t_set na 23. A znovu to dá do topeni.js a tak dokola. Ale mám tam toho víc. Mám třeba rezim_topeni, který může být "Den", "Noc", "Automaticky", "Manuálně" atd... Takže i víc těch javascriptů. Zkusím nastudovat websocket, Flask i Vue.js, ale dá se jednoduše vysvětlit, jak se to s nimi dělá jinak? Možná to potřebuji víc polopatě...Dík.

[panika]

polopate si ted vlastne povidas pres soubory. (ekvivalent mrtve schranky)

to co ti tu radime je povidat si primo. (ty websockety na to mas urcite lepsi jak REST, kterej jsem zminoval protoze znas formulare)

tak to dám do souboru topeni.js

ta sama funkce co ti vypise do souboru to muze vypsat na pozadani do websocketu https://websockets.readthedocs.io/en/stable/intro.html https://www.tutorialspoint.com/html5/html5_websocket.htm

Na stejné stránce zmačknu (Přidat +1st.C) a script prikazy.php mi do souboru přikazy.txt zapíše "T+".

no a abys nemusel obnovavat stranku, tak tu interakci musis delat v js, ja pouzivam Vue, ale moznosti je vic https://tutorialedge.net/javascript/vuejs/vuejs-websocket-tutorial/

ty navody jsem podrobne necetl ale neprisly mi zly na prvni pohled, ja bych to udelal tak ze bych celej tenhle problem rozdelil na casti, z tech vzdycky udelal minimalni priklad a nabaloval to, az by mi to cely nejak chodilo tak bych to slepil a pripadne potom vylepsil.

[plysak1904]

Děkuju. Už jsem zjistil, že websockets by asi bylo řešení a dík za ty odkazy, kouknu se na to.

[MadCatX]

Nebylo by chytřejší psát senzorová data do nějakých JSONů a ty si pak na klientovi vyžádat JSkem? Generovat celý skript jen proto, že se změnila data je podle mě zbytečné a vede to přesně na takto nešikovná řešení.

[plysak1904]

Děkuju za reakci, ale viz můj předchozí příspěvek - sice jsem už o JSON souborech taky slyšel, ale vůbec nevím, o co jde. Vidím, že těch možností, jak to řešit asi bude i víc, než jste mi tu naznačili. Ale zatím si z toho neumím vybrat. Není to nic, na čem by závisely životy (snad jedině kytek, aby neuschly) a dělám to jako hobby, protože jsem od syna dostal Raspberry Pi. Kdysi jsem snad něco programoval ještě na starém HP9825 a pak v době před-Wokenní ve FoxBasi. Ale přeci jen doba trochu pokročila a v 70 se člověk už tak snadno neučí....

[MadCatX]

Pomůže tohle jako ukázka, jak to řešit JSONy?

Kód webu:

<html>
<head></head>

<body>
Data senzorů:<br />
<div id="svetlo_chodba">N/A</div>
<div id="svetlo_kuchyne">N/A</div>
<div id="teplota_kuchyne">N/A</div>

<script type="text/javascript">
function jednotka_na_text(jedn) {
    if (jedn === null)
        return '';
    return ' (' + jedn + ')';
}

async function aktualizuj_senzory() {
fetch(
    "http://localhost:8080/data_senzoru.json"
).then(
    (resp) => {
        if (resp.status !== 200) {
            // VYŘEŠ CHYBU!
            alert("Chyba " + resp.status + "!");
            return;
        }
        resp.json().then(
            (stav_senzoru) => {
                for (const senzor of stav_senzoru) {
                    document.getElementById(senzor.jmeno).innerHTML = senzor.stav + jednotka_na_text(senzor.jednotka);
                }
            }
        )
    }
)
}
</script>

<input type="submit" onClick="aktualizuj_senzory();" value="Aktualizuj" />
</body>
</html>

data_senzoru.json

[
    {
        "jmeno": "svetlo_chodba",
        "jednotka": null,
        "stav": 0
    },
    {
        "jmeno": "svetlo_kuchyne",
        "jednotka": null,
        "stav": 1
    },
    {
        "jmeno": "teplota_kuchyne",
        "jednotka": "°C",
        "stav": 22
    }
]

[plysak1904]

Děkuju, to vypadá zajímavě, zkusím to implementovat. Jen bych ještě rád, abych tu aktualizaci nemusel vyvolávat jako "onClick", ale kdyby to šlo jako "onChange". Dokáže to nějak rozpoznat změnu senzory.json?

Nejde mi jen o ovládání na dálku přes web, ale malý tablet by měl sloužit přímo na místě jako ovládání topení nebo zalévání, takže by měl mít trvale aktuální údaje. Pokud to má třeba používat manželka, tak už nutnost nejdřív aktualizovat data tlačítkem by mohl být problém...

[MadCatX]

Existuje Push API ale to je asi přehnaně komplikované. Jednoduše se dá se ale vyrobit třeba časovač, který ten obsah bude pravidelně obnovovat.

[👻]

zvhledem ktomu že nějaký domácí topení je obecně jakoby celkem pomalej proces aže to nebude ovládat hrozně moc uživatelů najednou tak to opakovaný načtení *.json v nějakým rozumě dlouhým intervalu mi připadá jako dobrý řešení :D ;D

nóó ale pokud bys chtěl mit třeba víc různejch klientů najednou připojenejch k tomu raspberry a chtěl taky aby všecky mohli 'najednou' ovládat tu požadovanou teplotu a bez refreshů stránky/ znovunačítání souboru v pevně danejch intervalech tak bych asi nato vzala ty websockety jak už je zmiňoval debian+. hezkej návod pro python + js tady hele nóó a hodně nejpodobnější příklad k tomu tvýmu problémku tam maj takový počítadlo na kterým muže víc klientů nezávisle nasobě měnit hodnotu hele. pro tvuj problémek je tohleto možná zbytečně moc nóó ale bude dlouuuuůůůůůhhháááááá zima a kdybyses hrozně nudil tak aspoň máš s čim si hrát :D ;D

[👻]

sice jsem už o JSON souborech taky slyšel, ale vůbec nevím, o co jde

hele a hele :D ;D

[👻]

drobná poznámka bokem

pokud chceš trošičku prodloužit životnost sdkarty tak se dá vyrobit takzvanej ramdisk. je to jakoby souborovej systém skovanej přímo v ramce takže se ty data nezapisujou do souborů na sdkartě ale jenom do ramky nóó a je to ideální právě pro různý ty maličký senzorový data :D ;D jak vyrobit ramdsik návod tady hele jen si myslim že 50MB je zbytečně moc velký nastav si nějakou rozumnější hodnotu :O ;D

[plysak1904]

Moc děkuji za radu, ale ramdisk používám už déle. Možná to nakonec budu řešit přes json, ale teď mne zaujal způsob s websockets. Každopádně je fajn, že jsou lidi ochotní poradit, i když jde jen o takovéto "hraní si"... Dík

[OldFrog {Ondra Nemecek}]

Aktualizace hodnot z data/teplota.txt:

<!DOCTYPE html>
<html lang="cs">
	<head>
		<meta charset="utf-8">
		<title>Teplota</title>
		<script src="http://code.jquery.com/jquery-latest.js">
		<script type="text/javascript">
			$(document).ready(function(){
				var f = function(){
					console.log('Aktualizuji teplotu...');
					$("#teplota").load('/data/teplota.txt');
				};
				setInterval(f, 1000); 
			});
		</script>
	</head>
	<body>
		<div class="wrapper">
		<h1>Teplota</h1>
		<div>Teplota je: <span id="teplota"></span></div>
		</div>
	</body>
</html>

[plysak1904]

Děkuju. Jsem teď mimo a nemohu s tím nic dělat, ale až se vrátím, tak to vyzkouším.

[plysak1904]

K tomu RPi, co mám na chalupě, nemám momentálně přístup. Ale zkusil jsem si na NB uložit to HTML od Tebe, jen pro vyzkoušení toho skriptu jquery-latest.js, ale asi dělám něco blbě. Ve stejným adresáři jako HTML jsem vytvořil podložku /data/ a v ní soubor teplota.txt, kam jsem zapsal číslo 25 (Je doufám jedno, zda to číslo tam napíše nějakej běžící skript, nebo já přes klávesnici). Předpokládám, že funkce

$(document).ready(function(){ var f = function(){ console.log('Aktualizuji teplotu...'); $("#teplota").load('/data/teplota.txt'); };

dokáže rozpoznat čitelnost souboru, a měla by se sekundovým intervalem teplotu z toho souboru načítat. Ale něco je asi blbě, neděje se nic.

[Peter Golis]

V tom prípade by som odporučil niečo pre inšpiráciu.

[👻]

Ale něco je asi blbě, neděje se nic.

předpokládám že to jakoby zablokovaný kuli conten security policy hele nóó a to by bylo uplně v pořádku :O ;D zmáčkni v prohlížeči f12 a koukni jestli ti to něco piše do webový konzole :O ;D

 

asi tě bude zajímat jak jako to zabezpečení pro vývoj trošičku vobejít. chrome/chromium de pustit s vypnutým zabezpečením noa tam by ti to mohlo fungovat snad :O :O

vyrob si nějakou složku pro dočasnej uživatelskej profil a pak chromium pust takle nějak

chromium --user-data-dir='cesta/k/docasne/slozce' --disable-web-security /nejaka/cesta/k/souboru/index.html

mi to takle pustit de :D ;D pro firefox ale na něco podobnýho bude potřeba nějakej doplněk aby šlo tu content policy deaktivovat :O :O

[👻]

sem zapoměla říct to důležitý :D tyhlety problémy s csp to má předevšim proto žeto jakoby neběží na serveru ale z nějakýho uživatelskýho adresáře. kdybys to strčil na server tak todleto zlobení přestane :O ;D

další řešení je si třeba na vývoj udělat nějakou virtuálku třeba ve virtualboxu hele a tam mit server na zkoušení :D ;D

[OldFrog {Ondra Nemecek}]

Ano, musí to být na serveru - na hostingu nebo si lze spustit lokální server. Nejsnáze to jde po nainstalovaání PHP zadáním tohoto příkazu v adresáři s index.html souborem:

php -S localhost:8080

Pak stačí otevřít odkaz

http://localhost:8080/

[OldFrog {Ondra Nemecek}]

https://uloz.to/file/tZWVzMJoCOO2/test-zip

[👻]

šestej řádek je potřeba přepsat takle

<script src='https://code.jquery.com/jquery-latest.js'></script>

[OldFrog {Ondra Nemecek}]

Ano.