ANEXIA Development and Managed Hosting
NOV
5
2015

Mit CodeIgniter zum eigenen Online-Chat

Geschrieben am 5. November 2015 von Manuel Wutte

Jeder kennt ihn oder hat ihn zumindest schon mal gesehen – die Rede ist vom Online-Chat, wie er auf vielen Websites, wie beispielsweise Facebook oder Google Plus, vorkommt.

Doch wie die Technik dahinter aussieht, und wie so ein Chat prinzipiell funktioniert möchte ich euch im Folgenden erklären.

Im Anschluss daran gibt’s auch ein Tutorial, wie ihr euch euren eigenen Chat mit Hilfe des CodeIgniter-Frameworks bauen könnt.

CodeIgniter Chat

 

Das Prinzip dahinter

Grundsätzlich unterscheidet man beim Online-Chat zwischen drei Formen:

  • Internet Relay Chat (IRC)
  • Webchat
  • Instant Messaging

Beim IRC kommt die klassische Form der Client-Server-Architektur ins Spiel. Hierbei werden spezielle Chat-Server benötigt, welche untereinander vernetzt sind. Mit einer geeigneten Client-Software, welche sich entweder direkt auf den PCs der jeweiligen Chatteilnehmer befindet bzw. über deren Browser ausgeführt wird, können untereinander Nachrichten ausgetauscht werden.

Bei einfachen Webchat, wie er beispielsweise von Live-Support-Systemen verwendet wird, ist keine zusätzliche Software notwendig. Meistens ist die Kommunikation auch auf die jeweilige Website beschränkt.

Ganz anders sieht es allerdings beim Instant Messaging aus. Hier findet die Kommunikation in der Regel über keinen öffentlichen Chatraum statt, sondern ausschließlich zwischen den jeweiligen Chatteilnehmern, welche sich über eine entsprechende Software identifizieren.

IRC und Instant Messaging bieten meistens noch weitere Funktionen, wie beispielsweise Gesprächsprotokolle oder die Übertragung von Dateien.

 

Der eigene Chat mit CodeIgniter

CodeIgniter Logo

 

Grundstruktur vorbereiten

