WebSockets - Kommunikation mit dem Server
Das Web basiert weitgehend auf dem Anforderungs- / Antwortparadigma von HTTP. Ein Client lädt eine Webseite und dann passiert nichts, bis der Benutzer auf die nächste Seite klickt. Um 2005 begann AJAX, das Web dynamischer zu gestalten. Die gesamte HTTP-Kommunikation wird jedoch vom Client gesteuert. Dies erfordert Benutzerinteraktion oder regelmäßige Abfragen, um neue Daten vom Server zu laden.
Technologien, mit denen der Server die Daten in dem Moment an einen Client senden kann, in dem er weiß, dass neue Daten verfügbar sind, gibt es schon seit geraumer Zeit. Sie tragen Namen wie"Push" oder “Comet”.
Mit long pollingDer Client öffnet eine HTTP-Verbindung zum Server, die bis zum Senden der Antwort geöffnet bleibt. Immer wenn der Server tatsächlich neue Daten hat, sendet er die Antwort. Lange Abstimmungen und die anderen Techniken funktionieren recht gut. Alle diese Probleme haben jedoch ein gemeinsames Problem: Sie tragen den Overhead von HTTP, wodurch sie für Anwendungen mit geringer Latenz nicht gut geeignet sind. Zum Beispiel ein Multiplayer-Shooter-Spiel im Browser oder ein anderes Online-Spiel mit einer Echtzeitkomponente.
Sockets ins Web bringen
Die Web Socket-Spezifikation definiert eine API, die "Socket" -Verbindungen zwischen einem Webbrowser und einem Server herstellt. Für Laien besteht eine dauerhafte Verbindung zwischen dem Client und dem Server, und beide Parteien können jederzeit mit dem Senden von Daten beginnen.
Web-Socket-Verbindung kann einfach mit einem Konstruktor geöffnet werden -
var connection = new WebSocket('ws://html5rocks.websocket.org/echo', ['soap', 'xmpp']);wsist das neue URL-Schema für WebSocket-Verbindungen. Es gibt auchwss, für eine sichere WebSocket-Verbindung auf die gleiche Weise https wird für sichere HTTP-Verbindungen verwendet.
Wenn Sie einige Ereignishandler sofort an die Verbindung anhängen, können Sie feststellen, wann die Verbindung geöffnet wurde, eingehende Nachrichten empfangen wurden oder ein Fehler aufgetreten ist.
Das zweite Argument akzeptiert optional subprotocols. Es kann sich um eine Zeichenfolge oder ein Array von Zeichenfolgen handeln. Jede Zeichenfolge sollte a darstellensubprotocol Name und Server akzeptieren nur einen der übergebenen subprotocolsim Array. Akzeptiertsubprotocol kann durch Zugriff auf die Protokolleigenschaft des WebSocket-Objekts ermittelt werden.
// When the connection is open, send some data to the server
connection.onopen = function () {
connection.send('Ping'); // Send the message 'Ping' to the server
};
// Log errors
connection.onerror = function (error) {
console.log('WebSocket Error ' + error);
};
// Log messages from the server
connection.onmessage = function (e) {
console.log('Server: ' + e.data);
};Kommunikation mit dem Server
Sobald wir eine Verbindung zum Server haben (wenn das offene Ereignis ausgelöst wird), können wir Daten mit der Sendemethode (Ihre Nachricht) für das Verbindungsobjekt an den Server senden. Früher wurden nur Zeichenfolgen unterstützt, in der neuesten Spezifikation können jetzt auch Binärnachrichten gesendet werden. Zum Senden von Binärdaten wird ein Blob- oder ArrayBuffer-Objekt verwendet.
// Sending String
connection.send('your message');
// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
binary[i] = img.data[i];
}
connection.send(binary.buffer);
// Sending file as Blob
var file = document.querySelector('input[type = "file"]').files[0];
connection.send(file);Ebenso kann der Server uns jederzeit Nachrichten senden. In jedem Fall wird der Rückruf von onmessage ausgelöst. Der Rückruf empfängt ein Ereignisobjekt und die eigentliche Nachricht ist über die dataEigenschaft zugänglich .
WebSocket kann auch Binärnachrichten in der neuesten Spezifikation empfangen. Binäre Frames können im Blob- oder ArrayBuffer-Format empfangen werden. Um das Format der empfangenen Binärdatei anzugeben, setzen Sie die Eigenschaft binaryType des WebSocket-Objekts entweder auf 'blob' oder 'arraybuffer'. Das Standardformat ist 'blob'.
// Setting binaryType to accept received binary as either 'blob' or 'arraybuffer'
connection.binaryType = 'arraybuffer';
connection.onmessage = function(e) {
console.log(e.data.byteLength); // ArrayBuffer object if binary
};Eine weitere neu hinzugefügte Funktion von WebSocket sind Erweiterungen. Mithilfe von Erweiterungen können komprimierte, gemultiplexte Frames usw. gesendet werden.
// Determining accepted extensions
console.log(connection.extensions);Herkunftsübergreifende Kommunikation
Als modernes Protokoll ist die herkunftsübergreifende Kommunikation direkt in WebSocket integriert. WebSocket ermöglicht die Kommunikation zwischen Parteien in jeder Domäne. Der Server entscheidet, ob sein Dienst allen Clients oder nur denen zur Verfügung gestellt wird, die sich in einer Reihe genau definierter Domänen befinden.
Proxyserver
Jede neue Technologie bringt neue Probleme mit sich. Im Fall von WebSocket ist es die Kompatibilität mit Proxyservern, die HTTP-Verbindungen in den meisten Unternehmensnetzwerken vermitteln. Das WebSocket-Protokoll verwendet das HTTP-Upgrade-System (das normalerweise für HTTP / SSL verwendet wird), um eine HTTP-Verbindung auf eine WebSocket-Verbindung zu "upgraden". Einige Proxyserver mögen dies nicht und trennen die Verbindung. Selbst wenn ein bestimmter Client das WebSocket-Protokoll verwendet, kann möglicherweise keine Verbindung hergestellt werden. Dies macht den nächsten Abschnitt noch wichtiger :)
Die Serverseite
Durch die Verwendung von WebSocket wird ein völlig neues Verwendungsmuster für serverseitige Anwendungen erstellt. Während herkömmliche Server-Stacks wie LAMP auf den HTTP-Anforderungs- / Antwortzyklus ausgelegt sind, können sie mit einer großen Anzahl offener WebSocket-Verbindungen häufig nicht gut umgehen. Um eine große Anzahl von Verbindungen gleichzeitig offen zu halten, ist eine Architektur erforderlich, die eine hohe Parallelität bei geringen Leistungskosten erhält.