Websockets. Verbindungskanal zwischen Client-Anwendung (JavaScript in Browser) und Server.

Transkript

1 Websockets Websocket: Verbindungskanal zwischen Client-Anwendung (JavaScript in Browser) und Server. Vergleichbar mit TCP/IP-Socket, aber durch Client-Skript direkt nutzbar Mit eingebauter Nachrichten-Fragmentierung. Der Anfang und das Ende von einzelnen Nachrichten wird durch das Protokoll- Nachrichtenformat kodiert) RFC 6455 (The WebSocket Protocol Version 13, 2011), damit später eingeführt als AJAX (ab 2006) 42

2 Websockets WebClient/ Browser HTTP JavaScript Datenaustauschmuster gemäß Anwendung TCP/IP- Verbindung WebServer Sock Schnittstelle WebClient-Impl. Sock Schnittstelle WebServer-Impl. PHP Websocket- Verbindung Allgemeiner Server (z.b. Java-Anw.) 43

3 Websockets Server und Client müssen vorab HTTP-Handshake ausführen Client: HTTP-Handshake wird automatisch unterhalb der JavaScript-Schnittstelle ausgeführt, Websocket- Verbindung JavaScript Datenaustauschmuster gemäß Anwendung HTTP und Upgrade Server: bedient TCP/IP- Socket und muss Handshake und Nachrichtenfragmentierung beachten PHP Allgemeiner Server (z.b. Java-Anw.) 44

4 Websockets Clientseitig: Websocket-Support innerhalb JavaScript Umgebung der meisten modernen Browser Protokoll, hier ws anstatt http Servername (laut DNS) oder IP-Adr. Port, oft 80 Service- Name websock_url= ws:// ; socket = new WebSocket(websock_url); socket.close(); 45

5 Websocket-Client Clientseitig (Fortsetzung) Synchrone Funktionen: Konstruktor, socket = new WebSocket ( ) vergleichbar mit open( ); socket.send(msg); socket.close(); Asynchrone Funktionen: socket.onopen = function () { ; socket.onclose = function(msg) { socket.onerror = function (error) { connection.onmessage = function (e) { 46

6 Websocket-Client Clientseitig (Fortsetzung) socket.readystate Quelle:HTML Living Standard, Section WebSockets The readystate attribute represents the state of the connection. It can have the following values: CONNECTING (numeric value 0) The connection has not yet been established. OPEN (numeric value 1) The WebSocket connection is established and communication is possible. CLOSING (numeric value 2) The connection is going through the closing handshake, or the close() method has been invoked. CLOSED (numeric value 3) The connection has been closed or could not be opened. When the object is created its readystate must be set to CONNECTING (0). 47

7 Websocket-Server Auswahl serverseitiger Technologien für Websockets: libwebsockets (C-Bibliothek) Jetty (Java) socket.io (NodeJS, Serverseitiges JavaScript) PHP Websockets (wird hier benutzt) (lizensiert unter BSD Lizenz) Zum Teil erlauben diese Bibliotheken auch den Bau normaler HTTP- Server, die Teil von Anwendungen sein können. 48

8 Websocket-Server Serverseitig ist das Server-PHP-Skript (mit PHP-Websockets) gesondert zu starten, wie unten dargestellt: 49

9 Websocket-Server Nach mehrfachem erfolgten connect() und close() durch die Client- Anwendung protokollert der Websocket-Server die Verbindungen: 50

10 Websocket-Server Im Webbrowser (hier Web-Konsole in Firefox) kann man das HTTP- Upgrade nachvollziehen: 51

11 Beispiel: Rechner per Websockets onload: connect() function mit send() onmessage = function mit Verarbeitung onunload: close() 52

12 Beispiel: Rechner per Websockets Client-Code, JavaScript (Ausschnitt): var socket; var ergebnisfeld; function WebSocketInit() { var host = "ws:// :8080/rechner"; socket = new WebSocket(host); socket.onmessage = function (msg) { var singlevalue = JSON.parse(msg.data) ergebnisfeld.value = singlevalue; ; function WebSocketClose() { socket.close(); function WebSocketRechner(f) { var calcmsg = new Array; calcmsg[0] = escape(f.a.value); calcmsg[1] = escape(f.b.value); calcmsg[2] = escape(f.o.options[f.o.selectedindex].value); var json_str = JSON.stringify(calcmsg); alert("socket.send('" + json_str + "')"); socket.send(json_str); ergebnisfeld.value = "Rechnen..."; 53

13 Beispiel: Rechner per Websockets Server-Code, PHP (Ausschnitt): <?php require_once('./websockets.php'); class calcserver extends WebSocketServer { protected function process ($user, $msg) { $arr = json_decode($msg,true); switch ($arr[2]) { case 'p': $result = $arr[0]+$arr[1]; break; case '-': $result = $arr[0]-$arr[1]; break; jsonstr=json_encode($result); $msg = $jsonstr; $this->send($user,$msg); cs = new calcserver(" ","8080"); try { $cs->run(); catch (Exception $e) { $cs->stdout($e->getmessage());?> vollständiger Quellcode auf Webseite zum Download 54

14 Zusammenfassung: Websockets Websockets sind eine Alternative zu AJAX Oft benutzt: Websockets+JSON-Srings Besonders geeignet, um Ereignisse und Daten vom Server asynchron in Client zu verarbeiten Client-Interface (HTML+JavaScript) vergleichsweise einfach zu handhaben Verschiedene Server-Bibliotheken mit zum Teil einfacher Schnittstelle 55