ugrás a tartalomhoz

PHP - JavaScript idő szinkronizáció

Blackdiana · 2013. Nov. 18. (H), 01.14
Sziasztok
Nagyon kezdő vagyok, de már napok, sőt hetek óta böngészem a netet. Egy olyan problémám van, hogy php-ben lekérem a szerver időt, és alapban 20 másodperces késéssel jelenik meg, utána meg folyamatosan el kezd késni( 1 óra alatt 10-15 percet téved). Egy általános scriptet használok. Ez alapból 20 másodpercet késik, ami később több lesz. A site-on olyan megoldás kellene számomra, ami a szerver időt mutatja, és azt frissíti időnként. Nagyon sokféle dolgot írtak a neten erről,(csak mivel írtam hogy kezdő vagyok) nekem kínai... Kérlek segítsetek ebben...
<script type="text/javascript">

// Current Server Time script (SSI or PHP)- By JavaScriptKit.com (http://www.javascriptkit.com)

// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/

// This notice must stay intact for use.



//Depending on whether your page supports SSI (.shtml) or PHP (.php), UNCOMMENT the line below your page supports and COMMENT the one it does not:

//Default is that SSI method is uncommented, and PHP is commented:



//var currenttime = '<!--#config timefmt="%B %d, %Y %H:%M:%S"--><!--#echo var="DATE_LOCAL" -->' //SSI method of getting server date

var currenttime = '<?php echo date("F d, Y, H:i:s", time())?>' //PHP method of getting server date



///////////Stop editting here/////////////////////////////////



var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec")

var serverdate=new Date(currenttime)



function padlength(what){

var output=(what.toString().length==1)? "0"+what : what

return output

}



function displaytime(){

serverdate.setSeconds(serverdate.getSeconds()+1)

var datestring=montharray[serverdate.getMonth()]+" "+padlength(serverdate.getDate())+", "+serverdate.getFullYear()

var timestring=padlength(serverdate.getHours())+":"+padlength(serverdate.getMinutes())+":"+padlength(serverdate.getSeconds())

document.getElementById("servertime").innerHTML=datestring+" "+timestring

}



window.onload=function(){

setInterval("displaytime()", 1000)

}


</script>

<span id="servertime"></span>
 
1

Probléma

Poetro · 2013. Nov. 18. (H), 09.36
Az a baj, hogy igazából ez nem is PHP probléma, hanem JavaScript. Ráadásul a probléma nem is olyan egyszerű, hogy egy kezdő könnyen megoldja. Ugyanis a setInterval semmiképp se nevezhető pontosnak, te mégis időmérésre használod. Inkább a JS kódod indulásakor állapítsd meg a különbséget ezredmásodpercben a kliens és a szerver között, majd minden egyes setInterval futásban kérdezd le a kliens idejét, add hozzá a különbséget, majd ezt az új időt mutasd meg.
Mivel a pontos időt a kliensen kérdezed le a szervertől, viszont a szervernek időbe tart mire visszaadja a választ, valamint a kliensnek is, hogy feldolgozza, ezért az idő semmiképp se nevezhető majd pontosnak, legalább pár tizedmásodperc, ha nem pár másodperc különbség mindenképpen lesz.
2

Zónaidő?

Pepita · 2013. Nov. 18. (H), 10.39
Esetleg az nem segíthet, ha a szervertől csak a zónainfót küldi le?
A kliensen pedig beállítja ugyanazt a zónát, elvileg mindkét gép "órája" ugyanonnét frissül időnként, így elkerülhetők az átviteli időkülönbségek.

JS-ben gondolom meg lehet oldani, hogy nem az egész böngésző, csak az adott szkript / oldal időzónáját állítja a szerverére. Mondjuk egyetlen Date() objektumét.

Persze ilyenkor is kérdés, hogy a kliens órája milyen sűrűn "pontosít".
3

JS-ben gondolom meg lehet

Poetro · 2013. Nov. 18. (H), 11.39
JS-ben gondolom meg lehet oldani, hogy nem az egész böngésző, csak az adott szkript / oldal időzónáját állítja a szerverére. Mondjuk egyetlen Date() objektumét.

