reload Div (chat)

JenniB

Newbie
Registriert
Aug. 2022
Beiträge
3
Hallo ihr Lieben,

ich bin noch ganz neu im Thema und kann mit vielen Antworten aus dem großen weiten Netz einfach nix anfangen. Oft fehlt es mir am Verständnis, wo ich den code einfügen muss (php-tag, html oder doch script).. Ich wäre euch daher für eine ausführliche erklärung sehr dankbar.

aber nun mal ganz von vorn... Ich möchte ganz klassisch einen online gruppenchat erstellen.

Ich habe bereits geschafft ein Login zu erstellen und auch das Nachrichten geschrieben und an die DB gesendet werden können. Auch wird beim laden der chat seite (die seite, die nach erfolgreichen Login geladen wird), der bisherige Chatverlauf angezeigt wird. Der div dazu hat auch ein Scrollbalken und es ist automatisch nach unten gescrollt. Die Nachrichten sind nach links ausgreichtet, wenn es nachrichten sind, die nicht vom angemeldeten User stammen. Hat der angemeldete User diese Nachrichten selbst geschrieben, so sind die nachrichten recht ausgerichtet.
Ich finde da habe ich schon recht viel geschaffft.. naja bis auf..... das sich das Div des Chatverlaufs automatisch refresht. Aktuell sieht der Nutzer halt nur ein aktuellen verlauf, wenn er direkt angemeldet wird und danach immer nur dann, wenn er selbst etwas sendet.

Wie nehme ich die automatische aktualisierung vor... ich habe in Zeile 111-118 das script, aber das funktioniert nicht, oder ich bin zu blöd in der anwendung (was mich nicht wundern würde) ;)

hier mal mein bisheriger Code der chat.php

Code:
<?php
   session_start();
?><html>
<head>
<title>Insert/Update-Formular</title>
</head>
<body onLoad='letzteselement.scrollIntoView()'>
<?php
    /* --- Datenbank verbinden --- */
    if($conn = @mysql_connect("localhost","root","")) {
    mysql_select_db("mydb");
        /* --- Parameter initialisieren --- */
        //$Nickname = "";
        //$Nachricht = "";
        //$schalter = "";
        /* --- Parameter auslesen --- */
        extract($_GET);
        
        
        /* --- Nachrichten Senden--- */
        if($schalter=="Senden") {
            $user=$_SESSION['username'];
            
            /* --- Abfrage der U_ID --- */
            if ($AbfrageUID = mysql_query("SELECT  U_ID FROM user WHERE Nickname='$user'")){
            
                while($row = mysql_fetch_assoc($AbfrageUID)) {
                        $uID=$row['U_ID'];
                        
                }
                /*--- In DB schreiben --- */
                $result = mysql_query
                ("INSERT INTO inhalt (user1,Time,Inhalt) VALUES ($uID,now(), '$Nachricht')");
                //PRINTF("$Nachricht");
            }

    /*--- Nachrichten empfangen ---*/
        } if($schalter=="Empfangen"){
        }   
    }else {
    printf
    ("<p>Fehler beim Verbindungsaufbau zum MySQL server! %s</p>\n",
    mysql_error());
    }
    //mysql_close($conn);
    /* --- HTML-Formular ausgeben --- */
?>
<div id="root">
    <div id="head">
    <?php
    $user=$_SESSION['username'];
    echo "<h2 align='center'>";
     echo "Herzlich Willkommen $user";
     echo "</h2>";
    ?>
        <!--<h2 align="center">Herzlich Willkommen im Chat</h2>-->
        
    </div>
    <div id="navigation"></div>
    
    <div id="empfangen">
        <table>
            <form action="" method="get">
                <tr><td><h3>Chatverlauf:</h3>
                
                <?php
                //extract($_GET);
                    if ($result = mysql_query("SELECT inhalt.Inhalt, inhalt.time, inhalt.user1, user.Nickname FROM inhalt INNER Join user on inhalt.user1= user.U_ID")){
                        echo "<div name='chatverlauf' id='chatverlauf' style='width:300px;height:150px;line-height:1em;overflow:auto;padding:5px;'>";
                        while($row = mysql_fetch_assoc($result)) {
                            $nickname=$row['Nickname'];
                            $ausgabe=$row['time']. $row['Nickname'].'<br>'.$row['Inhalt'];
                            if ($nickname == $user){
                                echo "<p align='right'>";
                                echo $ausgabe;
                                echo "</p>";
                            }else{
                                echo "<p align='left'>";
                                echo $ausgabe;
                                echo "</p>";
                            }
                        }
                        echo "</div>";
                    }
                ?>
                </td></tr>
                <tr><td>
                    <input name="schalter" type="submit" value="Empfangen">
                </td></tr>
            </form>
        </table>
    </div>
    
    <!--Nachrichten senden -->
    <div id="senden">
        <table>
            <form action="" method="get">
                <!--<tr><td>Nickname:<br>-->
                <!--<input name="Nickname" type="text" value=""></tr></td>-->
                <tr><td>Nachricht schreiben:<br>
                <input name="Nachricht" type="text" value="">
                </td></tr>
                <tr><td>
                <input name="schalter" type="submit" value="Senden">
                </td></tr>
            </form>
        </table>   
    </div>
