PHP: Ha a fájl tartalma frissül, frissítse az oldal tömb adatait

PHP: Ha a fájl tartalma frissül, frissítse az oldal tömb adatait
2022-04-15T15:03:46+02:00
2022-05-01T19:12:48+02:00
2022-10-15T21:21:07+02:00
NorbertSr
Adott egy szoftver, mely különböző időpontokban frissít egy data.txt fájl tartalmát (ez egy rádió, tehát adott hangfájl terjedelmétől függ, tehát változó idő).
A data.txt fájlban összesen 6 információ van adott karakterrel elválasztva (ez nekem egy tömb lesz).
A php fájlomban megnyitom olvasásra, feltöltöm a tömböt stb.
Jelenleg
$data_cell[0]
-tól
$data_cell[5]
-ig.
Ezen adatokat pedig ugyan ezen php fájlomban a html body részében egy táblában formázva megjelenítem.
Eddig sajnos csak statikusan működik, azaz eddig jutottam, hogy most kéne az a lépés, hogy a "háttérben" mondjuk 5 másodpercenként ellenőrizné egy script, hogy van e valami változás a data.txt-be, s ha van, csak akkor írja felül a megjelenítendő megváltozott tartalmat a táblába, lehetőleg a teljes oldal újratöltése nélkül.
Lényegében a legprecízebb megoldás az lenne, ha csak azon adatokat töltené újra és jelenítené meg, ami megváltozott.
Bocsánat a szakmaiatlan fogalmazásért, de erősen az is vagyok...
Olvastam, hogy egy ajax script ezt képes megoldani, de én nem tanultam.
Nekem ez pl egy szimpla script, de ez csupán a teljes oldalt újra tölti és fix időpontokban:

<script> var counter = 5; // VISSZASZÁMLÁLÓ var count_down = window.setInterval(function () { counter--; if (counter >= 0) { var span; span = document.getElementById("display_counter"); span.innerHTML = counter; } if (counter === 0) { clearInterval(counter); } }, 500); var page_refress = window.setInterval('refresh()', 5000); // AZ OLDAL FRISSÍTÉSE, ÚJRATÖLTÉSE function refresh() { window.location.reload() ;} function stopFunction() { clearInterval(count_down); clearInterval(page_refress); } </script>
Mutasd a teljes hozzászólást!
Egy kicsit beújítottam a projektemet. Mostantól még egyszerűbb a kliens elkészítése.
A headerben csak hivatkozni kell egy script tag-el a szerveren található plugin.js-re (Azaz a szerver egyfajta kliensoldali js cdn-ként is funkcionál)
plédául

vagy 

(Természetesen a saját szervered esetén ezt ki kell cserélni a te domainedre vagy IP címedre)

A html body részébe csak egy üres div kell.

<div id="nowplayed"></div>
Majd a záró body tag előtt egy script tagben meghívni ezt

getPlugin('nowplayed', 'SOCKET CLIENT')
vagy 

getPlugin('nowplayed', 'SOCKET CLIENT')
(A szerver cím itt is kicserélendő)

Itt van néhány példa a 

(Először indítsd el a szevert, különben a kliensek nem fognak működni)

Client Codepen példa: https://codepen.io/bzozoo/full/eYVOzbe

Client JSFIDDLE példa: GET NOW PLAYED CARD FROM PLUGIN - CODESANDBOX SERVER - JSFiddle - Code Playground


CONFIG.INI fájlba raktam a szerver fontos beállításait. 

SOCKET-SERVER-CLIENT-DEMO/config.ini at main · bzozoo/SOCKET-SERVER-CLIENT-DEMO

