Exemple d'apprentissage détaillé des sockets Web HTML5 pour la communication en duplex intégral_compétences du didacticiel HTML5

La plupart des implémentations actuelles d'applications Web en temps réel tournent autour des sondages et d'autres technologies push côté serveur, dont la plus célèbre est Comet. La technologie Comet permet au serveur de transmettre activement les données au client de manière asynchrone.

Lors de l'utilisation de l'interrogation, le navigateur envoie périodiquement des requêtes HTTP et reçoit des réponses immédiatement ; lors de l'utilisation d'une interrogation longue, le navigateur envoie une requête au serveur, et le serveur la maintient ouverte pendant un certain temps ; le navigateur envoie une requête HTTP complète, mais le serveur envoie et conserve une réponse ouverte qui continue de se mettre à jour et reste ouverte indéfiniment.

Les trois méthodes ci-dessus impliqueront des en-têtes de requête et de réponse HTTP lors de l'envoi de données en temps réel et contiendront une grande quantité de données d'en-tête supplémentaires et inutiles, ce qui entraînera des retards de transmission.

1. Interprétation des WebSockets HTML5

1. Poignée de main WebSocket

Afin d'établir la communication WebSocket, le client et le serveur mettent à niveau le protocole HTTP vers le protocole WebSocket lors de la poignée de main initiale. Une fois la connexion établie, les messages WebSocket peuvent être envoyés entre le client et le serveur en mode duplex intégral.

Remarque : dans le réseau, chaque message commence par 0x00 octets et se termine par 0xFF, et les données intermédiaires utilisent le format de codage UTF-8.

2.Interface WebSocket

En plus de la définition du protocole WebSocket, l'interface WebSocket pour les applications JavaScript est également définie.

Copier le code

Le code est le suivant :

interface WebSocket{
attribut en lecture seule DOMString URL;
//État prêt
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const non signé short CLOSED = 2;
readonly attribut non signé short readyState ;
attribut en lecture seule non signé court bufferedAmount;
//Réseau
attribut Fonction onopen;
attribut Fonction onmessage;
attribut Fonction onclose;
envoi booléen (dans les données DOMSString);
void close ();
};
WebSocket implémente EventTarget;

Remarque : les préfixes ws:// et wss:// représentent respectivement les connexions WebSocket et les connexions WebSocket sécurisées.

2. API WebSockets HTML5

Cette section explique comment utiliser les WebSockets HTML5

1. Vérifiez si le navigateur le prend en charge

Utilisez window.WebSocket pour déterminer si le navigateur le prend en charge.

2. Utilisation de base de l'API

a. Création d'objets WebSocket et connexion au serveur WebSocket

Copier le code

Le code est le suivant :

url = "ws:/ /localhost : 8080/echo";
ws = new WebSocket(url);

b. Ajouter un écouteur d'événement

WebSocket suit le modèle de programmation asynchrone. Après avoir ouvert le socket, il vous suffit d'attendre que les événements se produisent sans interroger activement le serveur. Par conséquent, vous devez ajouter une fonction de rappel pour écouter les événements.

L'objet WebSocket a trois événements : ouverture, fermeture et message. L'événement open est déclenché lorsque la connexion est établie, l'événement message est déclenché lorsqu'un message est reçu et l'événement close est déclenché lorsque la connexion WebSocket est fermée.

Copier le code

Le code est le suivant :

ws.onopen = function( ){
log("open");
}
ws.onmessage = function(){
log(e.data);
}
ws.onclose = function( ){
log("fermé");
}

c.Envoyer un message

Lorsque le socket est ouvert (c'est-à-dire après avoir appelé l'écouteur onopen et avant d'appeler l'écouteur onclose), vous pouvez utiliser la méthode send pour envoyer un message.

ws.send("Hello World");

3. Exemples d'applications HTML5 WebSockets

Cette section combinera l'interface de géolocalisation décrite précédemment pour créer une application qui calcule la distance directement dans la page Web.

1. Écrire un fichier HTML

Copier le code

Le code est le suivant :

HTML5 WebSocket / Suivi de géolocalisation

Géolocalisation :

Votre navigateur ne prend pas en charge la géolocalisation HTML5

WebSocket :

Votre navigateur ne prend pas en charge HTML5 Web Sockets

2. Ajouter le code WebSocket

Copier le code

Le code est le suivant :

fonction loadDemo(){
/ /Assurez-vous que le navigateur prend en charge WebSocket
if(window.WebSocket){
url = "ws://localhost:8080";//broadcast WebSocket server location
ws = new WebSocket(url );
ws.onopen = function(){
updateSocketStatus("Connexion établie");
}
ws.onmessage = function(e){
updateSocketeStatus("Mettre à jour les données de localisation : " dataReturned( e.data));
}
}
}

