Seite 2 von 4 ErsteErste 1234 LetzteLetzte
Ergebnis 16 bis 30 von 47
  1. #16
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.801

    AW: [Ajax] einfache Uhr mit serverseitiger Zeit

    Habe mal was gebastelt. Meintest du das so, Korbinian?

    Live: Test Uhrzeit mit JS über Offset

    Code:
    Code:
    #!/usr/bin/perl
    use strict;
    use warnings;
    use CGI;
    
    my $serverzeit = time()*1000;
    print STDOUT CGI->new->header(-charset=>'utf-8').<<HTML_DOC
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Test Uhrzeit mit JS über Offset</title>
    <script>
    function uhrzeitanzeige(szeit) {
    	var czeit = new Date();
    	var offset = czeit.getTime()-szeit;
    	document.getElementById('clientzeit').innerHTML = czeit.getTime();
    	document.getElementById('offset').innerHTML = offset;
    	var gib_zeit = function(dateobj) {
    		var h = dateobj.getHours();
    		if (h < 10) { h = '0'+h; }
    		var m = dateobj.getMinutes();
    		if (m < 10) { m = '0'+m; }
    		var s = dateobj.getSeconds();
    		if (s < 10) { s = '0'+s; }
    		return h+':'+m+':'+s;
    	};
    	var zeit_aktualisieren = function(offset) {
    		czeit = new Date();
    		czeit.setTime(czeit.getTime()+offset);
    		document.getElementById('zeit').innerHTML = gib_zeit(czeit);
    		window.setTimeout(function () {zeit_aktualisieren(offset);},1000);
    	};
    	zeit_aktualisieren(offset);
    }
    </script>
    </head>
    
    <body onload="uhrzeitanzeige('$serverzeit');">
    
    <div>Serverzeit: $serverzeit</div>
    <div>Clientzeit: <span id="clientzeit"></span></div>
    <div>Offset: <span id="offset"></span></div>
    <div id="zeit"></div>
    
    </body>
    
    </html>
    HTML_DOC
    ;

  2. #17
    j-l-n Guest

    AW: [Ajax] einfache Uhr mit serverseitiger Zeit

    Zitat Zitat von jspit Beitrag anzeigen
    Schau mal hier Textdatei zyklisch mit Ajax einlesen ([js]Textdatei zyklisch mit Ajax einlesen) rein. Ist damals ausgiebig diskutiert und getestet worden.
    Danke!

  3. #18
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.751

    AW: [Ajax] einfache Uhr mit serverseitiger Zeit

    @mikdoe: so ähnlich hatte ich mir das gedacht. Nur würde ich Datum und Stunde immer komplett vom Server holen (wegen der Sommer-/Winterzeitproblematik) und nur Minuten und Sekunden auf dem Client aktualisieren. Deswegen würde ich immer zu vollen Stunde vom Server neue Daten holen.

    Mit window.setTimeout() kann man natürlich keine Uhr machen, aber mit dem Date-Objekt wunderbar.

  4. #19
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.801

    AW: [Ajax] einfache Uhr mit serverseitiger Zeit

    Aber window.setTimeout nutze ich ja im Code auch. Und wenn man die Sekunden weg lässt und nur alle 60 Sekunden aktualisiert und das window.setTimeout unrund läuft hängt die Uhr ja irgendwann. Das meinte ich.

  5. #20
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.801

    AW: [Ajax] einfache Uhr mit serverseitiger Zeit

    Korbinian, meinst du so?

    Code:
    #!/usr/bin/perl
    use strict;
    use warnings;
    use CGI;
    
    (my $script = $0) =~ s/^.*[\\\/]//g;
    my $serverzeit = time()*1000;
    
    my $cgi = new CGI;
    if (defined $cgi->param('act') && $cgi->param('act') eq 'serverzeit') {
    	print STDOUT CGI->new->header(-charset=>'utf-8').$serverzeit;
    }
    else {
    	print STDOUT CGI->new->header(-charset=>'utf-8').<<HTML_DOC
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Test Uhrzeit mit JS über Offset</title>
    <script src="../javascript/jquery.js"></script>
    <script>
    function uhrzeitanzeige(szeit) {
    	var czeit = new Date();
    	var offset = czeit.getTime()-szeit;
    	document.getElementById('clientzeit').innerHTML = czeit.getTime();
    	document.getElementById('offset').innerHTML = offset;
    	var gib_zeit = function(dateobj) {
    		var h = dateobj.getHours();
    		if (h < 10) { h = '0'+h; }
    		var m = dateobj.getMinutes();
    		if (m < 10) { m = '0'+m; }
    		var s = dateobj.getSeconds();
    		if (s < 10) { s = '0'+s; }
    		return h+':'+m+':'+s;
    	};
    	var zeit_aktualisieren = function(offset,akt_stunde) {
    		czeit = new Date();
    		czeit.setTime(czeit.getTime()+offset);
    		document.getElementById('zeit').innerHTML = gib_zeit(czeit);
    		var stunde = czeit.getHours();
    		if (akt_stunde != stunde) {
    			document.getElementById('log').innerHTML = 'Ajax Request...'+document.getElementById('log').innerHTML;
    			jQuery.ajax ({
    				url: '$script',
    				data: 'act=serverzeit',
    				type: 'POST',
    				cache: false,
    				success: function (data) {
    					czeit = new Date();
    					offset = czeit.getTime()-data;
    					akt_stunde = stunde;
    					window.setTimeout(function () {zeit_aktualisieren(offset,akt_stunde);},1000);
    				},
    				error: function () {
    					window.setTimeout(function () {zeit_aktualisieren(offset,akt_stunde);},1000);
    				}
    			});
    		}
    		window.setTimeout(function () {zeit_aktualisieren(offset,akt_stunde);},1000);
    	};
    	var akt_stunde = czeit.getHours();
    	zeit_aktualisieren(offset,akt_stunde);
    }
    </script>
    </head>
    
    <body onload="uhrzeitanzeige('$serverzeit');">
    
    <div>Serverzeit: $serverzeit</div>
    <div>Clientzeit: <span id="clientzeit"></span></div>
    <div>Offset: <span id="offset"></span></div>
    <div id="zeit"></div>
    <div id="log"></div>
    
    </body>
    
    </html>
    HTML_DOC
    ;
    }
    Live: Test Uhrzeit mit JS über Offset

    Bliebe noch die Frage wegen der Ungenauigkeit mit windows.setTimeout. Hier wird ja sekündlich neu angezeigt. Ich möchte das bei mir aber gern nur minütlich machen, das heißt, ich setze den Wert auf 60000. Mit welcher Ungenauigkeit muss ich denn dann rechnen?

  6. #21
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.751

    AW: [Ajax] einfache Uhr mit serverseitiger Zeit

    Das window.setTimeout() würde ich immer so laufen lassen, dass es kurz nach der neuen Sekunde feuert. Das ist ja nicht schwer auszurechnen, da man die aktuelle Zeit ja sowieso schon ausgelesen hat. Wenn es dann mal etwas daneben liegt, wird das beim nächsten Mal korrigiert.

    In etwas so: Serverzeit
    Code:
    <?php
    if (array_key_exists("getTime", $_GET)){
    	date_default_timezone_set("Europe/Berlin");
    	$utime = microtime(true);
    	$milliseconds = $utime - floor($utime);
    	$ret = array(
    		"dateHour" => strftime("%d.%m.%Y %H:"),
    		"milliseconds" => (strftime("%M")*60 + strftime("%S") + $milliseconds)*1000
    	);
    	echo json_encode($ret);
    	die();
    }
    ?>
    <!DOCTYPE html>
    
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Fenstertitel</title>
    <script type="text/javascript" src="//kkjs.kkapsner.de/modules/kkjs.load.js?modules=sprintf"></script>
    <style type="text/css"></style>
    </head>
    <body>
    Server: <span id="server"><span id="serverDateHour"></span><span id="serverRest"></span></span>
    <br>
    Client: <span id="client"></span>
    <script type="text/javascript">
    function refreshServerTime(){
    	var requestTime = Date.now();
    	var offset = 0;
    	var hours = 0;
    	kkjs.ajax.advanced({
    		url: "?getTime",
    		onload: function(txt){
    			var requestDuration = Date.now() - requestTime;
    			var data = JSON.parse(txt);
    			kkjs.$("serverDateHour").innerHTML = data.dateHour;
    			
    			var now = new Date();
    			var serverNow = new Date();
    			serverNow.setMinutes(0);
    			serverNow.setSeconds(0);
    			serverNow.setMilliseconds(data.milliseconds + requestDuration/2);
    			
    			offset = serverNow - now;
    			hours = serverNow.getHours()
    			refreshServerTimePartial();
    		}
    	});
    	
    	
    	function refreshServerTimePartial(){
    		var now = new Date();
    		now.setTime(now.getTime() + offset);
    		kkjs.$("serverRest").innerHTML = kkjs.sprintf(
    			"%02d:%02d",
    			now.getMinutes(),
    			now.getSeconds()
    		);
    		
    		if (now.getHours() !== hours){
    			refreshServerTime();
    		}
    		else {
    			window.setTimeout(
    				refreshServerTimePartial,
    				1001 - now.getMilliseconds()
    			);
    		}
    	}
    }
    
    function refreshClientTime(){
    	var now = new Date();
    	
    	kkjs.$("client").innerHTML = kkjs.sprintf(
    		"%02d.%02d.%04d %02d:%02d:%02d",
    		now.getDate(),
    		now.getMonth() + 1,
    		now.getFullYear(),
    		now.getHours(),
    		now.getMinutes(),
    		now.getSeconds()
    	);
    	window.setTimeout(
    		refreshClientTime,
    		1001 - now.getMilliseconds()
    	);
    }
    
    refreshServerTime();
    refreshClientTime();
    </script>
    </body>
    </html>
    Geändert von kkapsner (08-02-2014 um 01:49 Uhr)

  7. #22
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.801

    AW: [Ajax] einfache Uhr mit serverseitiger Zeit

    Korbinian, ich würde das gern umschreiben auf jQuery oder reines JS.
    Was macht kkjs.ajax.advanced() ? Ist das ein ganz normaler Ajax Request?

  8. #23
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.801

    AW: [Ajax] einfache Uhr mit serverseitiger Zeit

    Hab es mal umgebaut, um zu erreichen, dass
    - der unnötige Ajax Request zum Start wegfällt
    - jQuery als Lib ausreicht

    PHP-Code:
    <?php
    date_default_timezone_set
    ("Europe/Berlin");
    $utime microtime(true);
    $milliseconds $utime floor($utime);
    $ret = array(
        
    "dateHour" => strftime("%d.%m.%Y %H:"),
        
    "milliseconds" => (strftime("%M")*60 strftime("%S") + $milliseconds)*1000
    );
    $out json_encode($ret);

    if (
    array_key_exists("getTime"$_GET)){
        echo 
    json_encode($out);
    }
    else {
    echo <<<EOT
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Fenstertitel</title>
    <style type="text/css"></style>
    <script src="../javascript/jquery.js"></script>
    <script>
    function refreshServerTime(start){
        var requestTime = Date.now();
        var offset = 0;
        var hours = 0;
        var losgehts = function(data) {
            var requestDuration = Date.now() - requestTime;
            jQuery('#serverDateHour').html(data.dateHour);
            
            var now = new Date();
            var serverNow = new Date();
            serverNow.setMinutes(0);
            serverNow.setSeconds(0);
            serverNow.setMilliseconds(data.milliseconds + requestDuration/2);
            
            offset = serverNow - now;
            hours = serverNow.getHours()
            refreshServerTimePartial();
        };
        if (start) {
            losgehts(start);
        }
        else {
            jQuery.ajax ({
                url: 'uhrzeit_mik.php?getTime',
                data: '',
                dataType: 'json',
                type: 'POST',
                cache: false,
                success: function(data) {
                    losgehts(data);
                },
                error: function() {
                }
            });
        }
        function refreshServerTimePartial(){
            var now = new Date();
            now.setTime(now.getTime() + offset);
            var m = now.getMinutes();
            var s = now.getSeconds();
            if (m < 10) {m='0'+m}
            if (s < 10) {s='0'+s}
            jQuery('#serverRest').html(m+':'+s);
            
            if (now.getHours() !== hours){
                refreshServerTime();
            }
            else {
                window.setTimeout(
                    refreshServerTimePartial,
                    1001 - now.getMilliseconds()
                );
            }
        }
    }
    </script>
    </head>
    <body>
        Server: <span id="server"><span id="serverDateHour"></span><span id="serverRest"></span></span>
    <script>
    refreshServerTime(jQuery.parseJSON('
    $out'));
    </script>
    </body>
    </html>
    EOT;
    }
    ?>
    Live: Fenstertitel

    Korbinian, habe ich das richtig übersetzt?

  9. #24
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.751

    AW: [Ajax] einfache Uhr mit serverseitiger Zeit

    Sieht gut aus.

    Aber dadurch, dass du den ersten HTTP-Request weggelassen hast, hast du keine Information über die Latenzzeit zwischen Server und Client. Das sind zwar nicht besonders viel, aber es kann gerne mal eine halbe Sekunde sein (v.A. wenn vorher noch eine Bibliothek geladen werden muss) - bei dir sind das jetzt insgesamt ca. 200ms

    PS: in PHP Heredocs zu verwenden finde ich nach wie vor grausam, unnötig und schlecht lesbar.
    PPS: diese Zeile ist unnötig kompliziert:
    Code:
    refreshServerTime(jQuery.parseJSON('$out'));
    - $out ist ja schon JSON und kann deswegen direkt ins JS geschrieben werden:
    Code:
    refreshServerTime($out);

  10. #25
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.801

    AW: [Ajax] einfache Uhr mit serverseitiger Zeit

    Aber die Latenzzeit ist doch nur wichtig, dass der Request rechtzeitig vor der nächsten vollen Stunde gemacht wird, oder?

    Zweite Frage: Wenn ich die Sekunden nicht haben möchte, reicht es dann, unten beim window.setTimeout einfach 60001 - now.getSeconds() zu schreiben und natürlich die Ausgabe zu ändern?

  11. #26
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.751

    AW: [Ajax] einfache Uhr mit serverseitiger Zeit

    Die Latenzzeit is wichtig, damit die Uhr richtig geht, da du ja beim Server die Zeit abfragst, dann die Daten an den Client schickst, dort das HTML (teilweise) aufbaust und dann erst das JS startest. Dann ist aber schon etwas Zeit vergangen. Kann in Extremfällen sogar mal in den Sekundenbereich kommen - wobei die Abschätzung, dass die Hälfte der Kommunikationszeit dann auf die Serverzeit draufaddiert werden muss, dann auch nicht mehr beosnders genau ist.

    Der nächste Request sollte in der Sekunde nach der nächsten vollen Stunde gemacht werden.

    60001 klingt theoretisch gut, aber da würde ich eventuell trotzdem alle 10 Sekunden aktualisieren.

    EDIT: hab' gerade gesehen, dass das nicht besonders toll aussieht beim Stundenwechsel... ich würde da jetzt kurzzeitig ein "resync" oder sowas anzeigen.
    Geändert von kkapsner (09-02-2014 um 01:33 Uhr)

  12. #27
    j-l-n Guest

    AW: [Ajax] einfache Uhr mit serverseitiger Zeit

    Könnten wir vielleicht noch eine Version erstellen, die die von kkapsner zuletzt genannten Aspekte berücksichtigt und mit reinem JS (ohne jQuery) läuft?

  13. #28
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.801

    AW: [Ajax] einfache Uhr mit serverseitiger Zeit

    Bei mir ist das aktuell so in Betrieb:

    HTML-Code:
    function uhr(data){
    	var requestTime = Date.now();
    	var offset = 0;
    	var hours = 0;
    	var tag = new Array('Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag');
    	var losgehts = function(data) {
    		var requestDuration = Date.now() - requestTime;
    		jQuery('#maindatumzeit_datum').html(data.dateHour);
    		var now = new Date();
    		var serverNow = new Date();
    		serverNow.setMinutes(0);
    		serverNow.setSeconds(0);
    		serverNow.setMilliseconds(data.milliseconds + requestDuration/2);
    		jQuery('#maindatumzeit_tag').html(tag[serverNow.getDay()]);
    		offset = serverNow - now;
    		hours = serverNow.getHours()
    		refreshServerTimePartial();
    	};
    	if (!data) {
    		requestTime = Date.now();
    		jQuery.ajax ({
    			url: '/pfad/script.ext',
    			data: 'deineparameter',
    			dataType: 'json',
    			type: 'POST',
    			cache: false,
    			success: function(dataneu) { losgehts(dataneu); },
    			error: function() { refreshServerTimePartial(); }
    		});
    	}
    	else { losgehts(data); }
    	function refreshServerTimePartial(){
    		var now = new Date();
    		now.setTime(now.getTime() + offset);
    		var h = now.getHours();
    		var m = now.getMinutes();
    		if (h < 10) {h='0'+h}
    		if (m < 10) {m='0'+m}
    		jQuery('#maindatumzeit_zeit').html(h+':'+m);
    		if (h != hours) { uhr(); }
    		else {window.setTimeout(refreshServerTimePartial,(60-now.getSeconds())*1000);}
    	}
    }
    Aufruf:
    HTML-Code:
    <script>uhr({"dateHour":"08.04.2014","milliseconds":346421.761989594});</script>
    Die zwei Variablenwerte werden dynamisch vom Serverscript eingesetzt.

    Du brauchst also nur den Ajax Request und die jQuery('selector').html()'s ersetzen. Und natürlich die ID's.
    Geändert von mikdoe (19-05-2014 um 08:54 Uhr) Grund: Code Fehler korrigiert siehe #32

  14. #29
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.751

    AW: [Ajax] einfache Uhr mit serverseitiger Zeit

    Wobei ich AJAX nicht ohne Framework machen würde... das ist einfach zu nervig...

  15. #30
    j-l-n Guest

    AW: [Ajax] einfache Uhr mit serverseitiger Zeit

    Zitat Zitat von kkapsner Beitrag anzeigen
    Wobei ich AJAX nicht ohne Framework machen würde... das ist einfach zu nervig...
    Ja, mit jQuery ist das schon so in Ordnung. Mir ging es vor allem nur nochmal darum, dass man die jetzige fertige Version hier findet.
    Danke für's Posten, mikdoe!

Seite 2 von 4 ErsteErste 1234 LetzteLetzte

Ähnliche Themen

  1. Antworten: 0
    Letzter Beitrag: 17-08-2012, 14:19
  2. serverseitiger Aufruf einer JS-Funtion
    Von Daktari im Forum JavaScript
    Antworten: 8
    Letzter Beitrag: 29-02-2012, 00:58
  3. AJAX Request Zeit
    Von aazmitia im Forum Serverseitige Programmierung
    Antworten: 4
    Letzter Beitrag: 14-07-2008, 12:03
  4. ! Einfache Blätterunktion!!
    Von Iceman8712 im Forum Serverseitige Programmierung
    Antworten: 17
    Letzter Beitrag: 24-08-2005, 18:46
  5. aus Unix zeit normale zeit
    Von MasterD im Forum Serverseitige Programmierung
    Antworten: 1
    Letzter Beitrag: 24-04-2001, 10:07

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •