HTML5 WebSocket

WebSocket ist ein Protokoll, das HTML5 für Vollduplex-Kommunikation über eine einzelne TCP-Verbindung bereitzustellen begann.

WebSocket vereinfacht den Datenaustausch zwischen Client und Server und ermöglicht es dem Server, Daten aktiv an den Client zu pushen. In der WebSocket-API müssen Browser und Server nur einen Handshake abschließen, danach können sie direkt eine persistente Verbindung aufbauen und eine bidirektionale Datenübertragung durchführen.

In der WebSocket-API müssen Browser und Server nur eine Handshake-Aktion ausführen, und dann wird ein schneller Kanal zwischen Browser und Server gebildet. Danach können beide direkt Daten untereinander übertragen.

Heutzutage verwenden viele Websites Ajax-Polling, um Push-Technologie zu implementieren. Beim Polling sendet der Browser in bestimmten Zeitintervallen (z. B. jede Sekunde) HTTP-Anfragen an den Server, und der Server gibt dann die neuesten Daten an den Browser des Clients zurück. Dieses traditionelle Modell hat offensichtliche Nachteile: Der Browser muss kontinuierlich Anfragen an den Server senden. HTTP-Anfragen können jedoch lange Header enthalten, und die tatsächlich gültigen Daten machen möglicherweise nur einen sehr kleinen Teil aus, was offensichtlich viel Bandbreite und andere Ressourcen verschwendet.

Das von HTML5 definierte WebSocket-Protokoll kann Serverressourcen und Bandbreite besser sparen und kann in größerem Umfang in Echtzeit kommunizieren.

Der Browser sendet über JavaScript eine Anfrage an den Server, um eine WebSocket-Verbindung aufzubauen. Nachdem die Verbindung hergestellt ist, können Client und Server direkt Daten über die TCP-Verbindung austauschen.

Wenn Sie eine WebSocket-Verbindung erlangt haben, können Sie diesend()-Methode verwenden, um Daten an den Server zu senden, und dasonmessage-Ereignis verwenden, um vom Server zurückgegebene Daten zu empfangen.

Die folgende API wird verwendet, um ein WebSocket-Objekt zu erstellen.

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

Im obigen Code gibt der erste Parameter url die URL der Verbindung an. Der zweite Parameter protocol ist optional und gibt die akzeptablen Subprotokolle an.

WebSocket-Eigenschaften

Die folgenden sind die Eigenschaften des WebSocket-Objekts. Angenommen, wir haben das Socket-Objekt mit dem obigen Code erstellt:

Eigenschaft Beschreibung
Socket.readyState

Schreibgeschütztes AttributreadyStateGibt den Verbindungsstatus an, der folgende Werte annehmen kann:

  • 0 - Gibt an, dass die Verbindung noch nicht hergestellt wurde.

  • 1 - Gibt an, dass die Verbindung hergestellt wurde und Kommunikation möglich ist.

  • 2 - Gibt an, dass sich die Verbindung gerade schließt.

  • 3 - Gibt an, dass die Verbindung geschlossen wurde oder nicht geöffnet werden konnte.
Socket.bufferedAmount

Schreibgeschütztes AttributbufferedAmountDie Anzahl der UTF-8-Textbytes, die durch send() in die Warteschlange für die Übertragung gestellt wurden, aber noch nicht gesendet worden sind.

WebSocket-Ereignisse

Im Folgenden werden die zugehörigen Ereignisse des WebSocket-Objekts beschrieben. Angenommen, wir haben das Socket-Objekt mit dem obigen Code erstellt:

Ereignis Event-Handler Beschreibung
open Socket.onopen Wird ausgelöst, wenn die Verbindung hergestellt wird
message Socket.onmessage Wird ausgelöst, wenn der Client Daten vom Server empfängt
error Socket.onerror Wird ausgelöst, wenn ein Kommunikationsfehler auftritt
close Socket.onclose Wird ausgelöst, wenn die Verbindung geschlossen wird

WebSocket-Methoden

Im Folgenden sind die zugehörigen Methoden des WebSocket-Objekts aufgeführt. Angenommen, wir haben das Socket-Objekt mit dem obigen Code erstellt:

Methode Beschreibung
Socket.send()

Daten über die Verbindung senden
Socket.close()

Schließen Sie die Verbindung

WebSocket-Beispiele

Das WebSocket-Protokoll ist im Wesentlichen ein TCP-basiertes Protokoll.

Um eine WebSocket-Verbindung herzustellen, muss der Client-Browser zunächst eine HTTP-Anfrage an den Server initiieren. Diese Anfrage unterscheidet sich von einer regulären HTTP-Anfrage und enthält einige zusätzliche Header-Informationen. Der zusätzliche Header "Upgrade: WebSocket" zeigt an, dass es sich um eine HTTP-Anfrage handelt, die eine Protokollaktualisierung beantragt. Der Server analysiert diese zusätzlichen Header-Informationen und generiert eine Antwortnachricht, die an den Client zurückgegeben wird. Die WebSocket-Verbindung zwischen Client und Server wird dann hergestellt, und beide Parteien können frei Informationen über diesen Verbindungskanal austauschen. Diese Verbindung bleibt bestehen, bis entweder der Client oder der Server die Verbindung aktiv schließt.

Clientseitiges HTML und JavaScript

Derzeit unterstützen die meisten Browser die WebSocket()-Schnittstelle. Sie können das Beispiel in den folgenden Browsern ausprobieren: Chrome, Mozilla, Opera und Safari.

Inhalt der Datei example_websocket.html

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>Example(example.com)</title>
    
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
                
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
                
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
        
   </head>
   <body>
   
      <div id="sse">
         <a href="WebSocketTest().html">运行 WebSocket</a>
      </div>
      
   </body>
</html>

pywebsocket installieren

Bevor wir das obige Programm ausführen, müssen wir einen Dienst erstellen, der WebSocket unterstützt. Laden Sie mod_pywebsocket vonpywebsocketherunter, oder verwenden Sie den git-Befehl zum Herunterladen:

git clone https://github.com/googlearchive/pywebsocket
<p>
mod_pywebsocket  需要 python 环境支持</p>
mod_pywebsocket 是一个 Apache HTTP 的 Web Socket扩展，安装步骤如下：</p>

<ul>
<li><p>解压下载的文件。</p></li>
<li><p>进入 <b>pywebsocket</b> 目录。</p></li>
<li><p>执行命令：</p>
<pre>$ python setup.py build
$ sudo python setup.py install

  • Dokumentation anzeigen:

    $ pydoc mod_pywebsocket

    • Dienst starten

    Führen Sie im Verzeichnispywebsocket/mod_pywebsocketden folgenden Befehl aus:

    $ sudo python standalone.py -p 9998 -w ../example/

    Der obige Befehl startet einen Dienst mit der Portnummer 9998; mit -w wird das Verzeichnis festgelegt, in dem sich der Handler echo_wsh.py befindet.

    Nun können wir die zuvor erstellte Datei example_websocket.html im Chrome-Browser öffnen. Wenn Ihr Browser WebSocket() unterstützt, klicken Sie auf "Run WebSocket", und Sie sehen Pop-up-Fenster für jeden Schritt des gesamten Prozesses. GIF-Demonstration des Prozesses:

    Nachdem wir den Dienst gestoppt haben, erscheint "Connection closed...".

    Weitere Erweiterungen