</div>
<!--Javascript -->
<script type="text/javascript">
    <!-- automatisch nach Unten scrollen)-->
    document.getElementById('chatverlauf').scrollTop = 9999999;
    <!-- automatisch updaten von div Chatverlauf/empfangen-->
    window.setInterval(function(){                     
    $( "#empfangen" ).load(window.location.href + " #empfangen" );
    },1000);
</script>

<?php mysql_close($conn);?>
</body>
</html>

Ich danke euch für jeden hinweis... Ich weiß es ist (noch) schrecklich, da ich alles in einem Dokument habe.. aber das teilen in verschiedene Dokumente möchte ich erst vornehmen, wenn es soweit klappt.

Danke

LG Jenni
 
Mit kurzem durchgucken: Ansich ist es doch okay. Was an der Variante fehlt, ist dass das Ergebnis Tatsächlich nicht nur in den Speicher zu laden sondern auch das vorhandene DIV zu ersetzten mit dem "Neuen" - also anzuzeigen, dass ist ein ziemlich klassischer Fehler!? Also deine "Empfangen"-Funktion wird ständig ausgeführt?!
Weitergedacht: Je nach dem was du noch vor hast, lädst du dann aber jede Sekunde einen Chatverlauf, der ggf. ziemlich groß sein kann bzw. auch unötig lädt. Grundsätzlich modularer und abstrakter Aufbauen in der Zukunft.
 
Danke für deine schnelle Antwort

Also wenn ich auf den schreiben Button klicke, dann wird das div bzw die ganze seite ja mit den übergabeparametern geladen (so habe ich mir das zumindest gedacht, das genau das im Hintergrund passiert). Und tatsächlich wird auch direkt ins div die Nachricht reingeschrieben. Also ich drücke den senden Button und das div hat direkt diese Nachricht mit "aufgenommen". Nur wenn dies nun noch ein anderer Gesprächspartner macht, sehe ich es eben nicht.
Ich glaube ich habe mich da nicht richtig ausgedrückt...
Ich versuche es mal so zu erklären:
Ich bin User1.. ich schreibe etwas-> meine Seite inkl div werden erneuert.
Dem user2 der zeitgleich online ist, wird meine Nachricht aber nicht automatisch angezeigt.. Sollte er jetzt etwas schreiben, dann aktualisiert sich sein Fenster auch und er bekommt meine uns seine Nachricht angezeigt.
Ich hätte es jetzt gerne so: user1 schreibt was und die neue Nachricht soll bei user1 und user2 direkt angezeigt werden..
Es muss doch iwas geben, das die Datenbank von sich aus sagt:"ey ich wurde erneuert, alles session gebe ich die neue nachricht aus" . Und ja ich gebe dir absolut recht dieses ständige Anfragen (ohne das ggf etwas erneuert werden kann, ist mist). Ich wusste mir aber nicht zu helfen und dachte das wäre erstmal der "einfache" weg. Bevor uch über ne serverseitige push-variante nachdenken.. 🙈
Gerne nehme ich auch beide Wege hier auf, wenn du so freundlich wärst. Ich kann nur dazulernen 😇
LG und nochmals danke
 
Ne, ich habs schon verstanden was du hin gecoded hast. ;)

