Aufgabenblatt 6 Webtechnologien Wirtschaftsinformatik SS 2015 Lernziele Es wird folgendes gelernt: • JavaScript - dazu ist der 2. Foliensatz über JavaScript wichtig • Ajax - dazu ist der 3. Foliensatz über JavaScript wichtig • Kommunikation zwischen Threads • Realisierung einer verteilten Anwendung JavaScript, Ajax und <div> Nun wird ein einfaches Chat-System realisiert. Der Server soll einen Chat mit maximal drei Personen gleichzeitig behandeln. Jede Person gibt einen Text ein, der an die anderen beiden – sofern sie angemeldet sind – gesendet und angezeigt wird. Das Ganze verläuft wie folgt: Auf der Startseite wird der Name Name der Person eingegeben. Dieser wird an den Server gesandt, der mit der Chat-Seite antwortet. Diese besteht aus drei Textfeldern mit jeweils einer Beschriftung. Diese Beschriftung ist der Name der Person, das darunter stehende Textfeld dessen eingegebener (und gesendeter) Text. Oben auf der Seite steht der Block (Beschriftung und Text) der 1. Person, darunter der der 2. Person und unten das Textfeld von einem selber. Wenn nun irgendetwas in dieses untere Feld eingetippt wird, dann erscheint es bei den beiden anderen Kommunikationspartnern jeweils unter dem Namen des Schreibenden und in dem dazugehörenden Block (Textfeld). So, das ist die Idee. Das Ganze wird durch 2 Seiten realisiert: die erste ist die „Login“-Seite (Startseite) mit dem eigenen Namen (sowie ein Einlogg-Knopf) und die zweite ist die „Chat“-Seite. Diese zweite Seite wird vollständig mit Ajax implementiert, d.h. es gibt kein Nachladen der Seite vom Server. Bitte beachten Sie, dass Sie hier ein Session-Management implementieren müssen; dazu vergeben Sie eine Nummer (ID), die bei jedem Ajax-Request mitgesendet wird und für jede Kommunikation mit einer Person gilt. Auf der Server-Seite werden diese IDs zusammen mit den Namen der Person vermerkt. Jeder der max. 3 Teilnehmer bekommt also eine eigene ID. Bevor Sie anfangen, machen Sie einen Entwurf der Kommunikationsnachrichten, also des Protokolls. Es gibt folgende Anfragen seitens des Browsers: -1- 1. Bei der „Chat“-Seite: Senden der eingegebenen Zeichen auf dem Hinweg und Empfangen der Zeichen der anderen Partner auf dem Rückweg Hinweg: session=<ID>&text=<EigenerText> Rückweg: session=<ID>&text1=<TextVonPerson1>&name1=<NameVonPerson1> &text2=<TextVonPerson2>&name2=<NameVonPerson2> 2. Bei der Startseite: Mitteilen des eigenen Namens. Hinweg: name=<EigenerName> Rückweg: session=0 -> Fehler oder wie Rückweg der Chat-Seite Dann fehlt noch das Abmelden vom Server, dass Sie analog definieren können (letzte Teilaufgabe): Hinweg: session=<ID> (kein Text bedeutet „Logout“). Rückweg: Senden der Startseite. Das Ganze ist nur ein Vorschlag; Sie können die Kommunikation auch anders realisieren. Und nun die einzelnen Schritte: 1. Sie entwerfen die beiden Seiten mit den Layout-Angaben über Layer und externe CSS-Dateien – also wie im Aufgabenblatt 5. 2. Jetzt konzipieren Sie die Protokolle: wer mit welcher ID was zum Server schickt und was als Antwort erhält. Oben ist eine Anregung beschrieben. 3. Nun implementieren Sie eine allgemeine Ajax-Routine – als Objekt oder als Sammlung von Routinen, dann die Routinen zum Beschreiben und Auslesen der Textfelder, wobei hier die Namen der Felder (DOM) als Parameter übergeben werden – so wie in der Formular-Aufgabe. Für den ersten Teil finden Sie Anregungen in den Folien der Vorlesung, für den zweiten Teil können Sie die Routinen des Aufgabenblatts 5 benutzen. Das gesamte JavaScript-Teil wird ein eine Datei geschrieben, die in die Seiten eingebunden wird. 4. Jetzt entscheiden Sie wie ein Refresh der Chat-Seite gemacht wird: Am Einfachsten wird dafür ein Knopf vorgesehen. Wenn jemand etwas getippt hat, klickt er auf diesen Knopf und sein Textfeld wird zum Server geschickt, der mit den aktuellen Textfeldinhalten der anderen beiden Kommunikationspartner antwortet, deren Texte dann natürlich dargestellt werden. Also nach dem Klick werden die Daten ausgetauscht und neu angezeigt. Die Ajax-Nachrichten dürfen nicht alle Zeichen enthalten; hier muss also wie beim Aufgabenblatt 5 nach URLencoded umgewandelt werden, aber auch auf der JavaScriptseite (Hinweise in den Folien). Die einzelnen Werte senden Sie am besten mit dem Keyword-Mechanismus: -2- key1=“Wert1“&Key2=“Wert2“ etc. 5. Diese einfache Lösung wird durch die Folgende ersetzt: Per Timer wird der aktuelle Inhalt alle 10s (oder kürzer) zum Server übertragen. Oder noch komfortabler: Sie können eine JavaScript-Routine an ein TastaturEreignis hängen, so dass bei jedem Tastendruck die Kommunikation zum Server abläuft, was echtes Chat ist, aber auch sehr aufwändig ist. Da ja jemand einmal nichts eingeben kann, also schweigt, kann dies mit der TimeOut-Version kombiniert werden: Wird getippt, gibt es kein TimeOut, wird nicht getippt, kommt nach 10s (oder kürzer) ein TimeOut und damit ein automatisches Aktualisieren. Die Sache mit dem TimeOut wird in einem Foliensatz behandelt. 6. [Abgabe] Es fehlt jetzt nur noch ein „Logout“-Knopf auf der „Chat“-Seite, der an den Server eine „Dann bin ich mal weg“-Nachricht schickt (siehe Aufgabe2: Protokoll). Bitte beachten Sie, dass nicht immer alle möglichen Personen chatten und dass manchmal als mehr als drei Personen chatten wollen. Sie müssen dann die Abwesenheit eines Partners behandeln bzw. das Ablehnen eines neuen Partners. Eines der Probleme bei dieser Lösung besteht darin, dass jeder HTTP-Request zu einem neuen Laden des PHP-Codes führt, d.h. dass alles Vorherige vergessen wird. Eine PHP-Session hilft auch nicht weiter, da diese nur Daten speichert und bereit stellt, die zwischen zwei Partnern, einem bestimmten Browser und dem Server, benutzt werden. Hier sind jedoch bis zu drei Paare von BrowserServer beteiligt. Das bedeutet, dass Sie den Zustand der Variablen jeder dieser drei Sessions in eine Datei schreiben bzw. aus dieser wieder rekonstruieren müssen. Oder anders formuliert: Sie benötigen einen Kommunikationsmechanismus zwischen verschiedenen Sessions. Am einfachsten realisieren Sie diesen, wenn Sie eine Klasse zur Kommunikation definieren, deren Objekte serialisiert abgespeichert bzw. rekonstruiert werden (dazu gibt es in PHP Routinen). Was noch fehlt ist der wechselseitige Ausschluss, da ja zwei HTTP-Requests parallel innerhalb des Servers ablaufen können. Hierzu benutzen Sie am einfachsten eine leere Datei: wenn sie existiert, ist der Zugriff gesperrt, wenn sie nicht existiert, ist der Zugriff frei. Also, vor dem Deserialiseren prüfen Sie, ob die Datei da ist, falls ja, warten Sie etwas und probieren neu, wenn nicht legen Sie die Datei an, lesen das Objekt ein, bearbeiten das Senden, serialisieren den neuen Zustand des Objekts und löschen anschließend die Synchronisierungsdatei. Das ist jetzt schon eine richtige, auch etwas komplexe Web-Anwendung. Wer daraus etwas Dolles machen will, muss nun noch so etwas wie Passwörter vorsehen, vergangene Chats in einer Datenbank abspeichern, um sie später wieder an der alten Stelle fortführen zu können und natürlich beliebig viele Chats -3- gleichzeitig zulassen etc. etc. Abnahme und Bewertung Das Ergebnis der Aufgabe 6 wird vorgeführt; es kann auch per EMail abgegeben werden. Dabei muss die gesamte Site als zip-Datei, so wie sie unter htdocs liegt, abgegeben werden. Es sind max. 3 Punkte zu erreichen; fehlt etwas oder ist es nicht in Ordnung, so werden Punkte abgezogen bzw. die Lösung nicht anerkannt. -4-