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 ein 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|Beispiellösung <document>WE1-P9.zip</document>}}