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 senden
• close – die Verbindung schließen

Event-Handler:

• onopen – bei Öffnen der Verbindung
• onmessage – bei Empfangen einer Nachricht
• onerror – bei Auftreten eines Fehlers
• onclose – 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.