Um zu beginnen, laden wir uns zuerst die aktuellste Version des CodeIgniter-Frameworks von dessen Website (http://www.codeigniter.com) herunter. Dies ist in diesem Fall Version 3.0.2.

Nun kopieren wir alle Dateien am besten in einen Unterordner „ci-chat“ auf den Webserver (z.B. XAMPP, LAMP, etc.) und rufen dessen Rootverzeichnis im Browser auf, z.B. http://localhost/ci-chat/.

Wenn alle Anforderungen des Frameworks erfüllt sind, sollte hier nun die Willkommensseite von CodeIgniter sichtbar sein.

In der Autoloader-Konfiguration unter /application/config/autoload.php fügen wir als nächstes den URL-Helper sowie die Datenbank-Library hinzu, da wir diese Komponenten später brauchen werden.

In der Routenkonfiguration unter /application/config/routes.php ändern wir als nächstes den Standard-Controller von „welcome“ auf „chat“, da wir später möchten, dass standardmäßig unsere Chat-Applikation aufgerufen wird.

 

Die eigentliche Applikation

Momentan würde die Routenkonfiguration nur einen 404-Fehler verursachen, da wir bislang noch keinen Chat-Controller definiert haben.

Aus diesem Grund erstellen wir unter /application/controllers einen neuen namens Chat.php und schreiben hier folgendes hinein:

Dieser Controller wirkt nicht nur primitiv, er ist es auch. Seine einzige Aufgabe liegt darin, die entsprechende View zu laden. Für die eigentliche Funktion kommt ein separater API-Controller ins Spiel.

Selbstverständlich könnte man die gesamte Logik auch in den zuvor erstellten Controller unterbringen. Die Aufteilung in mehrere Controller macht vor allem bei größeren Projekten Sinn, da dies die Lesbarkeit und die damit in Verbindung stehende Wartbarkeit wesentlich erhöht.

 

Um die einzelnen Nachrichten zu speichern, um diese später auch den anderen Chatteilnehmern auszuliefern, brauchen wir eine Datenbank sowie ein geeignetes Model.

 

Nun erstellen wir unter /application/models ein neues Model namens Chat_model.php und fügen folgenden Inhalt ein:

Die Methode add_message() ermöglicht es uns, neue Nachrichten hinzuzufügen und erwartet als Parameter die eigentliche Nachricht und den Nickname des Chatteilnehmers, von welchem die Nachricht stammt. Um Konflikte zu vermeiden, wenn mehrere Chatteilnehmer den gleichen Nickname verwenden sollten, werden wir zusätzlich eine GUID mitspeichern. Dies ist eine eindeutige Kennung, welche später nur von der Applikation selbst ausgewertet werden wird.

Mittels get_messages() bekommen wir alle Nachrichten, welche von einem bestimmten Zeitpunkt ausgehend geschrieben wurden. Diese Methode erwartet hierfür den jeweiligen UNIX-Zeitstempel.

 

Um nun diese beiden Methoden nach außen hin verfügbar zu machen, legen wir unter /application/controllers einen neuen Controller Api.php an und schreiben hier folgendes hinein:

Im Konstruktur wird nun das zuvor erstellte Chat-Model geladen. Des Weiteren wird via _setOutput() ein zentraler Output-Handler bereitgestellt, welchem wir einfach die notwendigen Daten übergeben und diese dann entsprechend aufbereitet werden (in diesem Fall JSON).

 

Die grafische Oberfläche

Unter /application/views erstellen wir eine neue View chat.php (welche wir zuvor im Chat-Controller bereits verlinkt haben).

In dieser bauen wir uns das HTML-Grundgerüst unseres Chats auf. Basierend auf jQuery und Bootstrap.

Im Javascript-Block befindet sich ein Check, sodass das Eingabefeld für die Chatnachrichten erst dann sichtbar ist, wenn der Benutzer einen Nickname eingegeben hat.

Damit das ganze nun auch grafisch entsprechend gut aussieht, legen wir noch eine chat.css mit folgendem Inhalt an:

 

Im nächsten Schritt definieren wir hier noch zusätzliche Hilfsfunktionen und speichern hier auch die GUID des Chatteilnehmers in Form eines Cookies. Der Einfachheit halber wird diese Kennung nur lokal im Browser generiert. In einer produktiven Umgebung könnte diese beispielweise in einer User-Tabelle direkt in der Datenbank gespeichert werden.

 

Nun definieren wir die eigentlichen Funktionen in Form von Closures für das Hinzufügen von Nachrichten und dem Auslesen dieser.

Der Einfachheit halber wird in append_chat_data() das HTML-Markup direkt zusammengebaut. Die Daten selbst sollten am besten entweder an eigene Render-Funktionen übergeben werden, oder gleich eine richtige Javascript-Template-Engine verwendet werden.

Dies würde jedoch den Rahmen für dieses Beispiel hier bei weitem sprengen, daher diese primitive Lösung.

 

Nun definieren wir das Verhalten der GUI selbst.

Dieser Code ermöglicht es, die eingegebenen Nachrichten mit einem Klick auf die Enter-Taste direkt abzusenden, und sperrt das Feld so lange, bis die Nachricht vom Server verarbeitet wurde. Im Callback von sendChat() wird dieses Feld danach wieder freigegeben.

Um stets alle Nachrichten nahezu in Echtzeit zu erhalten, wird die Funktion update_chats() im Intervall von 1,5 Sekunden aufgerufen. Diese prüft anhand des jeweiligen Zeitstempels, ob es neue Nachrichten gibt oder nicht und fügt diese dann dem Chatfenster hinzu.

 

Fazit

Die in diesem Beispiel gezeigte Form einer Chat-Integration verursacht durch die zahlreichen Abfragen eine relativ hohe Last auf dem Datenbankserver.

Für größere Websites wäre es jedoch ratsam auf eine entsprechende Infrastruktur zu setzen, d.h. ein geeignetes Chat-Protokoll (z.B. XMPP) und danach eine geeignete Integrationsmöglichkeit auszuwählen.

Dieses Beispiel sollte mehr als Lernbeispiel dienen, kann aber auf kleineren weniger stark frequentierten Websites auch produktiv genutzt werden.

 

Hinweis: Dieses Beispiel setzt ein Grundwissen im Umgang mit dem CodeIgniter-Framework voraus (siehe Schnelleinstieg ins CodeIgniter-Framework) und nutzt teilweise quelloffene Codeschnipsel von Bootswatch.com.


facebooktwittergoogle_pluslinkedinmail