Skip to content

HTML5 WebSocket Verbindung

Der Trend im Internet geht immer mehr zu dynamischen Webseiten bzw. Webapplikationen. Dabei interagieren immer zwei Parteien miteinander. Auf der einen Seite gibt es den Client, der beispielsweise über einen Internetbrowser Inhalte beziehen möchte. Auf der anderen Seite gibt es den Server, der die entsprechenden Inhalte bereithält. Der klassische Weg für das Beziehen von Inhalten über das Internet sieht dabei wie folgt aus.

Klassische Client / Server Kommunikation

Der Client sendet eine Anfrage (Request) an den Server. Der Server gibt dann
eine entsprechende Antwort (Response) zurück. Wenn der Client neue
Informationen vom Server erhalten möchte, muss dieser erneut eine Anfrage
stellen. Der Nachteil bei diesem Modell ist, dass die Kommunikation immer vom
Client initiiert wird und der Server den Client nicht direkt über neue Inhalte
informieren kann.
Außerdem besteht nach einem Request-Response-Zyklus keine Verbindung
zwischen den beiden Seiten, diese wird erst bei einer erneuten Anfrage des
Clients wieder hergestellt.

Eine dauerhafte und bidirektionale Verbindung zwischen zwei Parteien in einem
Internet Browser ermöglicht die HTML5 WebSocket-Technologie. Dies bedeutet,
dass sich der Client und der Server austauschen können, ohne sich an das in der
Abbildung  dargestellte Modell zu halten. Der Server hat hierdurch die
Möglichkeit, ereignisbasierte Inhalte direkt an den Client zu senden. Der
Verbindungsaufbau lässt sich durch die folgende Abbildung darstellen.

Websocket Kommunikation

Die Verbindung zwischen beiden Parteien beginnt mit der Ausverhandlung der
Verbindungseigenschaften, wie zum Beispiel das zu verwendende
Verbindungsprotokoll. Dieser Vorgang nennt sich Handshake (Handschlag).
Um eine WebSocket-Verbindung aufzubauen, sendet der Client zuerst eine HTTPGET
Anfrage an den Server. Diese Anfrage beinhaltet das Anliegen, das Protokoll
der Verbindung ändern zu wollen. Und zwar vom HTTP-Protokoll zum WebSocket-
Protokoll, welches auf dem TCP-Protokoll basiert. Dieser Vorgang nennt sich
Upgrade (Aufrüstung) und wird über den HTTP-Header initiiert. Nachdem der
Server die Bestätigung des Vorgangs dem Client mitgeteilt hat, besteht zwischen
beiden Seiten eine persistente Verbindung, wodurch der wiederkehrende Auf- und
Abbau von Verbindungen entfällt.

1 Request URL: ws://localhost:4442/socket.io/1/websocket/WMTm9QbxbUeSi
2 Request Method: GET
3 Status Code: 101 Switching Protocols
4 Request Headers
5 Cache-Control:no-cache
6 Connection: Upgrade
7 Host: localhost:4442
8 Origin: http://localhost:4442
9 Pragma: no-cache
10 Sec-WebSocket-Extensions: x-webkit-deflate-frame
11 Sec-WebSocket-Key: 4VwEqOM7RznJmkjnILUNTQ==
12 Sec-WebSocket-Version: 13
13 Upgrade: websocket
14 Response Headers
15 HTTP/1.1 101 Switching Protocols
16 Connection: Upgrade
17 Sec-WebSocket-Accept: oTI3OVNbQ1Jgm4UbPey5A0u4Cqg=
18 Upgrade: websocket

 

In der Abbildung ist das Handshake-Verfahren in Form des HTTP-Headers
dargestellt. In Zeile 6 informiert der Client den Server darüber, dass er das
Protokoll Aufrüsten möchte (Connection: Upgrade). Außerdem bestimmt er die
gewünschte WebSocket-Protokoll Version (Sec-WebSocket-Version) und
übergibt zusätzlich einen zufällig generierten Key (Sec-Websocket-Key),
welcher später für die Verifizierung des Vorgangs dient.
In der Zeile 13 legt der Client fest, zu welchem Protokoll er aufrüsten möchte. In
diesem Fall zum WebSocket-Protokoll (Upgrade: websocket).
Der Server antwortet ab Zeile 14 mit der Bestätigung der Anfrage und somit auf
die Aufrüstung des Protokolls. Deutlich wird dies in der Zeile 15 durch die Angabe
des HTTP-Statuscodes 101, welcher besagt, dass der Server die
Aufrüstungsanforderung versteht und bereit ist, das Protokoll zu wechseln.
Überdies beinhaltet die Bestätigung des Servers einen Antwort-Key (Sec-
Websocket-Accept), welcher auf dem Key der Anfrage (Sec-WebSocket-Key)
basiert und verifizieren soll, dass die Antwort aktuell ist und tatsächlich vom
angefragten Server stammt.

 

Im nächsten Blogeintrag werde ich etwas zu den Spezifikationen der HTML5 Websocket API schreiben und zeigen, wie einfach es ist mit JavaScript eine WebSocket Verbindung aufzubauen.

Veröffentlicht inAllgemein

Comments are closed.