Dies ist der erste Teil einer neuen Artikel-Serie rund um WebSockets. Im ersten Teil möchte ich euch die Grundlagen von WebSockets näher bringen. Die nächsten Teile handeln von der Implementierung mit JavaScript und PHP.
Was sind WebSockets?
WebSockets ist ein Netzwerkprotokoll, welches mit HTML5 eingeführt wurde und momentan nur von Google Chrome unterstützt wird. Es dient dazu die Kommunikation zwischen einem Client und dem Server in einem Webbrowser zu optimieren.
Bisher mussten Antworten vom Server immer vom Client gefordert werden (Pull-Technologie). Mit WebSockets ist es nun Möglich eine bidirektionale Verbindung zwischen Client und Server herzustellen, sodass der Server jederzeit Nachrichten an den Client senden kann (Push-Technologie).
Es gibt zwar schon zahlreiche Möglichkeiten die Funktionalität eines WebSockets nachzuahmen (Bsp.: AJAX-Longpolling), jedoch bringen diese Hacks immer einen gewissen Overhead durch das HTTP-Protokoll mit sich. WebSockets besitzen diesen Nachteil nicht.
Das WebSocket-Interface
Werfen wir einen Blick auf das WebSocket-Interface:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
[Constructor(in DOMString url, in optional DOMString protocol)] interface WebSocket { readonly attribute DOMString URL; // ready state const unsigned short CONNECTING = 0; const unsigned short OPEN = 1; const unsigned short CLOSING = 2; const unsigned short CLOSED = 3; readonly attribute unsigned short readyState; readonly attribute unsigned long bufferedAmount; // networking attribute Function onopen; attribute Function onmessage; attribute Function onerror; attribute Function onclose; boolean send(in DOMString data); void close(); }; WebSocket implements EventTarget; |
Eigenschaften
readyState– Status der Verbindung (0=connecting, 1=open, 2=closing, 3=closed)bufferedAmount– Bytes, die in der Warteschlange stehen
Methoden
send– eine Nachricht an den Server sendenclose– die Verbindung schließen
Event-Handler:
onopen– bei Öffnen der Verbindungonmessage– bei Empfangen einer Nachrichtonerror– bei Auftreten eines Fehlersonclose– bei Schließen der Verbindung
Ausblick
Mit dem Wissen über dieses Interface seid ihr bestens gerüstet für die nächsten Teile dieser Artikel-Serie, in denen wir eine vollständige Implementierung von WebSockets mit JavaScript und PHP erarbeiten und diese auf eine funktionsfähige Chat-Anwendung erweitern.
Tags: AJAX, Client, Google Chrome, Grundlagen, HTML5, HTTP-Protokoll, Interface, Kommunikation, Longpolling, Netzwerkprotokoll, Pull-Technologie, Push-Technologie, Server, WebSockets
Bin schon gespannt, gute Idee das Thema mal ausführlicher zu behandeln, auch wenn es noch Monate dauert bis es final und verbreitet ist. Aber für interaktive Webseiten wird es ein “must-have” sein denk ich. Firefox wird es mit dem Release von 3.7 rausbringen.
Für alle, die es gern out of the box haben, die Arbeit hat sich schon jemand gemacht:
http://mylittlehacks.appspot.com/phpwebsocket
ein funktionierender Websocket-Server in PHP inklusive einfachem Chatbot. Die Demo zu einem multiuser-chat auszubauen dürfte recht einfach sein.
Was ich an Websockets sehr toll fand: es ist überraschend einfach! Der Javascript-Teil, der benötig wird um mit Websockets zu arbeiten ist fast schon unverschämt kurz (4 Zeilen) und sehr logisch zu verwenden. Eine Technologie, die unbedingt so schnell wie möglich in alle Browser kommen sollte!
Hey Lukas,
auf die vorhandenen Libraries werde ich im nächsten Teil eingehen. Das Tutorial werde ich darauf aufbauen.
Die Einfachheit ist wirklich genial. Hoffen wir, dass diese geniale Technologie möglichst schnell massentauglich wird…
ach, sorry ich wollte dir nicht vorgreifen
ein Artikel, den ich neulich irgendwo gelesen habe (weiß leider nichtmehr wo) meinte, dass es wohl in der nächsten Zeit so sein wird, dass für Browser, die Websockets nicht unterstützen, eine langsame Fallback-Variante (Long polling, never ending iframes o.ä.) zur Verfügung stehen wird. Wenn das so in Javascript Frameworks Einzug hält, wäre die ganze Push-Geschichte langsam wirklich attraktiv – denn für den intensiven Einsatz sind die bisherigen Krücken halt doch zu langsam/unperformant, als Fallback hingegen würds ja reichen… mir kribbelts schon in den Fingern, damit was tolles zu machen!
Interessanter Artikel, ich würde mich sehr über eine Fortsetzung über dieses Thema freuen
So viele gute Artikel gibt es jedenfalls noch nicht dazu – noch weniger deutschsprachige *grins*.
… und wie geht’s weiter? Bin gespannt!
Ich habe aufgrund eines Projektes momentan nur extrem wenig Zeit zum schreiben.
Aber es wird bald weitergehen!
echt geil, danke dass du hier diesen thread gestartet hast.
die technologie wird sich durchsetzen und es ist schön, wenn eifrige entwickler vorlegen