JS-ben semminek nem tudod megadni az időzónáját, maximum lekérdezni tudod, hogy a kliensen mi van beállítva. Az, hogy mennyire pontos időt állított be a felhasználó az operációs rendszerén, és hogy azt mikor szinkronizálja (mondjuk soha), arról neked fogalmad sincs, maximum le tudod kérdezni a felhasználó gépén levő időt és össze tudod hasonlítani egy publikus időszerverrel (NTP).
4

Akkor rosszul gondoltam

Pepita · 2013. Nov. 19. (K), 01.35
:(
Gagyi js.
5

mint említettem...

Blackdiana · 2013. Nov. 19. (K), 12.04
Mint írtam, teljesen kezdő vagyok ilyen téren, és nagyon megköszönném, ha ki tudnád nekem javítani azt a script-et, ami megcsinálja a normál időt, és időközönként lekéri a szervertől. (Hallottam valami ajax-os megoldásról, is)..
6

Próbáld meg

Pepita · 2013. Nov. 19. (K), 17.05
amit Poetro javasolt, lássuk mi nem sikerül. Egyértelműen leírta a "feladatspecifikációt", most láss neki, gondolkodj és kódolj.
kezdő vagyok ilyen téren, és nagyon megköszönném, ha ki tudnád nekem javítani
Ilyet nem szoktunk csinálni, mert abból nem tanulsz, és tudod, rosszabb pillanatokban azt mondjuk erre: Munka-állás rovat.

Az lesz a jó, amit javasolt: leküldöd a szerverét, rögtön lekéred a helyit, egy kivonás a különbségért, és ezt mindig utána hozzáadod a helyihez, mikor kell. Meg tudod csinálni, kezdj neki, lássuk a kódot! Ha hiba lesz benne, segítünk.
7

Mivel én is kezdő vagyok izgatott a téma

Mikulasche · 2013. Nov. 19. (K), 18.02
<?php
$most_az_ido_70_ota_in_sec = time();
$emberiora = date('H',$most_az_ido_70_ota_in_sec);
$emberiperc = date('i',$most_az_ido_70_ota_in_sec);
$emberisec= date('s',$most_az_ido_70_ota_in_sec);

echo(" <script type=\"text/javascript\" language=\"javascript\"> ");
echo ("var jshour = ").("$emberiora;");
echo ("var jsmin = ").("$emberiperc;");
echo ("var jssec = ").("$emberisec;");

echo ('
function szamolj()
{

if(jssec == 59)
{
jssec =-1;
jsmin++;
}

if(jsmin == 59)
{
jsmin = -1;
jshour++;
}

jssec++;

document.getElementById(\'clockbox\').innerHTML=" "+jshour+":"+jsmin+":"+jssec+" ";
setTimeout("szamolj()", 1000);
}

window.onload=szamolj;
</script>

');


echo ("<div id=\"clockbox\">hol</div>");

?>


Az igaz, hogy tíz alatt egyszámjegyet ad, de jó az így is.
A szerver time kiirva onnan óra számol, meg ott van js változóban is.
8

Ja bocs ...

Mikulasche · 2013. Nov. 19. (K), 18.04
A 24 órás lépést már nem írtam bele
9

Talán így már teljes ....

Mikulasche · 2013. Nov. 19. (K), 18.31
<?php

$most_az_ido_70_ota_in_sec = time();
$emberiora = date('H',$most_az_ido_70_ota_in_sec);
$emberiperc = date('i',$most_az_ido_70_ota_in_sec);
$emberisec= date('s',$most_az_ido_70_ota_in_sec);


echo(" <script type=\"text/javascript\" language=\"javascript\"> ");

echo ("var jshour = ").("$emberiora;");
echo ("var jsmin = ").("$emberiperc;");
echo ("var jssec = ").("$emberisec;");

echo ('
function szamolj()
{

if(jssec == 59){jssec =-1;jsmin++;}
if(jsmin == 59){jsmin = -1;jshour++;}
jssec++;
if(jssec<10){jssec = "0"+jssec;}
if(jsmin<10){jsmin = "0"+jsmin;}
if(jshour<10){jshour = "0"+jshour;}
if(jshour == 24){jshour =0;}

document.getElementById(\'clockbox\').innerHTML=" "+jshour+":"+jsmin+":"+jssec+" ";
setTimeout("szamolj()", 1000);
}

window.onload=szamolj;
</script>

');

echo ("<div id=\"clockbox\"></div>");

?>


Minden oldalletöltésnél frissíti a szerverről az aktuális időt, és kiirja js-el.
Erre gondoltál ???
10

Még volt benne egy kis hiba - Ez a hibátlan

Mikulasche · 2013. Nov. 19. (K), 18.35
<?php

$most_az_ido_70_ota_in_sec = time();
$emberiora = date('H',$most_az_ido_70_ota_in_sec);
$emberiperc = date('i',$most_az_ido_70_ota_in_sec);
$emberisec= date('s',$most_az_ido_70_ota_in_sec);


echo(" <script type=\"text/javascript\" language=\"javascript\"> ");

echo ("var jshour = ").("$emberiora;");
echo ("var jsmin = ").("$emberiperc;");
echo ("var jssec = ").("$emberisec;");

echo ('
function szamolj()
{
if(jshour == 24){jshour =0;}
if(jssec == 59){jssec =-1;jsmin++;}
if(jsmin == 59){jsmin = -1;jshour++;}
jssec++;
if(jssec<10){jssec = "0"+jssec;}
if(jsmin<10){jsmin = "0"+jsmin;}
if(jshour<10){jshour = "0"+jshour;}


document.getElementById(\'clockbox\').innerHTML=" "+jshour+":"+jsmin+":"+jssec+" ";
setTimeout("szamolj()", 1000);
}

window.onload=szamolj;
</script>

');

echo ("<div id=\"clockbox\"></div>");

?>
11

Bocsi, de ez teljesen mellőzi

Pepita · 2013. Nov. 19. (K), 20.40
Poetro javaslatát.

Azt vegyétek figyelembe, hogy a setTimeout("szamolj()", 1000); lehet, hogy legközelebb 900 vagy 1100 msec múlva fog futni... Úgy elcsúszik így az idő, mint a huzat.

Helyette a Date() objektummal kell időt kezelni, első futáskor pedig egy különbséget számolni a szerverhez képest, ezzel a különbséggel kell a helyi időt kezelni. Teljesen felesleges ilyen string-bűvészkedésbe menni, ha van rá megfelelő objektum, megfelelő metódusokkal.

Most légyszíves mindketten tanulmányozzátok a Date() (js) objektumot!
12

Best practices

bamegakapa · 2013. Nov. 20. (Sze), 00.34
Pár fontos tanács, nem a kódod működésével, inkább a használt technikákkal kapcsolatban. Azt javaslom, fogadd meg mindet, később sokkal nehezebb az ilyesmiken változtatni.

  • A Javascript setTimeout() függvényében sose használj első paraméterként stringet. Ilyenkor ugyanis, ha nem is tudsz róla, egy eval()-t hívsz. Ez lényegesen lassabb, valamint potenciálisan veszélyes is lehet. Mindig függvényt adj át helyette, például:
    
    setTimeout(szamolj, 1000); //függvényreferencia átadása
    setTimeout(function () {
        console.log('valami');
    }, 1000); //anoním függvény átadása
    
    A legjobb lenne, ha jó időre elfelejtenéd, hogy lehet stringet is átadni neki. Ez a tudás általában csak akkor hasznos, amikor mások rossz minőségű kódját olvasod :). Ugyanez áll a setInterval()-ra, a Function() konstruktorra és magára az eval()-ra is.

  • Ne használd a window.onload és társait, ez az eseménykezelő modell már rég elavult. A szkriptjeid folyton össze fognak így akadni, mert mindegyik egyedül akarja majd bitorolni az adott esemény kezelését. Mielőbb szokj rá az addEventListener() használatára.

  • PHP-ból ne echozzál hagyományos stringként HTML-t se, de Javascriptet meg főleg nem, mivel egy katyvasz lesz az egész, és folyton el fogod nézni az idézőjeleket. Helyette zárd le a PHP szekciót, aztán nyisd meg újra, ha kell. Olvashatóbb, áttekinthetőbb, csökken a hiba lehetősége.
    
    <?php
        $most_az_ido_70_ota_in_sec = time();
        //...
    ?>
    
    <!-- a scriptnél a language-t felejtsd el (a type se kötelező már HTML5-ben egyébként, de nem gond, ha kiírod)-->
    <script type="text/javascript">
    
        var jshour = <?php echo $emberiora ?>;
        var jsmin = <?php echo $emberiperc ?>;
        var jssec = <?php echo $emberisec ?>;
    
        function szamolj()
        //...
    
  • Mindig tördeld következetesen a kódodat, következetesen használd a szóközöket és mindig használj megfelelő behúzásokat. Magadnak is hálás leszel érte később, de ha másokkal osztasz meg kódot, különösen figyelj erre. Tiszteletlenség másokkal nehezen olvasható kódot megosztani. Jelen esetben ráadásul a kezdő 0-ák hozzáadását külön függvénybe lehet szervezni, fölöslegesen írod le többször ugyanazt a műveletet.
    
    function nullaEle(szam) {
        return szam < 10 ? "0" + szam : szam;
    }
    
    function szamolj() {
        if (jshour == 24) {
            jshour = 0;
        }
        if (jssec == 59) {
            jssec = -1;
            jsmin++;
        }
        if (jsmin == 59) {
            jsmin = -1;
            jshour++;
        }
        jssec++;
    
        document.getElementById('clockbox').innerHTML = 
            /* itt egy tömbbe rakom az értékeket, aztán összekapcsolom őket
            olvashatóbb és sokszor hatékonyabb, mint a string összefűzés
            a szóközöket kivettem, a formázást majd a CSS megoldja */
            [nullaEle(jshour), nullaEle(jsmin), nullaEle(jssec)].join(':');
    
        setTimeout(szamolj, 1000);
    }
    
  • A Javascript kódodat zárd egy önindító függvénybe, így nem fogod szennyezni a globális névteret. A te kódodban, bár nagyon helyesen var-t használsz, négy globális változó is létrejön (jshour, jsmin, jssec, szamolj). Érdemes utánaolvasni, miért is rossz gyakorlat ez.
    
    (function () {
    
        var jshour = <?php echo $emberiora ?>;
        //és az összes többi kódod
    
    })();
    

Remélem segítettem. Mindez nem a te hibád, egy kezdő rengeteg pocsék minőségű, rég elavult, összetákolt kóddal szembesül tanulmányai során, sok ezek közül egyenesen tananyagnak álcázza magát. Ha már tanulsz, érdemes rögtön a jó gyakorlatokat megtanulni, és elfelejteni ezeket a szörnyűségeket, sok időt és fájdalmat megspórolhatsz vele :).

Én szurkolok.
14

+1

Pepita · 2013. Nov. 20. (Sze), 10.33
Jól összeszedett, jó tanácsok, ki kéne emelni egy blogmarkba (esetleg kicsit kibővítve), és belinkelni Gábor cikkajánlójában megfelelő helyre.

Lehet róla szó? Mert ez is olyan téma, amit különben lehet eldugott fórumkommentből linkelgetni, de én nem könyvjelzőzök magamnak annyit, viszont tényleg sok alapot leírtál.
17

Nem tudom, hogy ez cikként

bamegakapa · 2013. Nov. 20. (Sze), 13.56
Nem tudom, hogy ez cikként vagy bármilyen bejegyzésként megállná-e a helyét, szerintem nem, ahhoz túl sok területet érint. A címe kb. "Random tanácsok a webfejlesztés világából" lehetne :).

Gondolkoztam rajta, hogy indítok valami blogszerűséget, ahol ilyen random 1-2 bekezdéses tanácsok is lennének, mint ezek. De ha egyszer rászánom magam (ha egyáltalán), asszem akkor már inkább angolul írnám.

Azt is tervezgetem egy ideje, amióta Gábor felvetette, hogy írok kezdőknek Javascriptes sorozatot ide a Weblaborra, de erre most épp nincs kapacitásom.

Ha van bármi konkrét ötlet, hogy lehetne a jövőre nézve hasznosítani a bejegyzést, bármiben benne vagyok, a szöveg szabadon felhasználható/kiegészíthető.
18

JS sorozat

Pepita · 2013. Nov. 20. (Sze), 22.12
Az a nagyon jó ötlet, de lehetne egy vegyes "gyakran elkövetett hibák" is, és / vagy "best practice gyűjtemény", de nem 1-2 bejegyzéses, hanem egy blog / cikk felsorol egy nagy kosárral. De talán a kezdő (+ haladó?) js fontosabb. A hibákhoz meg nyithatnánk egy témát, ahol egy-egy főkommenttel lehet újakat ragasztani, aztán ha úgy gondoljuk, hogy a legfontosabbak összegyűltek, akkor lehet belőle cikket önteni. Magyarul, ha már magyarok vagyunk.

Ehhez mit szólsz? Js-t legfeljebb átnézni vállalom, most nekem sincs úgy időm - és annyira nem tartom magam sem tájékozottnak, én inkább kérdezek js-ben, mint mondok. Vagy bújok manual-t, ami viszont elavult is lehet... (Jó, a szarvashibákat tudom, de nem sokkal többet.)
24

Nem ígérek semmit, de az

bamegakapa · 2013. Nov. 20. (Sze), 23.24
Nem ígérek semmit, de az ötlet(ek) jó(k). Ha indul hasonló kezdeményezés, beszállok természetesen azzal, amim van. Magam egyelőre nem állnék az élére ilyesminek, mert ahhoz nagyobb erőbefektetés kéne, mint amit most én adni tudok.

Saját blogot mindenképp angolul írnék, ha írnék. Egyszerű, több emberhez juthat el, így több embernek segíthet. A szakmánk nyelve az angol - aki nem beszéli, és webprogramozó szeretne lenni, előbb az angolt kell megtanulnia, anélkül semmi esélye.
25

Akkor pihen

Pepita · 2013. Nov. 21. (Cs), 00.51
Most én sem "állok élére", hátha akkor még jön valaki, vagy neked lesz több befektethető, nekem nincs rá kilátásom.
A szakmánk nyelve az angol
ez igaz, de az anyanyelvünk a magyar, és leginkább kezdőknek számít, de bárki másnak is, hogy amíg valóban a magyar az anyanyelve, addig könnyebben érti meg ugyanazt magyarul, mint angolul. Ez még rád is igaz, pedig azt gondolom igen jó angolos vagy.
Ja, és a WL is magyar, nekem ez a szakmai fórum, az a kedvenc, ami itt jelenik meg. És van is szűrve rendesen, próbáld csak ki "Főszerkesztő Urat"! :) Emiatt viszont színvonalasak a cikkek.
27

A szakmánk nyelve az angol -

inf · 2013. Nov. 21. (Cs), 00.57
A szakmánk nyelve az angol - aki nem beszéli, és webprogramozó szeretne lenni, előbb az angolt kell megtanulnia, anélkül semmi esélye.


Sorry, I don't fully understand English! ;-(
26

Gondolkoztam rajta, hogy

inf · 2013. Nov. 21. (Cs), 00.55
Gondolkoztam rajta, hogy indítok valami blogszerűséget, ahol ilyen random 1-2 bekezdéses tanácsok is lennének, mint ezek.


Mit gondolsz az itteni blog mire való? (no offense)
15

Isten vagy

Mikulasche · 2013. Nov. 20. (Sze), 12.10
Nagyon köszönöm a tanácsokat.
Megfogadom őket.

Erről az addEventListener() -ről
meg a tömbberakásnak erről a módjáról nem is hallottam.


Nagyon köszi !!!
16

Az addEventListener()-nél

bamegakapa · 2013. Nov. 20. (Sze), 13.44
Az addEventListener()-nél arra kell csak figyelni, hogy az IE8 és a még inkább múzeumba való IE verziók nem támogatják. Ott viszont van IE5-től attachEvent(), ami lényegében ugyanazt tudja, csak kevesebbet és rosszabbul. Az előző hozzászólásomban lévő linken van elég infó ezzel kapcsolatban.

Ha valami könyvtárat használsz DOM-kezelésre, például jQuery-t, az alapból áthidalja ezeket a különbségeket (kivéve ha a jQuery 2.x vonalat használod, mert az már nem törődik az IE8-al, az 1.x vonal viszi tovább az oldtimerek támogatását).
20

Fél off

Pepita · 2013. Nov. 20. (Sze), 22.20
Én pont a jQuery miatt tudok kevesebbet js-ből, mint szeretnék, mert olyan kényelmesen megold szinte mindent helyettem. Persze alkalmazáslogikát nem épít, de nemigen kell böngészővel foglalkozzak - és ez nagyon jó, de lustít is.
22

Hát erről is lehetne hosszan

bamegakapa · 2013. Nov. 20. (Sze), 23.11
Hát erről is lehetne hosszan elmélkedni.

Annó írogattam a saját kis függvényeimet egy functions.js-be, persze kis részét se értettem, mi is az a Javascript, de büszke voltam rá nagyon, a jQuery-t meg gyűlöltem, pedig sose használtam. Aztán egyszer valamiért mégis kipróbáltam (asszem akkoriban ráadásul épp újraírtak csomó dolgot benne), az akkori szintemen új dimenziókat nyitott meg, rácsodálkozás volt. Kitanultam alaposan, és egyre inkább érdekelt, mit hogy csinálnak, illetve miért. Érdekes módon tehát nálam pont fordítva volt tehát, a jQuery-től visszafelé indulva kezdtem elmélyedni magában a Javascriptben (nemcsak a DOM függvényekben, hanem magában a nyelvben is), aztán rá is kattantam egy idő után.
28

Én is így voltam, csak a

inf · 2013. Nov. 21. (Cs), 00.59
Én is így voltam, csak a prototype.js-el, talán már nincs is olyan, passz... A jquery kódja akkor még sokkal zavarosabb volt, mint a prototype-é... Most már úgy vagyok vele, hogy egyáltalán nem érdekel, hogy mit csinál a háttérben, csak működjön. Már nem akarom újra feltalálni a kereket... :D
19

Nézd meg

Pepita · 2013. Nov. 20. (Sze), 22.18
Nagy Gusztáv könyveit, ha teheted, menj hozzá tanfolyamra. Nagyon jó szerintem a Web programozás I. "jegyzet" (inkább könyv), de azt hiszem újabbak is vannak.
21

Inkabb ne

blacksonic · 2013. Nov. 20. (Sze), 23.04
Inkabb olvasd el a Javascript: The Good Part es a Secrets of the Javascript Ninja konyveket, ezek eleg jo alapot adnak Javascripthez.
Nem akarom a fent emlitett szerzot bantani, de az inline esemenykezelok es javascript kod, document.write stb. azert hagynak kivanni valot maguk utan, fontos reszek mindemellett meg nincsenek is benne (pl. prototipusos oroklodes).
23

A Good Partsot én is nagy

bamegakapa · 2013. Nov. 20. (Sze), 23.16
A Good Partsot én is nagy lelkesedéssel ajánlanám, furán hangozhat, de az egyetlen szakmai könyv, amit végigolvastam pályafutásom során :). Kezdőnek talán kicsit tömény lesz mondjuk.

Nagy Gusztáv jegyzeteiben sose jutottam el a Javascriptig, de ha tényleg ilyesmiket használ, akkor valóban nem javasolt. Ezekről jobb ha csak akkor hall az ember, ha már legalább jó közepes szinten van.
13

Elég ritka helyzet, amikor

inf · 2013. Nov. 20. (Sze), 05.33
Elég ritka helyzet, amikor tényleg szükség van a szerver időre. Mire kell ez neked?