3. Ajouter un code de géolocalisation

Copier le code

Le code est le suivant :

var geo;
if(navigator .geolocation){
geo = navigator.geolocation;
updateGeolocationStatus("Le navigateur prend en charge la géolocalisation HTML5");
}

geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//Mise à jour toutes les 20 s

function updateLocation(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var timestamp = position.timestamp;
updateGeolocationStatus(" Heure de mise à jour de l'emplacement : " timestamp);
var toSend = JSON.stringify([myId,latitude,longitude]);
sendMyLocation(toSend);
}

4. Fusionner tout le contenu

Copier le code

Le code est le suivant :

HTML5 WebSocket / Geolocation 追踪器

Geolocation:

你的浏览器不支持HTML5 Geolocation

WebSocket:

你的浏览器不支持HTML5 Web Sockets

<script></p> <p> //Référence à WebSocket</p> <p> <p> //L'ID aléatoire unique généré pour cette session</p> <p> var monId = Math.floor(100000*Math.random());</p> <p> //Nombre de lignes actuellement affichées</p> <p> var nombre de lignes ;</p> <p> fonction updateSocketStatus(message){</p> <p> document.getElementById("socketStatus").innerHTML = message;</p> <p> }</p> <p> fonction updateGeolocationStatus(message){</p> <p> document.getElementById("geoStatus").innerHTML = message;</p> <p> }</p> <p> fonction loadDemo(){</p> <p> //Assurez-vous que le navigateur prend en charge WebSocket</p> <p> si(window.WebSocket){</p> <p> url = "ws://localhost:8080";//emplacement du serveur WebSocket de diffusion</p> <p> ws = nouveau WebSocket(url);</p> <p> ws.onopen = fonction(){</p> <p> updateSocketStatus("Connexion établie");</p> <p> }</p> <p> ws.onmessage = fonction(e){</p> <p> updateSocketStatus("Mettre à jour les données de localisation :" dataReturned(e.data));</p> <p> }</p> <p> }</p> <p> var géo;</p> <p> if(navigateur.géolocalisation){</p> <p> géo = navigateur.géolocalisation;</p> <p> updateGeolocationStatus("Le navigateur prend en charge la géolocalisation HTML5");</p> <p> }</p> <p> geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//Mise à jour toutes les 20 s</p> <p> fonction updateLocation(position){</p> <p> var latitude = position.coords.latitude;</p> <p> var longitude = position.coords.longitude;</p> <p> var horodatage = position.timestamp;</p> <p> updateGeolocationStatus("Heure de mise à jour de l'emplacement : " horodatage);</p> <p> var toSend = JSON.stringify([myId,latitude,longitude]);</p> <p> envoyerMonEmplacement(versEnvoyer);</p> <p> }</p> <p> fonction sendMyLocation(newLocation){</p> <p> si(ws){</p> <p> ws.send(newLocation)</p> <p> }</p> <p> }</p> <p> données de fonctionReturned(locationData){</p> <p> var allData = JSON.parse(locationData);</p> <p> var entrantId = allData[1];</p> <p> var entrantLat = allData[2];</p> <p> var entrantLong = allData[3];</p> <p> var incomingRow = document.getElementById(incomingId);</p> <p> si(!incomingRow){</p> <p> incomingRow = document.getElementById("div");</p> <p> incomingRow.setAttribute("id",incomingId);</p> <p> incomingRow.userText = (incomingId == myId)?"Me":'User' rowCount;</p> <p> nombre de lignes ;</p> <p> document.body.appendChild(incomingRow);</p> <p> }</p> <p> incomingRow.innerHTML = incomingRow.userText " \ Lat : " </p> <p> Lat entrant " \ Lon : " </p> <p> <p> renvoie incomingRow.userText;</p> <p> }</p> <p> fonction handleLocationError(erreur){</p> <p> commutateur (code d'erreur){</p> <p> cas 0 :</p> <p>updateGeolocationStatus("Erreur lors de la récupération des informations de localisation : " error.message);</p> <p>pause;</p> <p> cas 1 :</p> <p>updateGeolocationStatus("L'utilisateur bloque l'accès aux informations de localisation.");</p> <p>pause;</p> <p> cas 2 :</p> <p>updateGeolocationStatus("Le navigateur ne peut pas détecter vos informations de localisation : " error.message);</p> <p>pause;</p> <p> cas 3 :</p> <p>updateGeolocationStatus("Le délai du navigateur a expiré lors de la récupération des informations de localisation.");</p> <p>pause;</p> <p> }<br> }</p> <p> </script>