HTML5 WebSocket verstehen

WebSocket von HTML5 verstehen

In der HTML5-Spezifikation ist meine Lieblings-Webtechnologie die WebSocket-API, die schnell populär wird. 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 senden. Werfen wir einen Blick auf die WebSocket-API von HTML5: Sie kann sowohl auf Client- als auch auf Serverseite verwendet werden. Und es gibt eine hervorragende Drittanbieter-API namens Socket.IO.

1. Was ist die WebSocket-API?
Die 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 beliebigen Client- und Serverprogrammen 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
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.
CODE:

// 创建一个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() 
};

WebSocket ist ein Protokoll für die Vollduplex-Kommunikation über eine einzelne TCP-Verbindung, das seit Beginn von HTML5 bereitgestellt wird.
In der WebSocket-API müssen der Browser und der Server nur eine Handshake-Aktion ausführen, und dann wird ein schneller Kanal zwischen dem Browser und dem Server gebildet. Daten können direkt zwischen beiden übertragen werden.

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

Nachdem Sie die Web-Socket-Verbindung erhalten haben, können Sie Daten über die Methode send() an den Server senden und die vom Server zurückgegebenen Daten über das Ereignis onmessage akzeptieren.

Die folgende API wird zum Erstellen von WebSocket-Objekten verwendet.

var socket = new WebSocket(url,[protocol]);
Der erste Parameter url im obigen Code gibt die URL des Links an. Der zweite Parameter Protokoll ist optional und gibt akzeptable Unterprotokolle an.

WebSocket-Eigenschaften

Im Folgenden sind die Eigenschaften des WebSocket-Objekts aufgeführt. Angenommen, wir verwenden den obigen Code, um ein Socket-Objekt zu erstellen:
Socket.readyState Das schreibgeschützte Attribut readyState stellt den Verbindungsstatus dar, der die folgenden Werte annehmen kann:
1. 0 – Zeigt an, dass die Verbindung noch nicht besteht gegründet worden.
2. 1-Zeigt an, dass der Link hergestellt wurde und auf ihn zugegriffen werden kann.
3. 2-Zeigt an, dass die Verbindung geschlossen wird.
4. 3-Zeigt an, dass die Verbindung geschlossen wurde oder nicht geöffnet werden kann.
Socket.bufferedAmount schreibgeschützt butteredAmount Die Anzahl der UTF-8-Textbytes, die mit send() in die Warteschlange gestellt wurden und auf die Übertragung warten, aber noch nicht gesendet wurden.

WebSocket-Ereignisse
Die folgenden Ereignisse sind verwandte Ereignisse von WebSocket-Objekten. Angenommen, wir verwenden den erstellten Socket:
Ereignis: Open Message Error Close
Vorfallverarbeitungsprogramm: Socket.onopen Socket.onMessage Socket.onClose
Beschreibung: Verbinden, um auslösende Client-Akzeptanzdienste zu erstellen. Geräteseitige Daten. Wird ausgelöst, wenn Ein Kommunikationsfehler tritt auf. Wird ausgelöst, wenn die Verbindung geschlossen wird.

WebSocket-Methode
Im Folgenden sind die relevanten Methoden des WebSocket-Objekts aufgeführt. Angenommen, wir verwenden den obigen Code, um ein Socket-Objekt zu erstellen:

Methode: Socket.send() Socket.close()
Beschreibung: Verwenden Sie die Verbindung, um Daten zu senden

Das obige ist der detaillierte Inhalt vonHTML5 WebSocket verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!