Implémenter la salle de discussion Websocket à l'aide des compétences du didacticiel html5 websocket

Implémenter la salle de discussion Websocket à l'aide des compétences du didacticiel html5 websocket_html5

WBOY

Libérer： 2016-05-16 15:48:34

original

1857 Les gens l'ont consulté

Qu'est-ce que websocket

Le protocole WebSocket est un nouveau protocole introduit par html5. Son but est de réaliser une communication full-duplex entre le navigateur et le serveur. Les étudiants qui lisent le lien ci-dessus doivent déjà avoir compris comment procéder dans le passé avec une faible efficacité et une consommation élevée (polling ou comet). Dans l'API websocket, le navigateur et le serveur n'ont besoin que d'effectuer une action de prise de contact, puis A). un canal rapide est formé entre le navigateur et le serveur. Les données peuvent être transmises directement entre les deux. Faire cela en même temps présente deux avantages

1. Réduction des octets de transmission de communication : par rapport à l'utilisation précédente de http pour transmettre des données, websocket transmet très peu d'informations supplémentaires. Selon Baidu, ce n'est que 2k
2. Le serveur peut activement envoyer des messages au client sans que celui-ci ait à interroger

Les concepts et les avantages sont partout sur Internet, je n'entrerai donc pas dans les détails. regardez les principes puis commencez à écrire une version Web du salon de discussion

Serrez la main
.

En plus de la poignée de main à trois voies de la connexion TCP, dans le protocole websocket, le client et le serveur ont besoin d'une poignée de main supplémentaire pour établir une connexion. Dans la dernière version du protocole, cela ressemble à ceci

.

Le client envoie une requête au serveur Envoyer la requête

Copier le codeLe code est le suivant :

GET / HTTP/1.1
Mise à niveau : websocket
Connexion : Mise à niveau
Hôte : 127.0.0.1:8080
Origine : < a href="http://test.com">http:/ /test.com
Pragma : sans cache
Cache-Control : sans cache
Sec-WebSocket- Clé : 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, comme Gecko) Chrome/31.0.1650.57 Safari/537.36

Le serveur répond

Copiez le codeLe code est le suivant :

HTTP/ 1.1 101 Protocoles de commutation
Mise à niveau : websocket
Connexion : Mise à niveau
Sec-WebSocket-Accept : xsOSgr30aKL2GNZKNHKmeT1qYjA=

La "Sec-WebSocket-Key" dans la requête est aléatoire, le serveur utilisera ces données pour construire un résumé d'informations SHA-1. Ajoutez la chaîne magique "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" à "Sec-WebSocket-Key". Utilisez le cryptage SHA-1, puis l'encodage BASE-64 et renvoyez le résultat au client sous la forme de la valeur de l'en-tête "Sec-WebSocket-Accept" (de Wikipédia).

API websocket
Après la poignée de main, le navigateur et le serveur établissent une connexion et les deux peuvent communiquer entre eux. L'API de websocket est vraiment simple. Jetez un œil à la définition du W3C

Copiez le code Le code. est la suivante :

enum BinaryType { "blob", "arraybuffer" };
[Constructeur (URL DOMString, protocoles facultatifs (DOMString ou DOMString[]))]
interface WebSocket : EventTarget {
attribut en lecture seule DOMString url;

// état prêt
const unsigned short CONNECTING = 0;
const non signé short OPEN = 1;
const non signé short CLOSING = 2 ;
const unsigned short CLOSED = 3;
attribut en lecture seule non signé short readyState;
attribut en lecture seule non signé long bufferedAmount;

// mise en réseau
attribut EventHandler onopen;
attribut EventHandler onerror;
attribut EventHandler onclose;
attribut en lecture seule extensions DOMString;
attribut en lecture seule protocole DOMString;
void close ([Clamp] code court non signé facultatif, raison DOMString facultative);

// messagerie
attribut EventHandler onmessage;
attribut BinaryType binaireType;
void send (données DOMString);
void send (données Blob);
void send (données ArrayBuffer);
void send(ArrayBufferView data);
};

Créer un websocket

Copier le codeLe code est le suivant :

ws=new WebSocket(address); //ws://127.0.0.1:8080

Appelez-le constructeur et transmettre l'adresse pour créer un websocket, il est à noter que le protocole d'adresse doit être ws/wss

Fermer le socket

Copier le codeLe code est le suivant :

ws.close();

Appelez la méthode close() de l'instance du service Web pour fermer le service Web. Bien sûr, vous pouvez également transmettre un code et une chaîne pour expliquer pourquoi il est fermé

Plusieurs poignées de fonction de rappel <.>
En raison de son exécution asynchrone, les fonctions de rappel sont naturellement indispensables. Il y en a quatre importantes :

onopen : appelée après la création de la connexion
onmessage : appelée après réception du message du serveur. .
onerror : appelé lorsqu'une erreur se produit.
onclose : Appelé lors de la fermeture de la connexion
. Vous pouvez savoir ce qu'elle fait en regardant le nom. Chaque fonction de rappel transmettra un objet Event et le message est accessible via event.data

À l'aide de l'API

Nous pouvons réussir à créer le socket Puis attribuer une valeur à sa fonction de rappel

Copiez le codeLe code est comme suit :

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

Vous pouvez également utiliser la liaison d'événement

Copier code Le code est le suivant :

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

Implémentation côté client

En fait, l'implémentation côté client est relativement simple, à l'exception de quelques phrases liées au websocket, il existe quelques fonctions simples telles que la mise au point automatique, le traitement des événements de clé de saisie et le positionnement automatique des éléments. la boîte de message en bas, je ne les expliquerai pas un par un