Latest web development tutorials

HTML5 WebSocket

HTML5 WebSocket ist ein Start von der Vollduplex-Kommunikation über einen einzigen TCP-Verbindungsprotokoll zur Verfügung gestellt.

In der WebSocket API, der Browser und der Server nur eine Handshake-Aktion zu tun, dann, zwischen dem Browser und dem Server, auf die Bildung eines Fast-Track. Sie können Daten direkt untereinander.

Browser sendet an den Server via JavaScript Anfrage eine WebSocket-Verbindung herzustellen, wird die Verbindung hergestellt, der Client und der Server kann Daten direkt über TCP auszutauschen angeschlossen werden.

Wenn Sie die Web - Socket - Verbindung zu erhalten, können Sie Daten auf dem Server über die Methodesend () senden, und die Daten vom Server onMessageEreignis zurück zu empfangen.

Die folgende WebSocket API wird verwendet, um Objekte zu erstellen. 

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

Der obige Code erste Parameter url, geben Sie die URL-Verbindung. Der zweite Parameter ist optional Protokoll, das akzeptable Unterprotokoll angibt.

WebSocket Eigenschaft

Dies sind die Attribute WebSocket Objekt. Angenommen, wir den obigen Code verwenden, um ein Socket-Objekt zu erstellen:

Immobilien Beschreibung
Socket.readyState

Read-only - AttributReadystate Verbindungsstatus zeigt die folgenden Werte haben kann:

  • 0 - zeigt an, dass die Verbindung nicht nachgewiesen wurde.

  • 1 - zeigt die Verbindung hergestellt ist, kann es zu kommunizieren.

  • 2 - zeigt an, dass die Verbindung geschlossen wird.

  • 3 - zeigt an, dass die Verbindung geschlossen wurde, oder die Verbindung kann nicht geöffnet werden.

Socket.bufferedAmount

Read-only - AttributbufferedAmount wurde send () in eine Warteschlange gestellt werden für die Übertragung warten, aber noch nicht UTF-8 - Text Bytes ausgegeben.

WebSocket Veranstaltung

Hier sind die Ereignisse WebSocket Objekt. Angenommen, wir den obigen Code verwenden, um ein Socket-Objekt zu erstellen:

Ereignis Event-Handler Beschreibung
offen Socket.onopen Ausgelöst, wenn die Verbindung hergestellt ist
Nachricht Socket.onmessage Wenn empfängt der Client den Trigger-Server-Daten
Fehler Socket.onerror Es wird ausgelöst, wenn ein Fehler auftritt, Kommunikation
schließen Socket.onclose Ausgelöst, wenn die Verbindung geschlossen

WebSocket Verfahren

Hier sind die Methoden WebSocket Objekt. Angenommen, wir den obigen Code verwenden, um ein Socket-Objekt zu erstellen:

Weg Beschreibung
Socket.send ()

Verwenden Sie die Verbindungsdaten zu senden

Socket.close ()

Enge Verbindung

WebSocket Instanz

Nature WebSocket Protokoll ein TCP-basiertes Protokoll.

Um eine WebSocket-Anschluss, der Client-Browser initiiert ein HTTP-Server zuerst zu fordern zu schaffen, dass dieser Antrag und die üblichen HTTP-Anfragen, enthält einige zusätzliche Header-Informationen, wobei der zusätzliche Header-Informationen "Upgrade: WebSocket" zeigt an, dass dies ein Anwendungsprotokoll Upgrade HTTP-Anforderung, analysiert der Server die zusätzliche Header-Informationen dann Antwortnachricht an den Client, WebSocket Verbindung Client generiert wird, zurück und Server hergestellt ist, können beide Seiten, durch den Verbindungskanal freie Übertragung von Informationen, und diese Verbindung Es bleibt bestehen, bis der Client oder Server-Seite aktiv Partei die Verbindung zu schließen.

Client-HTML und JavaScript

Derzeit sind die meisten Browser WebSocket () Schnittstellen unterstützen, können Sie die Beispiele in den folgenden Browsern versuchen: Chrome, Mozilla, Opera und Safari.

w3big_websocket.html Dateiinhalte 

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>本教程(w3big.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="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
      
   </body>
</html>

Die Installation pywebsocket

Bevor das obige Programm ausgeführt wird, brauchen wir eine Unterstützung WebSocket-Dienst zu erstellen. Von pywebsocket herunterladen mod_pywebsocket oder Verwendung git Befehl zum Download: 

git clone https://github.com/google/pywebsocket.git

mod_pywebsocket Unterstützung benötigt Python-Umgebung

mod_pywebsocket eines Erweiterungen Sockel Apache HTTP-Netz, sind Installationsschritte wie folgt:

  • Entpacken Sie die heruntergeladene Datei.

  • Geben Siepywebsocket Verzeichnis.

  • Run: 

    $ python setup.py build
$ sudo python setup.py install

  • Siehe Dokumentation: 

    $ pydoc mod_pywebsocket

Open Service

Führen Sie den folgenden Befehl inpywebsocket / mod_pywebsocket Verzeichnis:

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

Der obige Befehl wird eine Service-Port-Nummer 9998 öffnen, verwenden Sie die -w das Verzeichnis Handler echo_wsh.py befindet einzustellen.

Jetzt können wir w3big_websocket.html Datei öffnen, die Sie zuvor in den Chrome-Browser erstellt. Falls Ihr Browser WebSocket () unterstützt, klicken Sie auf "Run WebSocket" können Sie den gesamten Prozess jeden Schritt des Pop-up-Fenster, den Prozess Gif-Demo finden Sie unter:

Sobald wir den Dienst beenden, wird es Pop-up "Verbindung geschlossen ...."