Div neu Laden wenn Userinput

[Daniel_Knecht]

Hallo,
ich habe für eine kleine Clan-Website einen Simplen Chat geschrieben welche nur mit PHP läuft.
Nun bin ich auf der Suche nach einer Lösung das wenn ein User (Es gibt nur eine bestimmte Anzahl User und keine Besucher/Gäste die den Chat sehen können) eine Chat Nachricht Schreibt der Chat (also der Div) bei allen Aktualisiert wird.
Mit rein PHP wird das wohl nicht funktionieren denk ich was jedoch Wünschenswert ist. Mit jQuery hätte ich auch nichts dagegen doch kenne ich mich da sehr wenig nur aus.

Ich hoffe ihr könnt mir da ein wenig unter die Arme greifen (sind auch Gewaschen )

So sieht der Div vom Chat aus:

<?php
        echo '<div id="chatWindow">';
            $chat = mysql_query("SELECT * FROM (SELECT * FROM chat ORDER BY ID DESC LIMIT ".$subaction." 25) as tbl ORDER BY ID ASC");
            while($row = mysql_fetch_assoc($chat)) {
                $message = myReplace($row['message']);
                $date = strtotime($row['date']);
                $val = mysql_fetch_assoc(mysql_query("SELECT * FROM users WHERE ID='".$row['userID']."'"));
                $name = $val['ingamename'];
                $fLetter = $name[0];
                if ($row['status'] == 0) {
                    echo '<div id="chatRow">
                        <div id="chatRow_avatar" style="background:'.$val['chatColor'].';">'.$fLetter.'</div>
                        <div id="bg_nameF">
                            <div id="bg_name">'.$val['ingamename'].'</div>
                        </div>
                        <div id="chatRow_message">
                            '.$message.'
                            <div id="chatRow_date">'.date('d.m.Y', $date).'</div>';
                            if ($_SESSION['id'] == $row['userID'] and $_SESSION['rang'] < 75) {
                                echo '<div id="chatRow_functions">
                                    <form action="" method="post" style="float:left">
                                    <input type="hidden" name="id" value="'.$row['ID'].'" />
                                    <input class="imgInput" type="image" name="editDo" src="img/icons/edit.png" title="Bearbeiten" />
                                    </form>
                                </div>';
                            } elseif ($_SESSION['rang'] >= 75) {
                                echo '<div id="chatRow_functions">
                                    <form action="" method="post" style="float:left">
                                    <input type="hidden" name="id" value="'.$row['ID'].'" />
                                    <input class="imgInput" type="image" name="editDo" src="img/icons/edit.png" title="Bearbeiten" />
                                    </form>
                                    <form action="" method="post" style="float:left">
                                    <input type="hidden" name="id" value="'.$row['ID'].'" />
                                    <input class="imgInput" type="image" name="invisible" src="img/icons/invisible.png" title="Ausblenden" />
                                    </form>
                                </div>';
                            }
                        echo '</div>
                    </div>';
                } elseif ($row['status'] == 1) {
                    echo '<div id="chatRow">
                        <div id="chatRow_messageD">
                            Ausgeblendet. Bitte Regeln beachten!';
                            if ($_SESSION['rang'] == 100) {
                                echo '<div id="chatRow_functions2">
                                    <form action="" method="post" style="float:left">
                                    <input type="hidden" name="id" value="'.$row['ID'].'" />
                                    <input class="imgInput" type="image" name="delete" src="img/icons/delete.png" title="Löschen" />
                                    </form>
                                    <form action="" method="post" style="float:left">
                                    <input type="hidden" name="id" value="'.$row['ID'].'" />
                                    <input class="imgInput" type="image" name="visible" src="img/icons/visible.png" title="Einblenden" />
                                    </form>
                                </div>';
                            }
                        echo '</div>
                    </div>';
                } elseif ($row['status'] == 2) {
                }
            }
        echo '</div>';
?>

<div id="chatWindow"> sollte dabei Aktualisiert werden.

 

[lachender_engel]

Die Lösung findest Du mit dem Einsatz von Ajax.
Hat jemand eine Nachricht geschrieben, setzte Du über Ajax auf dem Server einen Flag.
Die Clients fragen im Sekundentakt diesen Flag per Ajax ab und aktualisieren (auch mit Ajax) die Anzeige, wenn eine neue Nachricht vorhanden ist.

 

[msa1989]

@Daniel_Knecht
Was lachender_engel geschrieben hat ist eine einfach umzusetzende Lösung, aber dann muss jeder Client wie geschrieben in regelmäßigen Abständen nach einer Aktualisierung fragen.
Besser ist es der Server teilt dem Client mit dass es was neues gibt. Das geht "out-of-the-box" nicht.
Schau dir in einer ruhigen Minute mal Pusher an. Damit kannst du ganz easy mit PHP Push-Nachrichten an Clients schicken. In der kostenlosen Version nicht mehr als 100 Clients gleichzeitig und 200.000 Nachrichten am Tag. Aber ich denke das reicht für dich aus.

Das ganze funktioniert dann in etwa so:

Dein Benutzer schreibt eine Nachricht in den Chat. Das PHP-Skript was die Nachricht verarbeitet schickt gleichzeitig an Pusher die neue Nachricht. In dem Client liegt dann ein bisschen Javascript das die Nachricht von Pusher bekommt und in das DIV schreibt. Hier in etwa der zugehörige Beispielcode (von der Pusher-Dokumentation kopiert)

PHP-Skript:

require('Pusher.php');
$pusher = new Pusher("APP_KEY", "APP_SECRET", "APP_ID");
$pusher->trigger('test_channel', 'my_event', array('message' => 'hello world') );

JavaScript beim Client:

<script src="https://js.pusher.com/3.0/pusher.min.js"></script>
<script>
  var pusher = new Pusher('APP_KEY', {encrypted: true});
  var channel = pusher.subscribe('test_channel');
  channel.bind('my_event', function(data) {
    // TODO: hier muss der Code rein um in dein DIV zu schreiben
    alert('An event was triggered with message: ' + data.message);
  });
</script>

Ist wirklich extrem einfach umzusetzen und funktionert einfach

 

[lachender_engel]

Schau dir in einer ruhigen Minute mal Pusher an.

Auch cool, kannte ich bisher nicht!

 

[Daniel_Knecht]

Vielen dank für die Antworten.
Aktuell bin ich noch etwas am testen. Sollte das nicht funktionieren werde ich mir Pusher mal Anschauen.