Einfacher Ajax Chat für BunteSuppe

Friday, 26. May, 2006

Wir haben vor kurzem einen Chat bei BunteSuppe hinzugefügt. Interessanterweise waren alle Frauen, die wir gefragt haben, ob sie einen Chat bei BunteSuppe haben wollen, sofort dafür, während die Männer nicht so begeistert darauf reagiert haben.

Wie schon einige Besucher gesagt haben, BunteSuppe ist wirklich eine einzige große Soziologiestudie – mag irgendwer eine Doktorarbeit darüber schreiben? ;-)

Wie es auch sein mag, BunteSuppe hat nun einen Chat in jedem Room und wir erzählen Dir, wie wir das gemacht haben. In einem anderen Tutorial Artikel werden wir Dir zeigen, wie Du ganz einfach einen Ajax-basierten Chat auf Deiner eigenen Seite einbauen kannst.

Zuerst das Vokabular

Wir verwenden ein Client/Server Setup, um den Datenfluss zwischen jedem Besucher und jedem anderen, der die sich gerade dieselbe Seite ansieht, zu koordinieren.

Die Engine ist ein PHP Skript auf dem Server, der die ganze Schwerarbeit leistet. Dieses Skript akzeptiert den Benutzer Input, der mit dem XmlHttpRequest mitgeschickt wird, dann macht es eine Reihe von etwas langwierigen MySql Queries und dann sendet es die neuen Daten zurück an den Client.

Der Client ist der JavaScript Teil der Seite, welche lädt, wenn Du die Mosaik Seite aufmacht. Natürlich wird diese Seite auch automatisch in PHP kreiert, aber es ist das JavaScript, das die ganze Arbeit macht, wenn die Dinge laufen.

Logisch gesehen, kannst Du Dir auch den Besucher, der sich die Webseite ansieht, als Client vorstellen, aber technisch gesehen ist es der Browser des Besuchers, der hierin verwickelt ist.

Der Chat Code im Huckepack

Da das Updaten des Clients mit neuen Steinchen Informationen über eine Serverabfrage gemacht wird, haben wir die Chat Nachrichten eines jeden Benutzers zu den Daten, die schon zu jedem Client bei jedem Request gesendet werden, dran gehängt.

Diese wiederholte Abfrage ist nicht anderes als ein periodischer XmlHttpRequest, der zu unserem einzigen Ajax Objekt gehört. Ja, genau wir haben nur ein Ajax Objekt für das gesamte Mosaik.

Alle Benutzer Inputs, einschließlich der Chat Nachrichten, werden zusammengefasst bis der nächste Request zum Server gesendet wird. Das geschieht, wenn der vorige Request zurückgekommen ist, asynchron.

Also, alles was wir brauchten, um den Chat zur BuntenSuppe hinzuzufügen, war, dass wir den Benutzer Input zu der Information hinzugefügt haben, die zum Server gesendet wird. Am Server werden die Nachrichten in einen Chat-Nachrichten-Table eingetragen. Wenn die Engine die Nachrichten auswählt, die an jeden Client gesendet werden sollen, nimmt sie einfach alle Nachrichten mit, die neu sind, seit dem die Engine das letzte Mal nachgeschaut hat. Ist ganz einfach, nicht?

Das Geheimnis ist der Request Counter

Wie weiß also die Engine, welche Nachrichten von welchem Benutzer sie an jeden Client schicken soll? Wir verwenden dafür denselben Trick, der auch für die Z-Index Synchronisation der Steinchen verantwortlich ist, nämlich einen Algorithmus und dazugehörige Datenstrukturen, die sicherstellen, dass alle Clients die exakt selben Dinge sehen.

Der magische Request Counter ist ein einzelner, für die gesamte Webseite “globaler” Wert, der zählt, wann immer das Engine Skript von einem Client aufgerufen wird. Steinchendaten und Chat Nachrichten werden gleichzeitig mit dem Request Counter Wert gespeichert. Zusätzlich speichern wir in dem Table, in dem alle Clients gespeichert werden, auch den Request Counter von dem Zeitpunkt an, von dem dieser Client das letzte Mal die Daten abgefragt hat.

Wenn die Engine bestimmt, welche Steinchen und welche Nachrichten an jeden Client gesendet werden sollen, nimmt sie einfach alle Daten (die, der bewegten Steinchen und der Nachrichten), die einen höheren Request Counter haben als das letzte Mal.

Dieses einfache Setup stellt sicher, dass jeder alles sehen kann und dass niemand die Daten zweimal bekommt. Ist das nicht toll? Und außerdem sehr nützlich für jede Multiplayer Echtzeit Anwendung!

Und jetzt wieder aufräumen

Da wir jetzt Nachrichten hinzufügen und verteilen können, müssen wir sie auch wieder los werden. Wann wissen wir, dass jeder alles gesehen hat, damit wir die alten Nachrichten aus dem Chat Nachrichten Table löschen können?

Es ist so, dass wir nicht wissen können, ob oder wann alle alles gesehen haben. Wir haben keinen Buffer und wir überprüfen auch nicht, wer was gesehen hat, wie andere Multi-User Chats es tun wie zum Beispiel Internet Relay Chat oder kurz IRC.

Was wir machen ist viel simpler – jede Nachricht, die älter als – sagen wir mal – 60 Sekunden ist, wird aus dem System gelöscht!

Weil unsere Update Rate so viel schneller ist als diese Timeout Periode, können wir ziemlich sicher sein, dass jeder alle Nachrichten sehen kann. Clients, die kein Update in den letzten 60 Sekunden erhalten können, können auch nicht das Mosaik benutzen (oder irgendeinen anderen Chat, was das betrifft).

Chat Nachrichten Scrollen auf der Client Seite

Ab einer gewissen Anzahl an Nachrichten, muss der Client anfangen, die Nachrichten zu scrollen. Wir verwenden auch dafür wieder JavaScript und ein bisschen DHTML.

Die darunterliegende Datenstruktur ist ein einfacher JavaScript Array. Wenn eine neue Nachricht eingegeben wird, nehmen wir das erste Element des Arrays weg und schieben ein neues Element nach.

Um präzise zu sein, wir verwenden dafür zwei Arrays, einen für die Nachricht und einen für den Spielernamen.

Das Ereignis der eingehenden Nachricht passiert, wenn der Ajax Request zurückkommt. Zu dieser Zeit updaten wir den Nachrichten Array, kreieren das HTML Markup, das auf den Daten im Array basiert und updaten das Chat Container Div mit diesem HTML. Fertig!

Gratis Ajax Chat für Deine Webseite

Erfahre wie Du einen super simplen und robusten Ajax/Php/MySql Chat auf Deiner eigenen Seite einbauen kannst!

Aber jetzt muss ich mal ins Bett – werde das Chat Tutorial morgen posten :-)