API WebSocket

Internet Explorer 10 et les applications du Windows Store en JavaScript prennent désormais en charge l’API WebSocket comme décrite dans la spécification WebSocket API du World Wide Web Consortium (W3C). La technologie WebSockets fournit un nouveau protocole et une nouvelle API JavaScript W3C pour la communication bidirectionnelle sur Internet. Ce nouveau protocole facilite l’utilisation de formats de données fixes et contourne le protocole HTTP plus lent basé sur des documents.

Le protocole standard HTTP actuel est lent, car il doit demander les documents auprès d’un serveur et attendre que le document soit envoyé pour afficher une page Web. WebSockets vous permet d’envoyer et de recevoir vos données immédiatement en utilisant du texte, des tableaux binaires ou des objets blob.

L’API WebSocket est simple, car elle nécessite très peu de code. Vous pouvez facilement tirer parti des échanges de données bidirectionnels à faible latence qui vous aideront à créer plus rapidement des jeux en ligne, des notifications de réseau social instantanées, des affichages en temps réel du cours des actions et des informations météorologiques ainsi que d’autres données en temps voulu.

Implémentation de WebSockets

L’implémentation de cette nouvelle technologie d’échange de données est simple si vous procédez comme suit :

1. Utilisez un navigateur client qui implémente le protocole WebSocket.
2. Écrivez du code dans une page Web qui crée un websocket client.
3. Écrivez du code sur un serveur Web qui répond à une demande client via un websocket.

Utiliser un client WebSocket

Internet Explorer 10 implémente le protocole WebSocket comme le font les autres principaux navigateurs. Pour savoir si votre navigateur prend en charge WebSocket, visitez le site Web caniuse.com.

Le protocole WebSocket tel que défini sur le site Web des outils IETF utilise les nouveaux schémas d’URL suivants.


ws://
wss://

Écrire du code client WebSocket

Le code de votre page Web doit effectuer ce qui suit :

1. Initialiser le websocket et le connecter au serveur.
2. Tester pour vérifier qu’il s’est initialisé et connecté.
3. Envoyer et recevoir des données.

Le code suivant montre du code type pour définir l’URL websocket :


var host = 'ws://example.microsoft.com';

Le code suivant indique comment établir une connexion au websocket et procéder à un test pour vérifier si la connexion s’est établie.


 var host = "ws://sample-host/echo";
 try {
    socket = new WebSocket(host);

    socket.onopen = function (openEvent) {
       document.getElementById("serverStatus").innerHTML = 
          'WebSocket Status:: Socket Open';
    };

 socket.onmessage = function (messageEvent) {

    if (messageEvent.data instanceof Blob) {
    var destinationCanvas = document.getElementById('destination');
    var destinationContext = destinationCanvas.getContext('2d');
    var image = new Image();
    image.onload = function () {
       destinationContext.clearRect(0, 0, 
          destinationCanvas.width, destinationCanvas.height);
       destinationContext.drawImage(image, 0, 0);
    }
    image.src = URL.createObjectURL(messageEvent.data);
 } else {
    document.getElementById("serverResponse").innerHTML = 
       'Server Reply:: ' + messageEvent.data;
    }
 };

 socket.onerror = function (errorEvent) {
    document.getElementById("serverStatus").innerHTML = 
      'WebSocket Status:: Error was reported';
    };

 socket.onclose = function (closeEvent) {
    document.getElementById("serverStatus").innerHTML = 
      'WebSocket Status:: Socket Closed';
    };
 }
  catch (exception) { if (window.console) console.log(exception); }
 }

 function sendTextMessage() {

    if (socket.readyState != WebSocket.OPEN) return;

    var e = document.getElementById("textmessage");
    socket.send(e.value);
 }

 function sendBinaryMessage() {
    if (socket.readyState != WebSocket.OPEN) return;

    var sourceCanvas = document.getElementById('source');

    socket.send(sourceCanvas.msToBlob());
 }    


Le code précédent suppose que votre page Web dispose de serverStatus, destination, serverResponse, textmessage et serverData en tant qu’éléments avec un ID. Le résultat sera affiché dans la fenêtre de la console si les outils de développement F12 sont exécutés. Pour envoyer des données de message texte, utilisez le type de code suivant.


var e = document.getElementById("msgText");
socket.send(e.value);

L’exemple de code précédent suppose que le texte du message que vous voulez envoyer se trouve dans un élément msgText comportant un ID de votre page Web. De même, vous pouvez utiliser l’événement onmessage pour détecter de nouveaux messages ou envoyer un message au serveur à l’aide de la méthode send. La méthode send permet d’envoyer du texte, des tableaux binaires ou des données de blob.

Écrire du code serveur WebSocket

Le code serveur qui traite les sockets peut être écrit dans n’importe quel langage serveur. Quel que soit le langage que vous choisissez, vous devez écrire du code qui accepte les demandes WebSocket et les traite de la façon appropriée.

Programmation WebSocket

WebSocket fournit des objets, des méthodes et des propriétés que vous pouvez utiliser pour la programmation WebSocket.

NomTypeDescription
WebSocket objetFournit un canal bidirectionnel vers l’hôte distant.
close méthodeFerme un websocket.
send méthodeEnvoie des données à un serveur à l’aide d’un websocket.
binaryType propriétéFormat de données binaires reçu par onmessage.
bufferedAmount propriétéNombre d’octets de données placés en file d’attente à l’aide de la méthode send.
extensions propriétéIndique les extensions que le serveur a sélectionnées.
onclose propriétéGestionnaire d’événements appelé lorsque le socket est fermé.
onerror propriétéGestionnaire d’événements appelé en cas d’erreur.
onmessage propriétéGestionnaire d’événements à notifier lorsqu’un message est reçu.
onopen propriétéGestionnaire d’événement appelé si le websocket est connecté.
protocol propriétéIndique le protocole que le serveur a sélectionné.
readyState propriétéIndique l’état de la connexion du websocket.
url propriétéIndique l’URL actuelle du socket.

 

Informations de référence sur les API

WebSocket API

Billets IEBlog

WebSockets dans Windows
WebSockets pour les sites

Spécification

API WebSocket

Rubriques connexes

Création d’applications Web en temps réel avec les WebSockets HTML5
Création d’applications Web en temps réelle avec les WebSockets et IIS, ASP.NET et WCF
Création d’applications sockets Windows runtime
Prise en main de WebSockets dans Windows 8
Découverte de System.Net.WebSockets : serveur echo ASP.NET simple
WebSockets : stable et prêt pour les développeurs

 

 

Afficher:
© 2014 Microsoft