Comet Chat Beispiel mit PHP + MySQL

Torben Brodt

Administrator

Lexicon articles: 104

This articles has been requested to be deleted.

Sunday, April 17th 2011, 3:16pm

Content

Abstract

Hier wird ein reales Beispiel mit AJAX und Comet unter Verwendung von PHP & MySQL entwickelt.

Article

Das Tutorial setzt voraus, dass ihr bereits die Grundlagen von Comet hier erlernt habt: AJAX / Comet Chat Tutorial

1. JavaScript

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

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

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.

PHP Quellcode

<?php
require('connect.php');
 
function getNewMessagesSince($timestamp, $limit) {
	$lastupdate = array();
	$html = '';
	// get last ten messages
	if($timestamp == -1) {
		$sql = 'SELECT id, body FROM nachrichten ORDER BY id DESC LIMIT '.intval($limit);
	}
	// get latest messages
	else {
		$sql = 'SELECT id, body FROM nachrichten WHERE id > '.intval($timestamp).' ORDER BY id DESC LIMIT '.intval($limit);
	}
 
	$res = mysql_query($sql);
	while ($row = mysql_fetch_array($res)) {
		$lastupdate[] = $row['id'];
		$html .= '<li>'.htmlentities($row['body'], ENT_QUOTES, 'UTF-8').'</li>';
	}
 
	if(count($lastupdate)) {
		rsort($lastupdate);
		return array(
			'lastupdate' => array_shift($lastupdate),
			'html' => $html
		);
	}
	return false;
}
 
$lastupdate = isset($_POST['lastupdate']) ? $_POST['lastupdate'] : null;
$limit = isset($_POST['limit']) ? $_POST['limit'] : 10;
$timeout = time() + 10;
while(!($row = getNewMessagesSince($lastupdate, $limit)) && time() < $timeout) {
	usleep(200000);
}
 
echo json_encode($row);

3. Neue Einträge

Um das Beispiel "rund" zu machen, binden wir ein Formular ein, dass wir in einem iframe laden:

3.1. Iframe

Der Iframe muss in der Hauptseite platziert werden:

HTML Code

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

3.2. Formular

PHP Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de">
<head>
	<title>AJAX &amp; Comet</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
 
<?php
if(count($_POST)) {
	require('connect.php');
	$sql = 'INSERT INTO nachrichten (body) VALUES ("'.mysql_real_escape_string($_POST['body']).'")';
	mysql_query($sql) or die(mysql_error());
}
?>
 
<form method="post">
	<textarea name="body"></textarea>
	<input type="submit" />
</form>
 
</body>
</html>

4. Download

Ladet euch das Archiv hier herunter. Die betroffenen Zeilen sind die example3-* Files: http://demo.easy-coding.de/ajax/comet-ch…al/download.zip

Lexikon 4.1.5, developed by www.viecode.com

Coder Forum