Javascript - Content nachladen/aktualisieren

  • 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:


    Grüße,

    Stef

  • 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...

  • 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:


    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

  • 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.

  • 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.

  • 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:


    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

  • 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 )


    1. [Client] Besucher ruft Chat-Seite auf
    2. [Server] PHP generiert Server seitig ein Session
    3. [Server] Daten werden aus der Datenbank gelesen und ein Timestamp mit Anzahl der Nachrichten in der Session hinterlegt
    4. [Server] Das fertige HTML-Dokument wird an den Client gesendet
    5. [Client] Das HTML-Dokument wird gerendert
    6. [Client] Per JavaScript wird ein setTimeout() gesetzt
    7. [Client] Nach Timeout wird ein Request auf aktualisierte per JavaScript an den Server gesendet
    8. [Server] Anzahl Datensätze ( Nachrichten ) in DB wird mit Anzahl in Session verglichen ( zeitgesteuerter loop )
    9. [Server] Bei unterschiedlicher Anzahl werden alle Nachrichten neu aus DB gelesen und an den Client gesendet
    10. [Client] Verarbeitet den Response und füllt die Chatbox mit allen Nachrichten
    11. 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

  • Hey Arne,


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


    Ich habe das nun so umgesetzt:


    Was sagtst du dazu ?

    Grüße,

    Stef

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!