Comet Chat Beispiel mit PHP + MySQL

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • Hier wird ein reales Beispiel mit AJAX und Comet unter Verwendung von PHP & MySQL entwickelt.
    Das Tutorial setzt voraus, dass ihr bereits die Grundlagen von Comet hier erlernt habt: [wiki]AJAX / Comet Chat Tutorial[/wiki]

    == JavaScript ==
    Wir ändern unsern Chat Konstruktor Aufruf ab. Wir werden nicht mehr mit JavaScript Zeitstempeln, sondern mit Primärschlüsseln arbeiten:

    Source Code

    1. var chat = new Chat('chat', 'example3-backend.php');


    == PHP Backend ==
    Unser PHP Backend wird versuchen die Daten aus der Datenbank zu holen. Falls der lastupdate nicht angegeben wird, so zeigen wir die letzten 10 Nachrichten an.
    Um die Serverlast zu reduzieren werden die Verbindungen maximal 30 Sekunden gehalten.

    Source Code

    1. <?php
    2. require('connect.php');
    3. function getNewMessagesSince($timestamp, $limit) {
    4. $lastupdate = array();
    5. $html = '';
    6. // get last ten messages
    7. if($timestamp == -1) {
    8. $sql = 'SELECT id, body FROM nachrichten ORDER BY id DESC LIMIT '.intval($limit);
    9. }
    10. // get latest messages
    11. else {
    12. $sql = 'SELECT id, body FROM nachrichten WHERE id > '.intval($timestamp).' ORDER BY id DESC LIMIT '.intval($limit);
    13. }
    14. $res = mysql_query($sql);
    15. while ($row = mysql_fetch_array($res)) {
    16. $lastupdate[] = $row['id'];
    17. $html .= '<li>'.htmlentities($row['body'], ENT_QUOTES, 'UTF-8').'</li>';
    18. }
    19. if(count($lastupdate)) {
    20. rsort($lastupdate);
    21. return array(
    22. 'lastupdate' => array_shift($lastupdate),
    23. 'html' => $html
    24. );
    25. }
    26. return false;
    27. }
    28. $lastupdate = isset($_POST['lastupdate']) ? $_POST['lastupdate'] : null;
    29. $limit = isset($_POST['limit']) ? $_POST['limit'] : 10;
    30. $timeout = time() + 10;
    31. while(!($row = getNewMessagesSince($lastupdate, $limit)) && time() < $timeout) {
    32. usleep(200000);
    33. }
    34. echo json_encode($row);
    Display All


    == Neue Einträge ==
    Um das Beispiel "rund" zu machen, binden wir ein Formular ein, dass wir in einem iframe laden:
    === Iframe ===
    Der Iframe muss in der Hauptseite platziert werden:

    Source Code

    1. <iframe src="example3-add.php" style="width:300px;height:300px;position:absolute;right:0px"></iframe>


    === Formular ===

    Source Code

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de">
    3. <head>
    4. <title>AJAX &amp; Comet</title>
    5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    6. </head>
    7. <body>
    8. <?php
    9. if(count($_POST)) {
    10. require('connect.php');
    11. $sql = 'INSERT INTO nachrichten (body) VALUES ("'.mysql_real_escape_string($_POST['body']).'")';
    12. mysql_query($sql) or die(mysql_error());
    13. }
    14. ?>
    15. <form method="post">
    16. <textarea name="body"></textarea>
    17. <input type="submit" />
    18. </form>
    19. </body>
    20. </html>
    Display All


    == Download ==
    Ladet euch das Archiv hier herunter. Die betroffenen Zeilen sind die example3-* Files: demo.easy-coding.de/ajax/comet-chat-tutorial/download.zip

    7,468 times viewed