Machen Sie sich mit WebSocket in HTML5 vertraut

Lernen Sie den WebSocket von HTML5 kennen

In der HTML5-Spezifikation ist meine Lieblings-Webtechnologie die WebSocket-API, die sich schnell großer Beliebtheit erfreut. WebSocket bietet eine willkommene Alternative zur Ajax-Technologie, die wir seit einigen Jahren verwenden. Diese neue API bietet eine Möglichkeit, Nachrichten mithilfe einfacher Syntax effizient vom Client an den Server zu übertragen. Werfen wir einen Blick auf die WebSocket-API von HTML5: Sie kann clientseitig und serverseitig verwendet werden. Und es gibt eine hervorragende Drittanbieter-API namens Socket.IO.

1. Was ist die WebSocket-API in HTML5?

WebSocket API ist die asynchrone Client-Server-Kommunikationsmethode der nächsten Generation. Diese Kommunikation ersetzt einen einzelnen TCP-Socket unter Verwendung des ws- oder wss-Protokolls und kann von jedem Client- und Serverprogramm verwendet werden. WebSocket ist derzeit vom W3C standardisiert. WebSocket wird bereits von Browsern wie Firefox 4, Chrome 4, Opera 10.70 und Safari 5 unterstützt.

Das Tolle an der WebSocket-API ist, dass der Server und der Client jederzeit innerhalb eines bestimmten Zeitbereichs Informationen aneinander weitergeben können. WebSocket ist nicht auf die Ajax- (oder

Das Clevere an der Ajax-Technologie ist, dass es keine spezielle Möglichkeit gibt, sie zu nutzen. WebSocket wird für das angegebene Ziel erstellt und zum Pushen von Nachrichten in beide Richtungen verwendet.

2. Verwendung der WebSocket-API in HTML5

Konzentrieren Sie sich nur auf die clientseitige API, da jede serverseitige Sprache ihre eigene API hat. Das folgende Code-Snippet öffnet eine Verbindung, erstellt einen Ereignis-Listener für die Verbindung, trennt die Verbindung, gibt die Nachrichtenzeit an, sendet die Nachricht zurück an den Server und schließt die Verbindung.

Der Code lautet wie folgt:

// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080');
// 打开Socket 
socket.onopen = function(event){
  // 发送一个初始化消息
  socket.send('I am the client and I\'m listening!');
  // 监听消息
  socket.onmessage = function(event){
    console.log('Client received a message',event);
  };
  // 监听Socket的关闭
  socket.onclose = function(event){
    console.log('Client notified socket has closed',event);
  };
  // 关闭Socket.... 
  //socket.close()
};

Werfen wir einen Blick auf den Initialisierungsausschnitt oben. Der Parameter ist die URL und ws repräsentiert das WebSocket-Protokoll. Die Methoden onopen, onclose und onmessage verbinden Ereignisse mit der Socket-Instanz. Jede Methode stellt ein Ereignis bereit, das den Status des Sockets darstellt.

Das onmessage-Ereignis stellt ein Datenattribut bereit, das den Textteil der Nachricht enthalten kann. Der Hauptteil der Nachricht muss eine Zeichenfolge sein, die serialisiert/deserialisiert werden kann, um mehr Daten zu übertragen.

Die Syntax von WebSocket ist sehr einfach und die Verwendung von WebSockets ist unglaublich einfach ... es sei denn, der Client unterstützt WebSocket nicht. Der IE-Browser unterstützt derzeit keine WebSocket-Kommunikation. Wenn Ihr Client die WebSocket-Kommunikation nicht unterstützt, stehen Ihnen mehrere Fallback-Optionen zur Verfügung:

Flash-Technologie – Flash kann einen einfachen Ersatz bieten. Der offensichtlichste Nachteil der Verwendung von Flash besteht darin, dass nicht alle Clients Flash installiert haben und einige Clients, wie z. B. iPhone/iPad, Flash nicht unterstützen.

AJAX Long-Polling-Technologie – Die Verwendung von AJAX Long-Polling zur Simulation von WebSocket ist schon seit einiger Zeit in der Branche verbreitet. Es ist eine praktikable Technik, aber sie optimiert nicht die gesendete Nachricht. Das heißt, es ist eine Lösung, aber nicht die beste technische.

Da aktuelle Browser wie der IE WebSocket nicht unterstützen, was sollten wir tun, wenn wir die WebSocket-Ereignisverarbeitung bereitstellen, die Übertragung zurücksenden und eine einheitliche API auf der Serverseite verwenden müssen? Glücklicherweise hat Guillermo Rauch die Socket.IO-Technologie entwickelt.

3. WebSocket mit Socket.IO

Socket.IO ist eine WebSocket-API, die von Guillermo Rauch, dem Chief Technology Officer von LearnBoost und Chefwissenschaftler von LearnBoost Labs, erstellt wurde. Socket.IO verwendet die Erkennungsfunktion, um zu bestimmen, ob eine WebSocket-Verbindung, eine AJAX-Long-Polling-Verbindung oder Flash usw. hergestellt werden soll. Echtzeitanwendungen können schnell erstellt werden. Socket.IO bietet außerdem eine NodeJS-API, die der Client-API sehr ähnlich sieht.

[Verwandte Empfehlungen]

1. Kostenloses h5-Online-Video-Tutorial

2. HTML5-Vollversionshandbuch

3. php.cn Original-HTML5-Video-Tutorial

4. Ein Beispiel für das Zeichnen der roten Fünf-Sterne-Flagge mit h5Canvas