Implementieren Sie den WebSocket-Chatroom mit den HTML5-Websocket_html5-Tutorial-Fähigkeiten

Was ist ein Websocket?

Das WebSocket-Protokoll ist ein neues Protokoll, das von HTML5 eingeführt wurde. Sein Zweck besteht darin, eine Vollduplex-Kommunikation zwischen dem Browser und dem Server zu erreichen. Schüler, die den obigen Link lesen, müssen bereits in der Vergangenheit verstanden haben, wie dies mit geringer Effizienz und hohem Verbrauch (Polling oder Comet) durchgeführt werden kann. In der Websocket-API müssen Browser und Server lediglich eine Handshake-Aktion ausführen, und dann A Zwischen dem Browser und dem Server wird ein schneller Kanal gebildet. Daten können direkt zwischen beiden übertragen werden. Dies gleichzeitig zu tun hat zwei Vorteile

1. Reduzierte Kommunikationsübertragungsbytes: Im Vergleich zur vorherigen Verwendung von http zur Datenübertragung überträgt Websocket laut Baidu nur sehr wenig zusätzliche Informationen

2. Der Server kann Nachrichten aktiv an den Client weiterleiten, ohne dass der Client eine Abfrage durchführen muss.

Die Konzepte und Vorteile sind überall im Internet zu finden, daher werde ich nicht näher darauf eingehen Schauen Sie sich die Prinzipien an und beginnen Sie dann, eine Webversion des Chatrooms zu schreiben
Zusätzlich zum Drei-Wege-Handshake der TCP-Verbindung benötigen Client und Server beim Websocket-Protokoll einen zusätzlichen Handshake, um eine Verbindung herzustellen. In der neuesten Version des Protokolls sieht das so aus

Der Client sendet eine Anfrage an den Server. Anfrage senden

Code kopieren

Der Code lautet wie folgt:

GET / HTTP/1.1

Upgrade: websocket

Verbindung: Upgrade
Host: 127.0.0.1:8080
Ursprung: < a href="http://test.com">http:/ /test.com
Pragma: no-cache
Cache-Control: no-cache
Sec-WebSocket- Schlüssel: OtZtd55qBhJF2XLNDRgUMg==
Sec-WebSocket-Version: 13
Sec-WebSocket-Extensions: x-webkit-deflate-frame
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_0) AppleWebKit/537.36 (KHTML, wie Gecko) Chrome/31.0.1650.57 Safari/537.36



Der Server antwortet

Kopieren Sie den Code

Der Code lautet wie folgt:

HTTP/ 1.1 101 Switching Protocols

Upgrade: websocket

Verbindung: Upgrade
Sec-WebSocket-Accept: xsOSgr30aKL2GNZKNHKmeT1qYjA=


Der „Sec-WebSocket-Key“ in der Anfrage zufällig ist, verwendet der Server diese Daten, um einen SHA-1-Informationsauszug zu erstellen. Fügen Sie den magischen String „258EAFA5-E914-47DA-95CA-C5AB0DC85B11“ zu „Sec-WebSocket-Key“ hinzu. Verwenden Sie die SHA-1-Verschlüsselung, dann die BASE-64-Verschlüsselung und geben Sie das Ergebnis als Wert des „Sec-WebSocket-Accept“-Headers (aus Wikipedia) an den Client zurück.

Websocket-API

Nach dem Handshake stellen der Browser und der Server eine Verbindung her und die beiden können miteinander kommunizieren. Die API von Websocket ist wirklich einfach. Schauen Sie sich die W3C-Definition an

Kopieren Sie den Code

Der Code lautet wie folgt: enum BinaryType { "blob", "arraybuffer" };

[Constructor(DOMString url, optional (DOMString or DOMString[]) Protocols)]

interface WebSocket : EventTarget {

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;
schreibgeschütztes Attribut unsigned short readyState;
schreibgeschütztes Attribut unsigned long bufferedAmount;

// Netzwerk
Attribut EventHandler onopen;
Attribut EventHandler onerror;
Attribut EventHandler onclose;
readonly-Attribut DOMString extensions;
readonly-Attribut DOMString Protocol;
void close([Clamp] optional unsigned short code, optional DOMString reason);

// Messaging
attribute EventHandler onmessage;
attribute BinaryType binaryType;
void send(DOMString data);
void send(Blob data);
void send(ArrayBuffer data);
void send(ArrayBufferView data);
};


Websocket erstellen

Code kopieren

Der Code lautet wie folgt:ws=new WebSocket(address); //ws://127.0.0.1:8080

Call it Konstruktor und übergeben Sie die Adresse, um einen Websocket zu erstellen. Beachten Sie, dass das Adressprotokoll ws/wss sein muss

Socket schließen





Code kopieren

Der Code lautet wie folgt:ws.close();

Rufen Sie die Methode close() der Webservice-Instanz auf, um den Webservice zu schließen. Natürlich können Sie auch einen Code und eine Zeichenfolge übergeben, um zu erklären, warum er geschlossen wird

Mehrere Callback-Funktionshandles

Aufgrund der asynchronen Ausführung sind Callback-Funktionen natürlich unverzichtbar. Es gibt vier wichtige:

onopen: wird nach dem Herstellen der Verbindung aufgerufen.
onmessage: wird nach dem Empfang der Servernachricht aufgerufen .
onerror: Wird aufgerufen, wenn ein Fehler auftritt.
onclose: Wird beim Schließen der Verbindung aufgerufen Sie können erkennen, was sie tut, indem Sie sich den Namen ansehen. Jede Rückruffunktion übergibt ein Ereignisobjekt, und auf die Nachricht kann über event.data zugegriffen werden

Mithilfe der API

Wir können den Socket erfolgreich erstellen. Weisen Sie dann seiner Rückruffunktion einen Wert zu.

Kopieren Sie den CodeDer Code ist wie folgt:

ws=new WebSocket(address);
ws.onopen=function(e){
var msg=document.createElement('div');
msg.style.color='#0f0';
msg.innerHTML="Server > Verbindung offen.";
msgContainer.appendChild(msg);
ws.send('{<' document .getElementById('name').value '> }');

Sie können auch die Ereignisbindung verwenden

Kopieren Code Der Code lautet wie folgt:

ws=new WebSocket(address);
ws.addEventListener('open',function(e){
var msg=document.createElement('div') ;
msg.style.color='#0f0';
msg.innerHTML="Server > Verbindung offen";
msgContainer.appendChild (msg);
ws.send('{ <' document.getElementById('name').value '>}');

Clientseitige Implementierung

Tatsächlich ist die clientseitige Implementierung relativ einfach. Abgesehen von einigen Sätzen im Zusammenhang mit Websocket gibt es einige einfache Funktionen wie den automatischen Fokus, die Verarbeitung wichtiger Ereignisse und die automatische Positionierung Ich werde sie nicht einzeln im Nachrichtenfeld unten erklären