Einen Chat mit AJAX entwickeln - In 15 Minuten (easy)

Einen Chat mit AJAX entwickeln - In 15 Minuten (easy)

In der Theorie

AJAX, drei Dateien und ein Chat

Um einen Chat mit AJAX zu realisieren benötigt man als erstes einen Webserver. Wenn man diesen besitzt, sei es nun ein lokaler oder einer der mit dem Internet verbunden ist, kann man mit drei Dateien einen sehr einfachen Chat entwickeln. Alles was man an Layout benötigt, ist eine Texteingabe und ein Button zum absenden.

<!DOCTYPE html>
<html>
    <head>
         <script src="chat.js"></script>
    </head>

    <body>
         <div id="content"></div>
         <input type="text" id="text" placeholder="Deine coole Nachricht..." />
         <input type="button" value="Senden" onclick="send()" />
    </body>
</html>

Ziemlich unspektakulär. Interessanter wird es, wenn wir AJAX ins Spiel bringen. Für alle die noch nie etwas mit AJAX zu tun hatten: Das A in AJAX steht für Asynchron und ist der wichtigste Buchstabe in dieser Abkürzung. Mit Asynchron ist hiermit gemeint, dass Daten zeitversetzt gesendet/empfangen werden können und dabei niemand darauf warten muss, um seine Arbeit fortzusetzen.

Die komplette Abkürzung: Asynchronous Javascript and XML. Auf gut Deutsch kann man also mit AJAX Daten hin und her schicken, selbst nachdem die Webseite fertig geladen ist. Genau das, was wir für einen Chat brauchen!

Nachrichten senden

Wenn man nicht gerade, wie in vielen alten Tutorials die im Internet verbreitet sind, auf die Unterstützung vom IE 6-8 und irgendwelche uralten Browser achtet, ist AJAX mit wenigen Zeilen einsatzbereit.

function send()
{
// AJAX request Objekt
var req = new XMLHttpRequest();

req.open("POST", "chat.php?send=1", true);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.send("text="+document.getElementById("text").value); 
}

Die Funktion sendet eine Anfrage an chat.php mit dem Inhalt der Textbox. Damit der Request auch erfolgreich abläuft brauchen wir die Seite, die wir erreichen wollen, nämlich chat.php. Dieses Skript kümmert sich lediglich um zwei Dinge: Nachrichten speichern und Nachrichten laden. Ok, und auch Nachrichten in einem sinnvollen Format ausgeben (JSON).

function save()
{
$data  = array("text" => $_POST['text'], "date" => time());
$file = fopen("chat.json", "a");
fwrite($file, json_encode($data).",");
fclose($file);
}

Wir nehmen den über die AJAX Anfrage erhaltenen Text und packen diesen, inklusive der aktuellen Zeit, in das Array data. Dann öffnen/erstellen wir eine Datei namens "chat.json" mit dem Datei Modi "a", welcher für append (zu Deutsch: Anhängen) steht und speichern dann jenes Array mithilfe von json_encode im JSON Format ab.

Nachrichten empfangen

var lastCheck = 0;

function receive()
{
var req = new XMLHttpRequest();

// Hat sich was an dem Request Status getan?
req.onreadystatechange = function()
{
// Wurde das Dokument erfolgreich geladen und ist bereit?
if(this.readyState == 4 && this.status == 200)
{
var json = JSON.parse(this.responseText);

for(var i = 0; i < json.length; ++i)
{
var data = json[i];
document.getElementById("content").innerHTML += data.text+'<br/>';
}

if(json.length > 0)
lastCheck = Date.now();
}
};

// Den Request mit zwei Parametern versenden
req.open("GET", "chat.php?receive=1&lastCheck=" + lastCheck, true);
req.send(); 
}

setInterval(receive, 1000);

Was passiert hier?

Wie beim Nachricht senden verwenden wir AJAX um asynchron eine Anfrage an chat.php zu senden. Um nicht immer alle Nachrichten zu erhalten, schicken wir den letzte "Zeitpunkt", an dem wir Nachrichten empfangen haben.

Vielleicht auch interessant
Javascript - Eigener Code Parser
Javascript - Eigener Code Parser

Wie man den Grundaufbau eines Code Parsers realisiert.

Wenn die Anfrage erfolgreich war, nehmen wir die Daten, welche im JSON Format vorliegen und wandeln diese mit JSON.parse in ein Array um. Falls es neue Nachrichten gibt: Werden beim iterieren die Nachrichten in unseren DIV Container mit der ID content hinzugefügt und außerdem der vorhin erwähnte Zeitpunkt (lastCheck) aktualisiert.

Jetzt wo wir jede Sekunde unsere receive Funktion aufrufen, sollten wir aber auch dafür sorgen, dass etwas empfangen werden kann.

Nachrichten laden

function load()
{
$string = file_get_contents("chat.json");
$json = json_decode("[".substr($string, 0, -1)."]");

$newData = array();
foreach($json as $data)
{
// Javascript arbeitet mit Millisekunden.
// PHP mit Sekunden, deshalb: Durch 1000 teilen
if($data->date >= ($_GET['lastCheck']/1000))
{
$newData[] = $data;
}
}

echo json_encode($newData);
}

// Wenn der Paramter send gesetzt ist => save() aufrufen
// Andernfalls wenn die Paramter receive und lastCheck gesetzt sind => reiceve() aufrufen
if(isset($_GET['send'])) save();
else if(isset($_GET['receive']) && isset($_GET['lastCheck'])) load();

load() ruft die Datei chat.json auf und json_decode wandelt dessen Inhalt in ein Array um. Das ganze machen wir nur, um nicht immer alle Nachrichten an den Klienten zu senden (Weniger Daten = schnellere Anfragen). Man kann auch theoretisch den Klienten die ganze "Filter" Arbeit machen lassen, allerdings ist es sinnvoller, dass es der Server tut.

In den nächsten Zeilen wird überprüft ob die Daten aktuell sind, also ob der Klient diese noch nicht erhalten hat. Die neuen Daten werden wieder zurück ins JSON Format umgewandelt und ausgegeben.

Ungewöhnlich scheint hier vielleicht die Zeile:

$json = json_decode("[".substr($string, 0, -1)."]");

Das substr($string, 0, -1) sorgt nur dafür, dass das letzte Komma entfernt wird. Ein Blick in die chat.json Datei macht das verständlicher. Und die eckigen Klammern [ ] sind dafür nötig, dass die Daten als ein JSON Array interpretiert werden.

Nächste Seite
Kompletter Quelltext
Hinterlasse gerne einen Like oder Kommentar (~‾▿‾)~
Name Text
Kommentare
> 1 Mt.