Web Engineering 1/Websockets

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
{{Ziele|
* Websockets als Alternative zur AJAX
* Echte bidirektionale Kommunikation
* Praktische Grenzen bei klassischen Webservern
|
* Client-seitige Erstellung von Websocket-Verbindungen
* Verbindungsmanagement (Fehlerkontrolle, Trennung von Verbindungen)
* Server-seitiges Management von Websocket-Verbindungen
|
* Die Sudoku-Web-App wird um einen Chat-Bereich erweitert
* Beim Login wird zusätzlich eine Websocket Verbindung hergestellt
* Eine versendete Nachricht wird an alle Clients weitergeleitet
}}

==Websockets am Client==
{|
|style="width: 22em;vertical-align:top;"|<html>
<iframe width="500" height="290" src="//jsfiddle.net/pw_we1/8w585ccb/embedded/js,html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</html>
|style="vertical-align:top;padding-left:1em;"|
* ''Probieren Sie das Beispiel aus! Eventuell funktioniert es durch Sicherheitsbeschränkungen nicht. Finden Sie heraus wie sichere Websocket Verbindungen aufgebaut werden.''
* ''Fügen Sie dem Beispiel eine Fehlerbehandlung hinzu''
* ''Geben Sie eine Meldung aus sobald eine Verbindung hergestellt wurde''
* ''Senden Sie dem Server ein Objekt und behandeln Sie seine Antwort entsprechend''
|}

==Websockets am Server==
{|
|style="width: 28em;vertical-align:top;"|<code id="58813230a6e1b" readonly> 
var http = require('http');
var server = http.createServer().listen(8888);
var WebSocketServer = require('websocket').server;
var wsServer = new WebSocketServer({
  httpServer: server
});
wsServer.on('request', function(r){
  var conn = request.accept('echo-protocol', r.origin);
  conn.on('message', function(message) {
    conn.sendUTF("Echo: " + message.utf8Data);
  });
});
</code>
|style="vertical-align:top;padding-left:1em;"|
* ''Speichern Sie den Beispielcode in einer <tt>server.js</tt>-Datei und starten Sie den Websocket-Server mit Node.js<br>Hinweis: Das Modul <tt>websocket</tt> muss vorher mit <tt>npm install websocket</tt> installiert werden''
* ''Stellen Sie das Websocket-Client-Beispiel nun auf Ihren eigenen Websocket-Server um''
* ''Erweitern Sie Client und Server um die Möglichkeit der Verbindungstrennung''
* ''Trennen Sie am Server die Verbindung zum Client nach 30 Sekunden und behandeln Sie das Ereignis am Client entsprechend''
* ''Verbinden Sie mehrere Clients mit dem Server und machen Sie sich klar wieviele verschiedene <tt>conn</tt> Objekte es nun gibt''
* ''Organisieren Sie die verschiedenen Client-Verbindungen und leiten Sie Nachrichten eines Clients an alle verbundenen Clients weiter''
|}

==Projekt und weitere Übungen==
{{Projekt|
Bei einem Chat geht es darum Nachrichten an alle Chatbeteiligten zu senden. Diese sollten am Client immer mit dem vorangestellten Namen des Verfassers ausgegeben werden.
Beispiellösung <document>WE1-P9.zip</document>}}
# AJAX-Comet: Broadcasting
#* Setzen Sie das Broadcasting-Beispiel aus der Vorlesung auf. Verwenden Sie mehrere Browser-Instanzen.
#* Wenn sich immer mehr Clients beim Server registrieren, die Clients jedoch keine Daten senden, entstehen serverseitig immer mehr (leere) Briefkästen. Außerdem ist das für den gesamten Ordner erforderliche Schreibrecht ein problematischer Sicherheitsaspekt. Wandeln Sie die Anwendung so ab, dass anstelle der Briefkästen eine einzige XML Datei für dem Server angelegt wird. Diese Datei enthält die ehemaligen Briefkasteninhalte zusammen mit je einem Zeitpunkt, wann diese zuletzt geleert wurden. Bei jedem Abruf des Scripts wird diese XML Datei mit simplexml_load_file geladen und ausgelesen, s. Folien weiter unten. (Das geht mit PHP sehr angenehm und man braucht nur das Schreibrecht für genau diese XML-Datei.)
#* Beurteilen Sie die Performance-Eigenschaften. Es ist eine leichte Verschlechterung gegenüber der Briefkasten-Version zu vermuten.
# Bringen Sie das WebSocket-Chat-Beispiel aus der Vorlesung (letzter Teil) zum Laufen.
# Wikipedia als Informationsquelle
#* Um aus einem Programm Anfragen an die Wikipedia zu stellen, verwenden Sie die [https://www.mediawiki.org/wiki/API:Main_page Query-API]. Folgen Sie dem Beispiel auf dieser Seite und sehen Sie sich auch an, wie einfach es ist AJAX mit jQuery auszudrücken ([http://de.wikipedia.org/w/api.php API-Dokumentation]).
#* Die ermittelten Daten sollen im XML/JSON-Format übertragen und mit SimpleXML von PHP verarbeitet werden.