Übersicht – Theoretische Grundlagen – Client

Übersicht

Theoretische Grundlagen

Was sind WebSockets?

• Netzwerkprotokoll
• bidirektionale Verbindung Webanwendung <-> WebSocket-Server

• ws [unverschlüsselt]
• wss [verschlüsselt]

Vergleich mit HTTP

• Eine TCP-Verbindung bleibt nach Handshake bestehen
• Overhead HTTP (<= 2000 Bytes); WebSocket (2 bytes)

WS-Protokoll-Handshake

• zu Beginn jeder Verbindung
• ähnelt HTTP und ist abwärtskompatibel
  • erlaubt Nutzung des Standard-HTTP-Ports „80“
• beinhaltet weitere Daten (verwendetes Protokoll usw)

konkreter Handshake auf Server

                    GET / HTTP/1.1
                    Host: 46.101.250.180:8080
                    Connection: Upgrade
                    Pragma: no-cache
                    Cache-Control: no-cache
                    Upgrade: websocket
                    Origin: http://46.101.250.180
                    Sec-WebSocket-Version: 13
                    User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64)
                    Accept-Encoding: gzip, deflate, sdch
                    Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4
                    Sec-WebSocket-Key: iBgwl+Rk0N0aptagxD3+pQ==
                    Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
                    Sec-WebSocket-Protocol: echo-protocol
                
                
                    HTTP/1.1 101 Switching Protocols
                    Upgrade: websocket
                    Connection: Upgrade
                    Sec-WebSocket-Accept: xAEpe+Pu/XyPKLfOL19lYW4nFSk=
                    Sec-WebSocket-Protocol: echo-protocol
                    Origin: http://46.101.250.180
                

Anwendungsbeispiele

Client

WebSocket erstellen

var Socket = new WebSocket(url, [protocol] );WebSocket Konstruktor

• Socket
  • logischer Endpunkt einer Verbindung
  • Adressenkombination aus IP-Adresse und Portnummer
• optionales Protokoll, dass der Server unterstützen muss

var connection = new WebSocket("ws://46.101.250.180:8080", "echo-protocol");konkretes Demo-Beispiel

WebSocket Attribute [read-only]

Socket.readyState

• 0 [CONNECTING]: Verbindung noch nicht hergestellt
• 1 [OPEN]: Verbindung hergestellt, Kommunikation möglich
• 2 [CLOSING]: Verbindung im Prozess des Schließens.
• 3 [CLOSED]: Verbindung geschlossen / konnte nicht hergestellt werden

Socket.bufferedAmount

• Anzahl der Bytes, die durch send() gebuffert und noch nicht über das Netzwerk versand wurden.

WebSocket Events & Handler

                    connection.onopen = function () {
                        console.log("Connection is open");
                    };
                    connection.onerror = function (error) {
                        console.log(error);
                        alert(error);
                    };
                    connection.onmessage = function (e) {
                        console.log("Server: " + e.data);
                        // Append to TextArea
                        var obj = document.getElementById("serverResponse");
                        obj.value += "Server: " + e.data + '\n';
                    };
                

                    connection.onclose = function () {
                        console.log("Connection was closed");
                        // Append to TextArea
                        var obj = document.getElementById("serverResponse");
                        obj.value += "Connection was closed\n\n";
                    };
                

WebSocket Methoden

void send(data)

• Überträgt die Daten über die Verbindung zum Server

void close([code, reason])

• Beendet die vorhandene Verbindung

// called on button press 'send...', sends message to server
                    function send() {
                        // gets text and sends it to the Server
                        var textContainer = document.getElementById("message");
                        var text = textContainer.value;
                        connection.send(text);
                        textContainer.value = "";
                        // Show our own message
                        var obj = document.getElementById("serverResponse");
                        obj.value += "Client: " + text + '\n';
                    }
                    // Called when button 'close Websocket' is pressed to manually close
                    function closeConnection() {
                        connection.close();
                    }

Server

WebSocket erstellen und öffnen

var WebSocketServer = require('websocket').server,
               http = require('http');Benötige Module für Node.JS

server.listen(8080, function() {
                    // wird bei binden auf den port ausgeführt (1x)
                    console.log((new Date()) + ' Server is listening on port 8080');
             }
);Server wird mit Port 8080 verbunden und wartet auf Nachrichten

var wsServer = new WebSocketServer ({
                    httpServer: server,
                    autoAcceptConnections: false // manuelles request.accept (Line 45)
});WebSocketServer öffnen
            

Verbindungsaufbau mit WebSocket

wsServer.on('request', function(request) {
                    if (!originIsAllowed(request.origin)) {
                        request.reject();
                        console.log((new Date()) + ' Connection from origin '
                        + request.origin + ' rejected.');
                        return;
                    } // Funktion wsServer.on('request') verlassen

                    var connection = request.accept('echo-protocol', request.origin);
}Ablehnen der Verbindung, wenn Client nicht auf WebSocketServer zugreifen darf
    wenn das nicht der Fall ist, wird eine neue Verbindung mit dem Echo-Protokoll und der Herkunft aufgebaut
    

Versenden von Messages

connection.on('message', function(message){
                    for (var i=0; i < connections.length; i++) {
                        if(connection != connections[i]) {
                            connections[i].sendUTF(message.utf8Data);
                    }
}Senden der Nachricht an alle verbindungen, außer die eigene

Versenden von Broadcast-Messages

var WebSocketServer = require('ws').Server,
                wss = new WebSocketServer({ port: 8080 });

wss.broadcast = function broadcast(data) {
    wss.clients.forEach(function each(client) {
        client.send(data);
    }
);Neuen WebSocketServer öffnen & Broadcast-Funktion nutzen

Beenden der Verbindung mit WebSocket

connection.on('close', function(reasonCode, description) {
                 console.log((new Date()) + ' one Client disconnected.');
                 numberOfConnections--;
}Wird aufgerufen, wenn die Verbindung beendet wird - egal auf welche Art und Weise