Comet Chat Beispiel mit PHP + MySQL

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

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

    Quellcode

    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.

    Quellcode

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


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

    Quellcode

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


    === Formular ===

    Quellcode

    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>
    9. <?php
    10. if(count($_POST)) {
    11. require('connect.php');
    12. $sql = 'INSERT INTO nachrichten (body) VALUES ("'.mysql_real_escape_string($_POST['body']).'")';
    13. mysql_query($sql) or die(mysql_error());
    14. }
    15. ?>
    17. <form method="post">
    18. <textarea name="body"></textarea>
    19. <input type="submit" />
    20. </form>
    22. </body>
    23. </html>
    Alles anzeigen


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

    12.015 mal gelesen