1. Nein, das passiert nicht im Hintergrund, man kann bspw. mit JS den Browser anweisen. Detailiierter im DOM befinden sich alle "Objekte" (DIVs, Images, Text, ...) Da solltest du dich ein bisschen in Browser-Debugging einlesen, damit du es dann auch selber nachprüfen kannst - mal die wichtigesten von-Haus-aus-dabei-sind-Funktionen. Mit JS kann man dann recht simpel den Browser anweisen, gewissen Code im DOM auch visuell zu ändern:
Dazu musst du ein DIV erzeugen mit JS. Das DIV definieren. Das DIV erneuern. Tipp: Gib deinem DIV eine eindeutige Erkennung.

2. Naja, ständige Anfragen auch genannt Polling sind schon sehr beliebt, aber definitiv meistens nicht Elegant. Grundsätzlich ist der Push-Ansatz aber zu 99,9% immer falsch. Anders ausgedrück bitte immer den Pull-Ansatz verwenden. Man hat "normal" einen Server der im öffentlichen Netz erreichbar ist. Der Client hingegen muss immer geschützt werden, also der Server oder andere soll niemals den Client kontaktieren können. D.h. der Client holt sich alles bei Bedarf vom Server.

3. Mach dir das Leben erstmal nicht zu schwer - FullStack-Informatiker bekommen schließlich nicht umsonst nen gutes Gehalt. ;)
 
Falls du dir nicht dir Mühe machen willst mit Websockets herum zu fummeln dann machs mit long polling. Statt alle 10s abzufragen schickst du einen Request raus, der wird vom Server erst beantwortet wenn es Neuigkeiten gibt (Loop läuft serverseitig) und direkt danach schickt der Client den nächsten Request. Nach 10 oder 20s ohne neue Daten lässt du den Server einfach ein Timeout rauswerfen und auch hier schickt der Client sofort den nächsten Request. Damit hast du das maximale Delay und die Menge der Requests stark verkürzt.
 
Hallo, also das refreshen habe ich zwar immernoch nicht hinbekommen, aber nun gut. Ich schaffe es ein Div mit scrollbalken, welches sich alle 3 sek refresht zu erstellen, aber dann wird im scrollbalken nicht automatisch nach unten gescrollt. ergo ich habe immer die ältesten nachrichten im sichtbereich und muss händisch runterscrollen. Das ist natürlich genauso doof wie auf den empfangenbutton zu klicken,


Könnt ihr mir evtl ne seite für das Polling/Pushansatz nennen. Damit ich mich da mal einlesen kann. Gerade wenn es ums thema: Vor/Nachteile geht. Ich weiß nicht recht wonach ich da suchen soll.
und bekomme via google die dollsten sachen angezeigt, aber nix speziell zu DB

Danke
 
Hi, ich finds Klasse, dass du dich damit weiterbeschäftigst - da machst du alles richtig! Du hast doch ein prima Grundverständnis und gönne dir die Erfolge, die du dir selbst erarbeitest!

Ich finde du vermischt zu viel für dein Niveau, dass verwirrt dich mehr als das es dir hilft. Grundsätzlich würde ich mal die Tutorials auf https://www.w3schools.com/ angucken (da gibts mitlerweile auch diverse Alternativen, z.B. https://www.codewars.com/). Beispiele/Konzepte gibts übrigens zuhauf auf Github, CodePen, Medium usw.

Wenn du wirklich was aus dem Boden stampfen möchtest, dann empfehlen sich auch diverse Libraries wie jQuery und Bootstrap - aber dir fehlen grundsätzlich noch einige Basics und Routinen. Wenn ich mehr weiß wohin die Reise gehen soll, dann kann man auch passendere Ratschläge geben - aber ich finde du machst es doch ganz ordentlich.
 
Deine Frage wurde grundsätzlich schon beantwortet, aber ich will Dir noch einen Tipp geben: vertraue in deinen Programmen niemals blind dem User-Input:
$result = mysql_query
("INSERT INTO inhalt (user1,Time,Inhalt) VALUES ($uID,now(), '$Nachricht')");
Ich würde Dir empfehlen hier vor dem Veröffentlichen des Scripts noch sicherzustellen, dass Du gegen SQL Injections in $Nachricht sicher bist. Auch wenn Du Dir denkst dass kein Hahn nach Deinem Script kräht - wenn dort Gäste posten können und die URL exponiert ist, dann ist es nur eine Frage der Zeit.

Viel Spaß mit PHP und mach weiter so!
 
Zurück
Oben