Websockets

Aus ProgrammingWiki
< Web Engineering 1
Archivierte Version vom 2017-01-28T18:19:30+00:00. Aktuelle Version
WissenKönnenProjekt
  • 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

  • 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

  • Speichern Sie den Beispielcode in einer server.js-Datei und starten Sie den Websocket-Server mit Node.js
    Hinweis: Das Modul websocket muss vorher mit npm install websocket 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 conn 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

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 WE1-P9.zip
  1. 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.
  2. Bringen Sie das WebSocket-Chat-Beispiel aus der Vorlesung (letzter Teil) zum Laufen.
  3. Wikipedia als Informationsquelle
    • Um aus einem Programm Anfragen an die Wikipedia zu stellen, verwenden Sie die Query-API. Folgen Sie dem Beispiel auf dieser Seite und sehen Sie sich auch an, wie einfach es ist AJAX mit jQuery auszudrücken (API-Dokumentation).
    • Die ermittelten Daten sollen im XML/JSON-Format übertragen und mit SimpleXML von PHP verarbeitet werden.