Instant Messenger

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IM - Testbau </title>
<link rel="stylesheet" href="css/im.css">
<style type="text/css">
.entry {
width: 100%;
background-color: #F5F5F5;
border: 1 dotted #666666;
font-family: Verdana;
}
.entry#small {
color: #CCCCCC;
}
</style>
</head>


<body>
<?php
//wichtig; damit nicht gecached wird!
header( "Cache-Control: no-cache, must-revalidate" );
header( "Pragma: no-cache" );
//damit unser JavaScript die Daten auch als XML erkennt
header("Content-Type: text/xml");

$db_host = "localhost"; // Host
$db_user = "root"; // User
$db_password = ""; // Passwort
$db_name = "instant"; // Datenbank

mysql_connect($db_host,$db_user,$db_password) or die(mysql_error());
mysql_select_db($db_name) or die(mysql_error())

function getLatestEntries($latestID) {

$query = "SELECT id, name, nachricht, date FROM ajaxchat WHERE id > $latestID ORDER BY id DESC LIMIT 20";
$erg = mysql_query($query);
echo "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>";
echo "<messages>";
while($erg2=mysql_fetch_array($erg)) //Erzeugung der XML Ausgabe
{
echo "<message><id>".$erg2['id'];
echo "</id><name>".$erg2['name'];
echo "</name><nachricht>".$erg2['nachricht'];
//Formatierung des Timestamps
echo "</nachricht><date>".date("d.m.Y H:i",$erg2['date']);
echo "</date></message>";
}
echo "</messages>";
}

function createNewEntry($name, $nachricht) {

//HTML Tags entfernen
$name = strip_tags($name, '');
$nachricht = strip_tags($nachricht,'');

$query = "INSERT INTO ajaxchat(name, nachricht, date)
VALUES ('$name','$nachricht','".time()."')";
echo "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>";
if (!mysql_query($query)) {
//nicht notwendig, dient nur der Fehlerkontrolle
echo "<createNewEntry>0</createNewEntry>";}
else {
echo "<createNewEntry>1</createNewEntry>";
}
}

//falls action=createNewEntry, Erzeugung eines neuen Eintrages
if ($_GET['action'] == "createNewEntry") {
createNewEntry($_GET['name'], $_GET['nachricht']);
}
//falls action=getLatestEntries, Ausgabe der neuesten Einträge
elseif ($_GET['action'] == "getLatestEntries") {
getLatestEntries($_GET['latestID']);
}
mysql_close(); //schließen der PHP Verbindung
?>
<form name="form1" method="post" action="">
<p>Name<br />
<input type="text" name="name" id="name">
<br />
<br />
Nachricht<br />
<input type="text" name="nachricht" id="nachricht">
</p>
<p>
<input type="submit" name="Submit" value="Submit" onclick="checkInput(document.form1.name.value, document.form1.nachricht.value)" >
</p>
</form>

<?php
function checkInput(name, nachricht) {
if(name != "" && nachricht != "") {
//Falls alles OK ist, kann der neue Eintrag erzeugt werden
createNewEntry(name, nachricht);
}
else {
alert("Bitte sowohl einen Namen, als auch eine Nachricht eingeben!");
}
}

?>

<script type="text/javascript">
var latestID = 0; //latestID als globale Variable; wichtig!

function createXMLHttpReqObj() { //erzeugt die XMLHttpRequest Objekte

// für Mozilla etc.
if(window.XMLHttpRequest) {
try { //Fehler abfangen
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
// für den InternetExplorer
} else if(window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
req = false;
}
}
}
return req;
}
// Initialisierung der beiden Objekte
var httpGetLatestEntries= createXMLHttpReqObj();
var httpCreateNewEntry = createXMLHttpReqObj();

//Funktion, mit der Anfragen nach neuen Einträgen gesendet wird
function getLatestEntries() {
//Anfrage senden, wenn Status der letzten Anfrage "completed" ist, bzw. "nicht initialisiert" (d.h. erster Aufruf)
if (httpGetLatestEntries.readyState == 4 || httpGetLatestEntries.readyState == 0) {
//Übergabe der latestID
httpGetLatestEntries.open("GET","
http://localhost/ajax/ajaxchat.php?
action=getLatestEntries&latestID="+latestID, true);
httpGetLatestEntries.onreadystatechange = handleHttpGetLatestEntries;
httpGetLatestEntries.send(null);
}
}

Als Funktion, mit welcher der Browser die Serverantwort behandelt ist die Funktion handleHttpGetLatestEntries angegeben:

//Behandelt die Serverantwort
function handleHttpGetLatestEntries() {

//wenn Anfrage den Status "completed" hat
if (httpGetLatestEntries.readyState == 4) {
//ermitteln der Antwort
response = httpGetLatestEntries.responseXML.documentElement;
//ermitteln der Messages; Überführung in ein Array
messages = response.getElementsByTagName('message');

//wenn es mindestens eine neue Nachricht hat, dann wird diese angezeigt!
if(messages.length > 0) {

for (var i=messages.length-1; i>=0; i--) {
//Darstellung im Browser mit dem DOM
showEntry= document.getElementById("showEntries");
neuSpan = document.createElement('span');
neuSpan.setAttribute('class','entry'); //CSS Klasse
neuSmall = document.createElement('small');
neuNameDate = document.createTextNode(messages[i].getElementsByTagName
('date')[0].firstChild.nodeValue + ': ' + messages[i].getElementsByTagName('name')[0].firstChild.nodeValue +': ');
neuSmall.appendChild(neuNameDate);
neuSpan.appendChild(neuSmall);
neuSpan.appendChild(document.createElement('br'));
neuNachricht = document.createTextNode(messages[i].getElementsByTagName
('nachricht')[0].firstChild.nodeValue);
neuSpan.appendChild(neuNachricht);
neuSpan.appendChild(document.createElement('br'));
showEntry.insertBefore(neuSpan, showEntry.firstChild);
}

//Festlegung der neuen latestID; Zugriff auf die Werte über das DOM
latestID = messages[0].getElementsByTagName('id')[0].firstChild.nodeValue;
}
//erneuter periodischer Aufruf (eine Art Rekursion)
setTimeout('getLatestEntries();',3000); //Erneute Anfrage in drei Sekunden
}
}

//behandelt die Antwort des Servers
function handleHttpCreateNewEntry() {
if (httpCreateNewEntry.readyState == 4) {
//nachdem eine neue Nachricht erfolgreich erzeugt wurde, wird diese angezeigt
getLatestEntries();
}
}
</script>
</body>
</html>