Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Div neu Laden wenn Userinput“

Daniel_Knecht

PSD-Mitglied

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 :D)

So sieht der Div vom Chat aus:
PHP:
<?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

Aktives Mitglied

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

Bin da

@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:
PHP:
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:
HTML:
<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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.155
Beiträge
2.581.854
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben