Webseiten-Inhalt zyklisch aktualisieren
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aktualisieren
anfrage
beispiel
code
datenbank
eigentlichen frage
fangen
fehlerhaft code
folgender ablauf
kette
methode
neuigkeit
null
problem
schleife
seminar
server
setzen
sprache
url
-
Hallo zusammen,
ich programmiere noch nicht sehr lange (ca. 5 Monate), und erstmal nur PHP, HTML, SQL (PDO).
Als nächstes würde ich gerne CSS und JavaScript lernen, kennt ihr da gute Tutorials?
Naja, nun zu meiner eigentlichen Frage:
Es gibt ja verschiedenste Browsergames... Die meisten davon sind Animationen, stimmts? Ich frage mich, wie sich diese aktualisieren (da gibt es zum Beispiel einen Chat oder diverse Countdowns, z.B. beim Bau von Gebäuden, die müssen ja aktuell sein)
- Wie geht das?
Ich habe erstmal vor, einen Chat, einige Datenbank-Abfragen und ein PN-System auf meiner Seite einzubauen.
Ansich ist das ja mit PHP und Datenbanken kein Problem, kriege ich auch hin...
Aber wie aktualisiere ich das Ganze dann (also so, dass jeder Benutzer die Änderungen, zum Beispiel eine neue Chatnachricht) sofort, automatisch sieht, ohne die Seite manuell (mit F5) zu aktualisieren?
Ich habe mich natürlich schon informiert, bin dabei auf die 2 Möglichkeiten:
- Long Polling
und
- WebSockets
gestoßen.
Ich habe die beiden Techniken auch teilweise verstanden, allerdings werden hier bei Lima-City ja keine WebSockets unterstützt - Warum eigentlich?
Und Long Polling sieht ziemlich kompliziert aus, da ich ja eben noch kein JavaScript gelernt habe
.
Kennt ihr also einfachere Möglichkeiten (vllt. mit einer Sprache, die ich schon kann, oder mit einer einfachen, schnell zu erlernenden Sprache), um mein Problem zu lösen?
Könnt ihr mir andernfalls gute JS-Tutorials empfehlen oder mir hier einfach mal Long Polling am praktischen Beispiel erläutern, sodass ich das dann gleich einbauen kann?
Vielen Dank schon mal für eure Hilfe, egal wie!
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo,
das mit Long Polling bekommst du sicher hin, also fangen wir klein an:
Zuerst einmal musst du Ajax verstehen. Bei Ajax ruft Javascript im Hintergrund eine bestimmte Seite vom Server ab und wertet dann das Ergebnis aus. So könntest du z.B. regelmäßig beim Server anfragen, ob es Neuigkeiten gibt.
Ajax-Tutorial mit Beispiel
(Auf der Seite kannst du dich mal umschauen, es gibt auch Tutorials zu CSS und zu Javascript allgemein.)
Zu Long Polling wird das ganze, wenn der Server erst dann etwas sendet, wenn es auch Neuigkeiten gibt.
Also ganz grob, etwa folgender Ablauf in PHP:
<?php for ($i=0; $i<=30; $i++) { if (neuigkeitenVorhanden()) { neuigkeitenSenden(); exit; } if ($i<30) sleep(1); } sendeInfoNichtsNeues();Ich habe die Zählschleife eingebaut, damit es keine Timeouts gibt, falls längere Zeit nichts gesendet werden muss. Der Browser muss halt nach jeder Antwort wieder neu anfragen.
Vorteil von Long Polling gegenüber regelmäßigen Ajax-Requests ist einfach, dass die Internetleitung entlastet wird. Es ist dann das PHP-Skript selbst, welches z.B. im Sekundentakt nach neuen Nachrichten in der Datenbank schaut.
Da du auch Countdowns erwähnt hast: Diese interagieren normalerweise überhaupt nicht mit dem Server. Sie bekommen nur einen Startwert und werden dann von Javascript bis auf 0 herunter gezählt. -
Also um es grob zu sagen die aktualisierung des Inhalts ohne die Seite neu zu laden funktioniert nur mit Javascript (Css ist ein Stylesheet also für die gestalltung zuständig und für sonst nichts).
Solltest du jetzt wollen das sich dein Inhalt aktualisiert wenn du z.B. eine Neue seite hinzufügst kannst du das wie folgt machen:
BSP: Im ordner "test" liegen 2 datein eine "index.html" und eine "test-1.html":
Javascript:
<script> function _(el){ return document.getElementById(el); } function result(request){ if(request.status != 0 && request.responseURL != ""){ if(request.status >= 200 && request.status < 300) { _("file_list").innerHTML = request.responseText; }else{ _("file_list").innerHTML = "Es ist ein Fehler aufgetreten... Fehlercode: " +request.status; } }else{ _("file_list").innerHTML = "Es ist ein Fehler aufgetretten warten sie auf den nächsten Versuch"; } } window.onload = function(){ test_now(0,null); } function data_send(link){ var request = new XMLHttpRequest(); request.open("GET",link); request.addEventListener("load", function(){result(request);}); request.addEventListener("error", function(){result(request);}); request.addEventListener("abort", function(){reslut(request);}); request.send(); } function test_now(files,names){ if(files == 0){ data_send("link.zu.dem-server.wo.das/php/skript/lagert.php?send=all"); }else{ var link_ende = "?send=types"; for(var i = 0; i < names.length; i++){ var linkende += "&"+i+"="+names[i]; } var link_send = "link.zum.server-wo-das.php/skript/lagert.php"+link_ende; data_send(link_send); } next_time_call(); } function get_all_past_files(){ var inh = _("file_list").innerHTML; var array = inh.split(","); return array; } function next_time_call(){ setTimeout(function(){ var array = get_all_past_files(); test_now(array.length,array); },30000); //Angabe der zeit in Milisekunden sprich 30000 mSek = 30 Sek } </script>
PHP:
<?php $dir = "name-zum/verzeichnis/das/gescannt.werden/soll"; if(isset($_GET["send"])){ $send = $_GET["send"]; if($send == "all"){ $scan = scandir($dir); $echo_out = "split_away_after"; foreach($scan as $scan_test){ if($scan_test != "." && $scan_test != ".." && $scan_test != null && !empty($scan_test) && $scan_test != ""){ //Hier werden sämtliche möcglichkeiten überprüft wo du eine fehlerhafte ausgabe bekommen könntest $echo_out .= ",".$scan_test; } } $echo_out = explode("split_away_after,",$scan_test); //Das kein "," dafor oder hinter der gesammten Kette an Dateinahmen steht $echo_out = $echo_out[1]; echo $echo_out; }else{ $array_now = array(); //Möglichkeit 1: for($i = 0; isset($_GET[$i]); $i++){ //Das isset($_GET[$i]) dürfte in der for-schleife funktionieren wenn nicht nimm möglichkeit zwei array_push($array_now,$_GET[$i]); } //Möglichkeit 2: for($i = 0; $i >= 10; $i++){ //variable i zurücksetzen auf 0 $i = 0; if(isset($_GET[$i])){ array_push($array_now,$_GET[$i]); }else{ //Setzen von i auf 10 damit die for-Schleife verlassen wird $i = 10; } } $array_first = $array_now; $scan = scandir($dir); foreach($array_now as $test_now){ if(!in_array($test_now,$scan)){ $array_now[$test_now] = null; //Zurücksetzen des wertes } } if($array_first == $scan){ return ""; }else{ $echo_out = "split_away_after"; foreach($scan as $scan_test){ if($scan_test != "." && $scan_test != ".." && $scan_test != null && !empty($scan_test) && $scan_test != ""){ //Hier werden sämtliche möcglichkeiten überprüft wo du eine fehlerhafte ausgabe bekommen könntest $echo_out .= ",".$scan_test; } } $echo_out = explode("split_away_after,",$scan_test); //Das kein "," dafor oder hinter der gesammten Kette an Dateinahmen steht $echo_out = $echo_out[1]; echo $echo_out; } } }else{ echo "Die Anfrage war Fehlerhaft"; } ?>
HTML Code:
<html> <head> <script src="link.zu.den.oberen/javascript/code"></script> </head> <body> <div id="file_list">No files</div> </body> </html>
Durch dieses "Programm" wird deine Seite alle 30 sec (anpassbar) getestet und falls sich was geändert hat wird dies sofort gezeigt.
Hierbei ist jedoch ein sicherheitsrisiko das das ganze über die "GET"-Methode gemacht wird und nicht über die "POST" - Methode, dies kann man aber nachträglich noch ändern nur wenn du keine Passwörter etc. überträgst dann dürfte das egal sein.
Dies sollte dein grundgerüst sein du kannst dies beliebig verändern -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage