Javascript - Content nachladen/aktualisieren

Stef · 9. Mai 2018

Hey,

ich baue mir grad ein Chat.

Nun möchte ich, dass die Nachrichten mittels Ajax geladen und ausgegeben werden. Dies funktioniert auch soweit. Diese Funktion möchte ich aber auch gerne ausführen wenn der Button geklickt wird, sodass die neue Nachricht auch angezeigt wird. Daran scheitere ich aber. Ich habe bereits versucht die Funktion in der anderen Funktion mitaufzurufen. Da ist das Problem, dass erst nach dem click auf den Button, alle Nachrichten angezeigt werden, da wird aber alles sofort aktualisiert. Wenn ich die Funktion dann zusätzlich außerhalb aufrufe, dann habe ich wieder das Problem, dass ich die Seite 2 mal laden muss, damit ich die ganzen Nachrichten sehe.

Ich bin gerade wirklich ratlos. Habe auch viel gegoogelt. Aber leider nicht so viel nützliches dabei gewesen.

Das sind meine Codes:

JavaScript: chat.js

window.onload = function(){
var button = document.getElementById("messageButton");
var form = document.getElementById("messageForm");
button.addEventListener("click", sendMessage);
function sendMessage(e){
e.preventDefault();
getMessages();
var message = new FormData(document.querySelector("form[id='messageForm']"));
var request = new XMLHttpRequest();
request.addEventListener("load", function(){
document.getElementById("ausgabe").innerHTML = this.responseText;
});
request.open("POST", "checkAll.php", true);
request.send(message);
form.reset();
}
function getMessages(){
var req = new XMLHttpRequest();
req.addEventListener("load", function(){
document.getElementById("allMessages").innerHTML = this.responseText;
});
req.open("GET", "allMessages.php", true);
req.send();
}
getMessages();
}

Alles anzeigen

PHP: allMessages.php

<?php
try{
$dbv = new PDO("mysql:host=127.0.0.1;dbname=chat;charset=utf8", "root", "");
//Select and Fetch all Messages
$selectStmt = $dbv->prepare("SELECT username, message, created_at FROM messages");
$selectStmt->execute();
$messages = $selectStmt->fetchAll(PDO::FETCH_ASSOC);
// Output
foreach ($messages as $key => $value) {
$date = $value["created_at"];
$date = explode(" ", $date);
$time = $date[1];
$time = substr($time, 0, 8);
echo "<div class='row' id='showMessages'>";
echo "<div class='col-sm-3 border border-primary'>";
echo htmlspecialchars($value["username"]);
echo "</div>";
echo "<div class='col-sm-7 border border-primary'>";
echo htmlspecialchars($value["message"]);
echo "</div>";
echo "<div class='col-sm-2 border border-primary'>";
echo $time;
echo "</div>";
echo "</div>";
}
}catch(EXCEPTION $a){
echo "Ein Fehler ist aufgetreten: " . $a->getMessage();
exit();
}

Alles anzeigen

HTML: Formular

<section class="container">
<div id="allMessages">
</div>
<form method="post" id="messageForm" class="mt-5">
<div class="form-group">
<textarea name="message" id="message" class="form-control"></textarea>
</div>
<button name="sendMessage" id="messageButton" class="btn btn-primary form-control">Nachricht senden!</button>
</form>
<div id="ausgabe">
</div>
</section>

Alles anzeigen

Grüße,

Stef

Arne Drews · 9. Mai 2018

Da die Requests asynchron laufen, gibt es kein vorher oder nachher in dem Sinne.

Ich denke der Aufruf

Code

getMessages();

gehört in den load-Hanlder der sendMessage()-Funktion:

Code

request.addEventListener("load", getMessages );

Heißt: Wenn er mit dem Senden fertig ist, lädt er alle Nachrichten neu, wo dann auch die aktuellen mit bei sein sollten.

Ungetestet, nur auf die Schnelle gedacht...

Stef · 9. Mai 2018

Hey,

danke für deine Antwort.

Aso okay. Du hast recht. Jetzt funktioniert das automatische aktualisieren. Ich rufe die Funktion außerhalb nochmal auf, weil sonst erst beim Klick auf den Button die Nachrichten angezeigt werden.

So sieht mein JS-Code nun aus:

JavaScript

window.onload = function(){
var button = document.getElementById("messageButton");
var form = document.getElementById("messageForm");
button.addEventListener("click", sendMessage);
function sendMessage(e){
e.preventDefault();
var messageValue = document.getElementById("message").value;
if(messageValue.length !== 0){
document.getElementById("ausgabe").innerHTML = '';
var message = new FormData(document.querySelector("form[id='messageForm']"));
var request = new XMLHttpRequest();
request.addEventListener("load", getMessages);
request.open("POST", "checkAll.php", true);
request.send(message);
form.reset();
} else{
document.getElementById("ausgabe").innerHTML = "<p class='text-center text-danger'>Bitte geben Sie eine Nachricht ein!</p>"
}
}
function getMessages(){
var req = new XMLHttpRequest();
req.addEventListener("load", function(){
document.getElementById("allMessages").innerHTML = this.responseText;
});
req.open("GET", "allMessages.php", true);
req.send();
}
getMessages();
}

Alles anzeigen

Ich habe nun aber ein weiteres Problem, welches mir gerade aufgefallen ist. Die Nachrichten werden zwar, wenn ich was poste, bei mir aktualisiert, aber beim anderen User der auf der gleichen Seite ist nicht. Erst wenn dieser die Seite neu ladet sieht er es. Warum ist das so?

Es wird doch alles geladen ?

Stef

Arne Drews · 9. Mai 2018

JavaScript arbeitet rein Client seitig. Wenn du klickst, wird der Request von Deinem lokalen Rechner gesendet und der Response an den selbigen zurückgesendet. Andere Rechner im Universum bekommen das so nicht mit.

Du benötigst ein "Polling". Kurz und knapp erklärt bedeutet das:

Die Seite wird im Browser aufgebaut und nach einem definierten Zeitraum ( bspw. 10s ) wird ein Request an den Server gesendet. Der Server antwortet aber in dem Fall erst dann, wenn sich etwas ändert. Damit wären nach spätestens 10s bei allen anderen Teilnehmern auch alles aktuell.

basti1012 · 9. Mai 2018

Arne Drews schrieb:

JavaScript arbeitet rein Client seitig. Wenn du klickst, wird der Request von Deinem lokalen Rechner gesendet und der Response an den selbigen zurückgesendet. Andere Rechner im Universum bekommen das so nicht mit.

Du benötigst ein "Polling". Kurz und knapp erklärt bedeutet das:

Die Seite wird im Browser aufgebaut und nach einem definierten Zeitraum ( bspw. 10s ) wird ein Request an den Server gesendet. Der Server antwortet aber in dem Fall erst dann, wenn sich etwas ändert. Damit wären nach spätestens 10s bei allen anderen Teilnehmern auch alles aktuell.

genau das versuche ich gerade in meinen Chat auch. Wie du ja sagtest mit jg geht es halt nicht .

Kann die Db eigentlic sowas wie ein request senden ?? Wenn ein user eeine Nachricht schreibt und die Db die Nachricht empfangen hat ,das sie automatisch an alle angteschlossenen Usern die neue Nachricht schickt.

Geht das ? wenn ja wie .Bzw wie macht man das mit polling . Meine goggelrei hat mir nicht sehr geholfen.

Stef · 9. Mai 2018

Hey,

nach langem ausprobieren und Tutorials durchmachen, welche zum Teil nicht so ganz gut sind, habe ich es geschaft.

Jedoch was ich nicht gut finde ist, dass Javascript keine Tage und Monate mit einer 0 vornedran supportet. Also 06 zum Beispiel.

Habe dies jedenfalls nicht gefunden.

Ich verstehe aber dieses Polling noch nicht so richtig.

Dies ist der Code:

JavaScript: refresh

function refresh(){
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var hour = date.getHours();
var minute = date.getMinutes();
var seconds = date.getSeconds();
var datetime = year + "-0" + month + "-0" + day + " " + hour + ":" + minute + ":" + seconds;
$.ajax({
url: "allMessages.php",
type: "GET",
data: {datetime:datetime},
async: true,
cache: false,
success: function (data, textStatus) {
$("#allMessages").html(data);
var datetime = year + "-0" + month + "-0" + day + " " + hour + ":" + minute + ":" + seconds;
refresh();
},
})
.done(function() {
console.log("Polling erfolgreich");
})
.fail(function(error) {
refresh();
console.log('Error: ' + error.statusText);
});
}
refresh();

Alles anzeigen

PHP: allMessages

$currentDatetime = isset($_GET["datetime"]) ? $_GET["datetime"] : null;
try{
$dbv = new PDO("mysql:host=127.0.0.1;dbname=chat;charset=utf8", "root", "");
//Select and Fetch all Messages
$selectStmt = $dbv->prepare("SELECT username, message, created_at FROM messages");
$selectStmt->execute();
$messages = $selectStmt->fetchAll(PDO::FETCH_ASSOC);
function getLastModifiedDatetime($dbv){
$getDatetime = $dbv->prepare("SELECT created_at FROM messages");
$getDatetime->execute();
return $getDatetime->fetch(PDO::FETCH_ASSOC);
}
function newItems($dbv, $currentDatetime){
$getNewItem = $dbv->prepare("SELECT messageId FROM messages WHERE created_at >= :currentDatetime");
$getNewItem->execute(array(":currentDatetime" => $currentDatetime));
$result = $getNewItem->fetch(PDO::FETCH_ASSOC);
if(count($result) > 0){
return true;
} else{
return false;
}
}
$datetime = getLastModifiedDatetime($dbv);
if(isset($currentDatetime)){
while ($datetime <= $currentDatetime) {
usleep(2000000);
clearstatcache();
$datetime = getLastModifiedDatetime($dbv);
if(newItems($dbv, $currentDatetime)){
break;
}
}
}
// Output
foreach ($messages as $key => $value) {
$date = $value["created_at"];
$date = explode(" ", $date);
$time = $date[1];
$time = substr($time, 0, 8);
echo "<div class='row' id='showMessages'>";
echo "<div class='col-sm-3 border border-primary'>";
echo htmlspecialchars($value["username"]);
echo "</div>";
echo "<div class='col-sm-7 border border-primary'>";
echo htmlspecialchars($value["message"]);
echo "</div>";
echo "<div class='col-sm-2 border border-primary'>";
echo $time;
echo "</div>";
echo "</div>";
}
}catch(EXCEPTION $a){
echo "Ein Fehler ist aufgetreten: " . $a->getMessage();
exit();
}

Alles anzeigen

Ich möchte mal versuchen es zu erklären, wenn ich wo falsch liege, dann bitte ich um Korrektur.

Über Ajax wird die aktuelle Datetime an das PHP-Script übergeben. Wenn dies erfolgreich war oder ein Fehler auftrat wird die Funktion wieder von neu gestartet. Im PHP-Script überprüfen wir ob diese übergebende Variable auch vorhanden ist und weißen diese einer Variable zu. Zum Ausführen des Pollings benötigen wir die Datetime des letzten Datensatzes in der DB sowie eine Abfrage ob neue Datensätze dazu kamen. Diese 2 Abfragen werden in Funktionen aufgeteilt. Dann wird eine while-schleife erstellt und es wird solange die datetime des letzen Datensatzes kleiner, gleich der Datetime, welche durch Ajaxx übergeben wird, der Cache geleert, und die Funktion um den letzten Datensatz zu erhalten ausgeführt. Davor wird die Funktion usleep ausgeführt, damit da auch etwas Pause dazwischen ist und die Datenbank nicht dauerhaft arbeitet. Darüberhinaus wird überprüft ob es ein neuer Datensatz gibt und wenn ja wird die while schleife abgebrochen. Und dann wird die beim Funktionaufruf der refresh Funktion in Javascript wieder gestartet.

Trotzdem verstehe ich ehrlich gesagt nicht wie es auch andere angezeigt bekommen.

Warum gibt die Funktion newItem() immer true zurück? Auch wenn created_at kleiner als die aktuelle Datetime ist.

Grüße,

Stef

Arne Drews · 9. Mai 2018

Du brauchst kein Datetime per JS an den Server senden.

Die Verzögerung im Clientbereich wickelst Du ganz trivial mit setTimeout() ab.

Es geht nur darum, dass jeder Client, der die Chat-Seite besucht, einen Request an den Server absetzt.

Damit ist der Client erstmal durch und alles ist gut. Der Listener auf das Event load läuft im Hintergrund.

Auf dem Server wird jetzt geprüft, ob Einträge seit dem letzten gesendeten Response dazugekommen sind.

Dazu benötigt man natürlich einen Timestamp, den Du aber nicht mit JavaScript, sondern in einer Session mit PHP vorhältst und verarbeitest.

Ich kann später mal ein kleines Beispiel machen, aber im groben mal kurz und knapp ( nur eine Möglichkeit )

[Client] Besucher ruft Chat-Seite auf
[Server] PHP generiert Server seitig ein Session
[Server] Daten werden aus der Datenbank gelesen und ein Timestamp mit Anzahl der Nachrichten in der Session hinterlegt
[Server] Das fertige HTML-Dokument wird an den Client gesendet
[Client] Das HTML-Dokument wird gerendert
[Client] Per JavaScript wird ein setTimeout() gesetzt
[Client] Nach Timeout wird ein Request auf aktualisierte per JavaScript an den Server gesendet
[Server] Anzahl Datensätze ( Nachrichten ) in DB wird mit Anzahl in Session verglichen ( zeitgesteuerter loop )
[Server] Bei unterschiedlicher Anzahl werden alle Nachrichten neu aus DB gelesen und an den Client gesendet
[Client] Verarbeitet den Response und füllt die Chatbox mit allen Nachrichten
Loop Punkt 6 bis 11

Da die Logik auf allen Clients, die sich auf der Chat-Seite befinden aktiv ist, haben auch alle relativ zeitnah aktuelle Daten.

Die DB kann nichts senden, basti1012 , die ist quasi das Datenmodel, während PHP in dem Fall der Controller ist

Stef · 10. Mai 2018

Hey Arne,

Okay. Vielen Dank für deine wirklich sehr gute Erklärung.

Ich habe das nun so umgesetzt:

Was sagtst du dazu ?

JavaScript

function refresh(){
$.ajax({
url: "allMessages.php",
type: "GET",
async: true,
cache: false,
success: function (data, textStatus) {
$("#allMessages").html(data);
refresh();
},
})
.done(function() {
})
.fail(function(error) {
refresh();
console.log('Error: ' + error.statusText);
});
}
setTimeout(refresh(), 3000);

Alles anzeigen

PHP

<?php
session_start();
try{
$dbv = new PDO("mysql:host=127.0.0.1;dbname=chat;charset=utf8", "root", "");
//Select and Fetch all Messages
$selectStmt = $dbv->prepare("SELECT username, message, created_at FROM messages");
$selectStmt->execute();
$allDatasets = $dbv->prepare("SELECT count(messageId) FROM messages");
$allDatasets->execute();
$messages = $selectStmt->fetchAll(PDO::FETCH_ASSOC);
$countDataset = $allDatasets->fetch(PDO::FETCH_ASSOC);
$_SESSION["countDatasets"] = $countDataset;
function getAllDatasets($dbv){
$datasets = $dbv->prepare("SELECT count(messageId) FROM messages");
$datasets->execute();
$dataset = $datasets->fetch(PDO::FETCH_ASSOC);
return $dataset;
}
$data = getAllDatasets($dbv);
while($_SESSION["countDatasets"] < $data){
usleep(2000000);
clearstatcache();
$countDataset = getAllDatasets($dbv);
$_SESSION["countDatasets"]++;
if($_SESSION["countDatasets"] == $data){
break;
}
}
// Output
foreach ($messages as $key => $value) {
$date = $value["created_at"];
$date = explode(" ", $date);
$time = $date[1];
$time = substr($time, 0, 8);
echo "<div class='row' id='showMessages'>";
echo "<div class='col-sm-3 border border-primary '>";
echo htmlspecialchars($value["username"]);
echo "</div>";
echo "<div class='col-sm-7 border border-primary border-left-0'>";
echo htmlspecialchars($value["message"]);
echo "</div>";
echo "<div class='col-sm-2 border border-primary border-left-0'>";
echo $time;
echo "</div>";
echo "</div>";
}
}catch(EXCEPTION $a){
echo "Ein Fehler ist aufgetreten: " . $a->getMessage();
exit();
}

Alles anzeigen

Grüße,

Stef

Arne Drews · 10. Mai 2018

Das ist das Beispiel von Yannick Herzog, zumindest der JavaScript-Teil. Natürlich ist das eine Möglichkeit, sofern Du jQuery dafür einbinden willst.

Stef · 10. Mai 2018

Ja. Man könnte dies ja auch mit XMLHttpRequest erstellen?

Den PHP-Teil habe ich fast so programmiert, wie du es in deinem vorigen Beitrag beschrieben hast.

Javascript - Content nachladen/aktualisieren

Ähnliche Themen

JS Router