GitHub - bzozoo/SOCKET-SERVER-CLIENT-DEMO: A fictional radio gives you currently playing music Demo
Mutasd a teljes hozzászólást!

  • Konkrét megvalósítást nem tudok adni, csak tippet adhatok, merre keress:
    Ha jól értelek, a feladat annyi, hogy egy egy-két felhasználót kiszolgáló szerverről áttölteni pár bájtnyi információt és ezt megjeleníteni egy lapon úgy hogy nem töltődik újra az oldal.

    Első menetben én azt csinálnám, hogy szerver oldalon kiraknék egy szkriptet, ami beolvassa azt az egy sort és visszaadja a tartalmát mondjuk json formában (ez ha jól értem, már megvan). Itt nincs dolgod időzítéssel, egyebekkel, feltételezem, nem realtime kell a frissítés, pár másodperc csúszás belefér.

    Kliens oldalon meg ajax (ez nálam az XMLHttpRequest használatát jelentené, nem vagyok JS guru) segítségével lekérem x másodpercenként a fenti szkript eredményét és ha azt hiba nélkül megkapom, akkor a DOM megfelelő elemét felülírom vele. Ha ez utóbbihoz segítség kell, szólj, de azt én is csak doksiból tudom kibányászni!
    Mutasd a teljes hozzászólást!
  • <!doctype html> <html> <head> </head> <body> <div> Ajax content: <span id="ajaxfield"></span> </div> <script> function getAPIdata(){ var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200){ document.getElementById("ajaxfield").innerHTML=this.responseText; } } xhttp.open("GET", "/api", true); xhttp.send(); setTimeout(getAPIdata, 5000); }; getAPIdata(); </script> </body>
    Ujjgyakorlat címén összedobtam egy demot. Azon a szerveren, ahonnan a fenti oldalt letöltöm, a "/api" alatt elérhető egy rendszeresen változó tartalom. Ezt "pollozza" a fenti szkript és a kapott értéket megjeleníti az "ajaxfield" mezőben.
    Mutasd a teljes hozzászólást!
  • Szia,
    odáig minden meg van, amit ezelőtt a első hsz-ednél írtál, hogy elérném azt, ahogyan fogalmaztál "a DOM megfelelő elemét felülírom..." Ha jól értelmezzem a te scripted 5 másodpercenként figyel és frissít folyamatosan, minden 5. másodpercbe. De nekem ez megy e nélkül is... A probléma az, hogy csak akkor frissítsen, ha a fájl tartalma valóban megváltozik.  Tehát a legegyszerűbb hogy egy helyes és logikus vizsgálat és kiértékelés után pl. true/falsh jelenítse, azaz frissítse a html oldalon megjelenített infót vagy sem, mert még esetleg nincs változás... Egyébként úgy néz ki, hogy van már működő eredmény, csak most - úgymond - nálam pattog a labda, mert közben meg is tetszett az a rendszer, s most fel kell hozzá építenem, hogy tesztelni, s esetlegesen alkalmazni tudjam. Igaz ezen problémára "ágyúval szúnyogra" esete, de ha szimpatikus számomra több okból a dolog, akkor miért ne... Ilyen ez a szerelem első látásra. Mivel még ez húzódik, ezért nem zártam le ezt a témát... Hisz amit írsz az sokkal egyszerűbb megoldás lenne jelen helyzetbe, csak eddig még nem értem a végére, mert hosszú évek kiesése alatt rengeteget felejtettem, s lett is keveredés a kobakban rendesen, s amennyi időm van erre, az többnyire szintaktikai, értelmezési, s függvény hiányosságaim vacakolása, újra felszippantása viszi el... De remélem kialakul. így legalább egy apró dologban is lehetek boldog Minden esetre, ha érdekesnek találod, hogy leköt, akkor hajrá. Hidd el engem sem a cél érdekel annyira, hanem az út... S természetesen köszönöm az idődet.
    Mutasd a teljes hozzászólást!
  • Kezdve a végén: az időmet nem adtam :) (úgyis elő kellett szednem a régi JS dolgokat, szóval ez csak jó ürügy volt)

    Én úgy láttam, ami neked megvan, az a teljes oldalt frissíti. Rosszul láttam? (kicsit vak vagyok, szóval benne van a pakliban)
    Ilyen adatmennyiségnél nincs értelme (szerintem) ennél tovább cifrázni. Illetve az elején írta valaki az etag-et, az csökkentheti az adatforgalmat.

    Eleve az is probléma, hogy szerver oldalon hogy tudsz valami eseményt létrehozni a fájl változásának figyelésére. Linuxon van egy inotify nevű eszköz, annak mintájára biztosan lehet írni valamit, bár PHP esetében nem vagyok biztos benne. PYthonhoz van ilyen, de a 0.2 verziószám engem kissé elriaszt. ;)
    Utána a másik gond, hogy erről hogyan küldesz értesítést küldeni a böngészőnek.
    A push nem tudom hogy működik, de amit találtam róla, az mind a Google szolgáltatásait emlegeti, ami azt hiszem, itt nem nyerő.

    Mivel az XMLHttpRequest egy aszinkron függvény, meg lehet úgy is csinálni, hogy a szerver oldalon egy olyan API-t készítesz, ami nem tér vissza amíg nincs válasz és ehhez hozzá lehet igazítani a fenti szkriptet is, hogy gyakorlatilag várakozás nélkül kérje le újra. Ezzel egy baj van: minden ilyen kapcsolat ott lóg a szerveren  nyitva tartva egy plusz TCP kapcsolatot. Ez egy-két kliens esetén csak nem szép, ha sok felhasználós, akkor akár problémát is okozhat az üzemeltetése.
    Nagyjából meg tudnám mutatni, mire gondolok, de csak pythonban és az is kétesélyes, mivel nem sok ingyenes python szervert ismerek (konkrétan csak egyet, a pythonanywhere.com-ot) és nem biztos, hogy akár az inotify működtethető ott, akár más hasonló eszköz.
    Mutasd a teljes hozzászólást!
  • Közben kipróbáltam: sajnos rég volt... tcp-n olyan rövid a timeout, hogy jó eséllyel nagyobb forgalmat generál az állandó várakozás -> timeout (504) -> várakozás ciklus, mint egy x időközönkénti polling.
    Mutasd a teljes hozzászólást!
  • Hű...
    Szóval jól láttad, az a problémám, hogy az én scriptem is adott másodpercben frissíti a teljes oldalt, benne a lekérdezéssel ez a gondom. Viszont a szerver ahol a rádiószoftver van eleve folyamatosan streamel egy műsort 0-24 ben, s az küldi ki mindig a frissítést, ha egy zenemű változik ezzel nem kell foglalkozni sem. Van egy akárhol elhelyezett tárhely és oda küldi. Ezen a tárhelyen ugyan ott van a honlap, ami jelenleg php. A php-ban egy json, vagy js scripttel lehet figyelni ugyan azon mappa adott txt fájlát, hogy változott e, s bőven elegendő, hogy az 5 másodpercenként elemez, mert ettől a honlapon még nem kell történjen semmi. Amikor egy muzsika megváltozik, akkor megváltozik a txt fájl tartalma is, s 5 másodpercen belül úgyis lefut egy adategyeztetés, s ha az ugye már nem egyezik a régi adattal, akkor felülírja a régit az új adattal és akkor frissíti a honlap adott részét. ami már valós forgalom, de minimális. Szóval a folyamatos 5 másodperces kontroll a backend-en történik.
    Mutasd a teljes hozzászólást!
  • Felesleges XMLHttpRequest cuccokkal szenvedni ilyen esetben. A változás, azaz a data.txt módosulása a szerveren következik be, tehát nem a kliensnek kell requestekkel szivatni a szervert, hanem a szerver a hozzá stabil TCP kapcsolaton kapcsolódó és  jelenlévő klienseknek kell jeleznie, hogy megváltozott az adatom, tessék itt a friss adat. Mind a fájl megváltozásának ellenőrzésére, mind a socket kliensek kiszolgálására alkalmas a Node.Js nevű szoftver, amivel saját magadnak írt szerverscript fájlokkal készíthetsz magadnak webszervert (JavaScript kódbázis szerkezetet használva)
    A megoldást már korábban konténerizálva felraktam ide, de most az egészet felraktam a Repl.it nevű cuccra is. Bárki letöltheti magának a saját gépére is, de ez ott magán a Repl.it-en fut, egy egyszerű fork-kal bárki lemásolhatja és futtathatja, aki nem akar Node.js Windowson való futtatásával szenvedni.

    Server file: SOCKET SERVER + CLIENT DEMO
    Kliens html: https://replit.com/@ZoltnBata/SOCKET-SERVER-CLIENT-DEMO#public/clien..
    Kliens js: SOCKET SERVER + CLIENT DEMO
    DEMO: SOCKET CLIENT
    Mutasd a teljes hozzászólást!
  • Next.js-el is meg akarom majd csinálni, azzal még "nullkonfigurációsabb" lehet az egész.
    Mutasd a teljes hozzászólást!
  • Nem látom, hogy az ide berakott kb nyolc sorban hol a szenvedés.
    A te megoldásoddal egy a gond: ha ingyenes tárhelyről kell futtatni (nem tudom, ez igény-e, de úgy rémlik, onnan indult, hogy PHP, ennek meg gondolom, oka van), hol talál nodejs-t is engedő szolgáltatást?
    Mutasd a teljes hozzászólást!
  • Oracle Cloud: 2 db VPS (1 vCPU, 1 GiB RAM, 50 GiB boot volume), 1 load balancer, 1 publikus fix IP cím, 2 db 100 GiB block volume, Ubuntu Linux. Ingyen, örökké.

    Nem fizetett reklám volt.
    Mutasd a teljes hozzászólást!
  • A szenvedés az amit a szerver átél a request cunamitól
    Saját gépéről tudja futtatni. Fix IP kell rá és kész. Ha már rádiót üzemeltet, ahhoz is dívik minimum egy állandó IP. Szóval, ha a rádiót a saját gépéről streameli, akkor a socket is mehet onnan. Ha áll a rádió, a socket amúgy sem kell.
    A kliens fájlokat (a kódomban client.html és main.js) pedig akármilyen hostingra fel lehet tenni, akár a Freewebre is (ha még létezik olyan)
    Mutasd a teljes hozzászólást!
  • Nos, nem az itt megosztott pár sorral szenvedek éppen...
    Aztán én a GoogieHost-nál (Free Web Hosting And Domain Name▷SSL, Php, MySQL, No Ads) szereztem ingyen 1GB-s ssd-s korlátlan forgalmú stb. tárhelyet, s ott nem lesz ezzel gondom. Kiváltképpen, mert azon nem kell futnia a node.js-nek Amit eddig leírtam, ha nem kapkodva olvasod, s értelmezed, akkor ezen dolgoknak nem kell lenni homályosnak már.
    Mutasd a teljes hozzászólást!
  • Mint említettem, elég rosszul látok, szóval igyekszem csak a konkrét feladványra figyelni. :)
    Ezek speciel kimaradtak.
    Mutasd a teljes hozzászólást!
  • Most kacagtam egy jót, mert én meg egyre rosszabbul hallok, s Bzozoo meg nem beszél, csak ír, s csak reménykedni tudok, hogy a Lillának meg egészségesek,s még szépek a lábai...
    Mutasd a teljes hozzászólást!
  • ...Én azt nem értem, hogy ha van egy internet rádió, ahol alsó hangon is elmegy 1-1,5 MB adat egy perc alatt, akkor kit zavar, ha öt másodpercenként letöltesz ötven bájtot? Minek spórolni az erőforrásokkal, ha az internet-rádió feldolgozása nagyságrendekkel nagyobb feladat a processzornak?
    Mutasd a teljes hozzászólást!
  • Talán ez segít.
    Mutasd a teljes hozzászólást!
    Csatolt állomány
  • Szia,
    Csak itt ránéztem, de végre egy ember aki
    var
    helyett már
    const
    használ...
    Az biztos hogy ezt este, ha gépnél leszek élvezet lesz értelmeznem...
    Köszönöm, s feltétlen reagálok majd, hisz azt ránézésre látom, hogy tudod mit csinálsz...
    Mutasd a teljes hozzászólást!
  • Nem akarok kötekedni, de ugyanazt csinálja, amit én is felraktam, meg szerintem korábban is valaki: a szerver oldalra befutó GET kérésre megnyitja és kiolvassa a fájl tartalmát.
    Teszi mindezt 5000 másodpercenként (?).
    Legalábbis én  em látom benne, hogy akkor frissít, amikor változott a fájl.
    Mutasd a teljes hozzászólást!
  • Most néztem meg jobban, s pedig ez azért teljesen más, viszont van benne hiba, a borito-nal, s egy desing script meg pont hibásan fut mert annak a SPAN részét így megkavarta.
    De a lényeg, hogy a borito meg nem frissül , csak mikor az user betölti az oldalt.
    A többi oksa.
    Mutasd a teljes hozzászólást!
  • Nos, gyorsban annyit észre vettem, hogy az elején a 30. sornál

    'eloado' => trim($firstLine[0]), 'zenecim' => trim($firstLine[1]), 'album' => trim($firstLine[2]), 'kiadas_eve' => trim($firstLine[3]), 'kiado' => trim($firstLine[4]), 'borito' => trim(preg_replace('/\s+/', ' ', $firstLine[5])),
    Nem értem miért kellett így megírni?
    Én simán így hagynám:

    'borito' => trim($firstLine[5]),
    Valamint ennél a résznél:
    <td bgcolor = "#6c1010" height = "30" rowspan = "2" p class = "fantazia"><SPAN id = "eloado"><?php echo $adat['eloado'] ?></SPAN></td>
    Bekavar a scriptnek , ha az id='eloado' oda teszed ebben a formában... Egyszerűen az a script amihez kell a SPAN akkor már nem működik.
    A lényeg, hogy így csak akkor frissíti a borito-t, ha az user betölti az oldalt, s utána a borito már nem frissül, mint a többi rész.
    Mutasd a teljes hozzászólást!
  • Nos fától az Ernőt.....
    Volt egy elgépelésed benne a táblázatban ahova befűzted ezt:

    id = 'img'
    Javítottam erre:

    id = "borito"
    Így már csak az összeakadást kell kijavítanom a

    <SPAN></SPAN>
    Mert az id oda befűzve nem működteti a dizájn scriptemet arra a szövegre
    Mutasd a teljes hozzászólást!
  • Azt leszámítva, hogy én is, meg az előttem írók is csak vázlatot adtunk, hogy merre indulj, ő meg megírta helyetted az egészet (?), működését tekintve ez miben más?

    Folyamatosan azon rugózol, hogy neked nem polling jellegű megoldás kell, hanem olyan, ami akkor frissít, amikor változik a fájlod.
    Ez a (két) szkript ugyanúgy x időközönként fut le, sem szerver, sem kliens oldalon nem nézi, hogy változott-e az a fájl.
    Ha szerinted nem, akkor mutasd meg, hol látod benne a fájl módosítása által triggerelt műveleteket!


    Ui: amit fentebb beraktam, az pontosan azt csinálja, hogy csak a fájlod tartalmával frissít egy mezőt. Amiből a technológia volt a lényeg. De a jelek szerint meg sem próbáltad megérteni.
    Mutasd a teljes hozzászólást!
  • Nem értem miért kellett így megírni?
    Én simán így hagynám:

    Tedd azt. Én azért csináltam így, mert a sor végén előfordulhat egy "új sor" karakter. Ezzel biztosítottam be, hogy ez ne legyen (windowson működött, máshol nem teszteltem).

    Bekavar a scriptnek , ha az id='eloado' oda teszed ebben a formában... Egyszerűen az a script amihez kell a SPAN akkor már nem működik.

    A span abban a kódban volt bent, amit sajátodként tettél fel az egyik hozzászólásodban, én csak az id-t neveztem át. Eredetileg "animate" volt az id, de lett belőle "eloado" mert ebben a span tagben az előadó nevét kívánod megjeleníteni.

    A többi hibáért szórom a hamut a fejemre. Mentségemre szól talán hogy egy picit nehéz volt a kódoddal dolgozni, mert bár valóban mesteri, de az editor csak a HTML szakaszban 35 db warningot jelzett.

    Ha már a "nem értem miért kellett így megírni" kérdésnél tartunk:
    Nem értem a style type és a script language attirbutumát. Nem értem miért a kell a table tagnak border, CELLPADDING, CELLSPACING align, width height bgcolor attributumokat adni. Nem értem miért kell a tr tagnek VALIGN, a td tagnek heigh és VALIGN bgcolor. Nem értem miért nagybetűs helyenként a kód. Nem értem hogy a heigh miért nem height. Nem értem a p betűket a tageken belül. Nem értem miért van a táblázatban egy tbody lezáró tag csak úgy önmagában, nyitó tag nélkül. De úgy összességében nem értem miért van szükség egyáltalán a táblázatra...

    Ne! Kérlek ne kezdd el megindokolni. Szeretnék békés tudatlanságban meghalni.
    Mutasd a teljes hozzászólást!
  • Mint írtam van egy dizájn script. Ezt nem részleteztem, azaz kiollóztam az itteni megosztásnál, s csak kommentben megjyegyeztem a programsorok közt, hogy itt még van valami... Csak az arra utaló részeket hagytam benne pl.:

    <BODY onLoad=" animate('animate', '#66ccff'); " >
    Aztán az eloado-nál volt szerepe a scriptnek, ami ezért most kilőve.
    Itt mindent szimpla szövegszerkesztőben kísérletezgettem, s ott nem az volt a cél, hogy minden flottul nézzen ki a kódsorokban. S apróbb gondok miatt sok mindent kipróbál az ember, s van ami ott marad, mert megunta, vagy megoldotta másként... Ha elérek odáig, akkor biztos nem fog úgy maradni.
    Ez indoklás és nem magyarázkodás...
    Mutasd a teljes hozzászólást!
  • Megoldottam a problémáját az animate scriptemnek, azzal az ismét nem szép húzással,
    hogy  - nemes egyszerűséggel átneveztem az eloado-t animate-nek, s így gond nélkül működik minden...
    Ezt viszont nem indoklom meg.
    Mutasd a teljes hozzászólást!
  • azzal az ismét nem szép húzással 

    Tudom, a szépség relatív... De ez nem szép, hanem helyes húzás. Miért nem tetszik a dolog? Ebben az esetben két lehetősége van a fejlesztőnek. Vagy az elemre történő hivatkozást nevezi át, vagy az elemet nevezi át, hogy a rá történő hivatkozások érvényesek legyenek.

    Az elemre való hivatkozást kell átnevezni itt:

    <BODY onLoad = " animate('animate', '#66ccff'); ">
    erre:

    <BODY onLoad = " animate('eloado', '#66ccff'); ">
    Vagy a másik megoldás, hogy átírod a <span> id-ját "eloado"-ról "animate"-ra. Ha jól értem, ezt a megoldást választottad. Ez is teljesen rendben van, ebben az esetben a body onload eseményében nem kell módosítani a hivatkozást. Az általam küldött javaslatban viszont sajnos igen, mert ott még az id="eloado" azonosítójú elemet keresi a DOM-ban.

    Ezt kell módosítani:

    const eloado = document.getElementById('eloado');
    erre:

    const eloado = document.getElementById('animate');
    Mindegy melyiket választod, teljesen korrekt megoldás mindkettő.
    Jó munkát a továbbiakhoz!
    Mutasd a teljes hozzászólást!
  • Szia,
    igen tegnap, - mint írtam - ezt tettem első blikkre, de írtam is, hogy én egy mezei notepad++ban csináltam eddig ezzel kapcsolatosan mindent, mert évek óta nem foglalkoztam ilyesmivel.
    Tehát nekem nem segítettek semmilyen extra csomagok a funkcionalításban és áttekinthetőségben stb. Valamint ez elég ciki és kellemetlen érzés, mint mikor 10 évig kómában feküdtem volna, s csak néhány kódsor után is csak nézek, mint a moziba, hogy mivaaaaan? Viszont ránézésre még működnek a reflexeim, hogy hol kezdjek el gyanakodni, s rengeteg idő, míg utána tanulom az elmúlt 10 évet.  Minden esetre nagyon szépen köszönöm, de nem is annyira a megoldást, hanem azt amin keresztül már érdemes tanulnom.
    Mutasd a teljes hozzászólást!
  • Megosztom már miről beszélünk most, azaz egy dizájn szkriptről, ami egy tetszőleges színnel szaladgál ide-oda egy meghatározott szövegen... 

    <script language = "javascript"> // Mozgószín text szkript. Animálja a megadott szövegen a színt // Ezt a tartalmazó címke azonosítója határozza meg). // adott színnel kiemelve karakterenként mozgó mintával // A lényeg: // animáció hívása(tagID, szín); ahol a "tagID" az azonosító // az animálandó szöveget tartalmazó címkéről, // és a "szín" a szöveg kiemelésére szolgáló szín. var ie4 = false; if(document.all) { ie4 = true; } function setContent(name, value) { var d; if (ie4) { d = document.all[name]; } else { d = document.getElementById(name); } d.innerHTML = value; } function getContent(name) { var d; if (ie4) { d = document.all[name]; } else { d = document.getElementById(name); } return d.innerHTML; } function setColor(name, value) { var d; if (ie4) { d = document.all[name]; } else { d = document.getElementById(name); } d.style.color = value; } function getColor(name) { var d; if (ie4) { d = document.all[name]; } else { d = document.getElementById(name); } return d.style.color; } function animate(name, col) { var value = getContent(name); if (value.indexOf('<span') >= 0) { return; } var length = 0; var str = ''; var ch; var token = ''; var htmltag = false; for (i = 0; i < value.length; i++) { ch = value.substring(i, i+1); if (i < value.length - 1) { nextch = value.substring(i+1, i+2); } else { nextch = ' '; } token += ch; if (ch == '<' && '/aAbBpPhHiIoOuUlLtT'.indexOf(nextch) >= 0) { htmltag = true; } if (ch == '>' && htmltag) { htmltag = false; } if (!htmltag && ch.charCodeAt(0) > 30 && ch != ' ' && ch != '\n') { str += '<span id="' + name + '_' + length + '">' + token + '</span>'; token = ''; length++; } } setContent(name, str); command = 'animateloop('' + name + '', ' + length + ', 0, 1, '' + col + '')'; setTimeout(command , 100); } function animateloop(name, length, ind, delta, col) { var next = ind + delta; if (next >= length) { delta = delta * -1; next = ind + delta; } if (next < 0) { delta = delta * -1; next = ind + delta; } setColor(name + '_' + ind, getColor(name + '_' + next)); setColor(name + '_' + next, col); command = 'animateloop('' + name + '', ' + length + ', ' + next + ', ' + delta + ', '' + col + '')'; setTimeout(command , 100); } </script> </head> <BODY onLoad = " animate('eloado', '#66ccff'); ">
    Szóval annyit mégiscsak borított, hogy mikor betölt a honlap működik is , de csak addig amíg ez az esemény első alkalommal tart, 5 másodpercig... :

    document.body.style.cursor = 'wait'; xhr.open('post', '', true); xhr.send(); }, 5000);
    Mutasd a teljes hozzászólást!
  • Hát ez kemény dió!

    Ha jól látom a dizájn script felbontja a előadó nevét, és minden karakterét egy önálló, indexelt <span> tag-be helyezi. Majd ezeket a frissen beszúrt tageket színezi az indexek mentén bizonyos időközönként. Azzal, hogy a frissítéssel új értéket kap az előadó neve ez a <span> rendszer megszűnik.

    Meg kellene próbálni az animate() függvényt meghívni minden alkalommal, amikor az előadó neve frissül, hiszen ez építi fel az előadó nevéből a színezett span rendszert. Valahogy így:

    const eloado = document.getElementById('eloado'); if (eloado) eloado.innerText = response['data']['eloado']; animate('eloado', '#66ccff');
    De ettől valószínűleg darabos lesz az animáció. Attól tartok nincs olyan megoldás, ami szépen tudja frissíteni az ilyen módon animált stringet.

    Illetve nyilván van megoldás, de akkor az animációt össze kell hangolni a szerverről kapott új információkkal és az előadó nevét nem akkor frissíteni, amikor az valójában módosul, hanem amikor az animáció az első betűnél tart. Vagy mégjobb megoldásként az előadó nevét már eleve az animációnak megfelelő span szerkezetben kell létrehozni, és az amináció egyik betűről a másikra ugrásának pillanatában beszúrni az oldalra. Ekkor nem lenne látható az animációban az átmenet.

    A requestet a dizájn scripttel összehangolni túl hosszú idő lenne (legalábbis számomra), sajnálom. Talán más elvállalja. Esetleg egy új javascript problémában felvethetnéd.
    Mutasd a teljes hozzászólást!
  • Meg kellene próbálni az animate() függvényt meghívni minden alkalommal, amikor az előadó neve frissül, hiszen ez építi fel az előadó nevéből a színezett span rendszert. Valahogy így:
    const eloado = document.getElementById('eloado'); if (eloado) eloado.innerText = response['data']['eloado']; animate('eloado', '#66ccff');

    Ezt feltétlen kipróbálom, de nem lesz darabos a megjelenítése, csupán a frissült eloado adat után a beállított kontroll időig fog működni. De reményeim szerint így legalább már NEM CSAK az első oldalbetöltésnél indul el a szkript, majd leáll, hanem minden adatfrissülésnél is.

    De valóban ez itt most off. Nem is kell belemenni, majd felteszem természetesen külön témának.
    S köszönöm az értékes idődet is!
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd