[webSocket] Tutoriel WebSocket

WebSocket est un protocole de communication réseau et de nombreuses fonctions avancées l'exigent.

Cet article décrit comment utiliser le protocole WebSocket.

1. Pourquoi avons-nous besoin de WebSocket?

Les nouveaux utilisateurs de WebSocket poseront la même question: nous avons déjà le protocole HTTP, pourquoi avons-nous besoin d'un autre protocole? Quels avantages cela peut-il apporter?

La réponse est simple, car le protocole HTTP a un défaut: la communication ne peut être initiée que par le client.

Par exemple, si nous voulons connaître la météo du jour, nous ne pouvons que demander au client d'envoyer une requête au serveur, et le serveur renvoie le résultat de la requête. Le protocole HTTP ne peut pas permettre au serveur de pousser activement les informations vers le client.

La caractéristique de cette requête unidirectionnelle est destinée à être très gênante pour le client de savoir si le serveur a des changements d'état continus. Nous ne pouvons utiliser que le "polling": de temps en temps, nous enverrons une requête pour savoir si le serveur a de nouvelles informations. Le scénario le plus typique est une salle de discussion.

L'interrogation est inefficace et gaspille des ressources (car la connexion doit rester connectée ou la connexion HTTP est toujours ouverte). Par conséquent, les ingénieurs se demandent s'il existe une meilleure solution. C'est ainsi que WebSocket a été inventé.

2. Présentation

Le protocole WebSocket est né en 2008 et est devenu un standard international en 2011. Tous les navigateurs sont déjà pris en charge.

Sa plus grande caractéristique est que le serveur peut activement pousser des informations vers le client, et le client peut également envoyer activement des informations au serveur.Il s'agit d'un véritable dialogue bidirectionnel égal et appartient à un type de technologie de poussée de serveur.

Les autres caractéristiques comprennent:

(1) Basé sur le protocole TCP, l'implémentation côté serveur est relativement simple.

(2) Il a une bonne compatibilité avec le protocole HTTP. Les ports par défaut sont également 80 et 443, et le protocole HTTP est utilisé dans la phase de prise de contact, il n'est donc pas facile de bloquer pendant la prise de contact et peut passer par divers serveurs proxy HTTP.

(3) Le format de données est relativement léger, la surcharge de performance est faible et la communication est efficace.

(4) Vous pouvez envoyer du texte ou des données binaires.

(5) Il n'y a aucune restriction d'homologie et le client peut communiquer avec n'importe quel serveur.

(6) L'identifiant du protocole est ws (s'il est chiffré, il est wss) et le site Web du serveur est l'URL.

ws://example.com:80/some/path

Trois, un exemple simple du client

L'utilisation de WebSocket est assez simple.

Ce qui suit est un exemple de script Web (cliquez ici pour voir le résultat en cours d'exécution), qui peut être compris en un coup d'œil.

var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) {
    
     
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
    
    
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
    
    
  console.log("Connection closed.");
};      

Quatrièmement, l'API du client

L'API du client WebSocket est la suivante.

4.1 Constructeur WebSocket

L'objet WebSocket est utilisé comme constructeur pour créer une nouvelle instance WebSocket.

var ws = new WebSocket('ws://localhost:8080');

Après avoir exécuté l'instruction ci-dessus, le client se connectera au serveur.

Pour obtenir une liste de toutes les propriétés et méthodes de l'objet d'instance, cliquez ici.

4.2 webSocket.readyState

La propriété readyState renvoie l'état actuel de l'objet d'instance, il existe quatre types.

• CONNEXION: La valeur est 0, ce qui signifie qu'il se connecte.
• OPEN: La valeur est 1, ce qui signifie que la connexion est réussie et que la communication est possible.
• CLOSING: La valeur est 2, ce qui signifie que la connexion est en cours de fermeture.
• CLOSED: la valeur est 3, ce qui signifie que la connexion a été fermée ou n'a pas réussi à ouvrir la connexion.
  Ce qui suit est un exemple.

switch (ws.readyState) {
    
    
  case WebSocket.CONNECTING:
    // do something
    break;
  case WebSocket.OPEN:
    // do something
    break;
  case WebSocket.CLOSING:
    // do something
    break;
  case WebSocket.CLOSED:
    // do something
    break;
  default:
    // this never happens
    break;
}

4.3 webSocket.onopen

L'attribut onopen de l'objet d'instance est utilisé pour spécifier la fonction de rappel après une connexion réussie.

ws.onopen = function () {
    
    
  ws.send('Hello Server!');
}

Si vous souhaitez spécifier plusieurs fonctions de rappel, vous pouvez utiliser la addEventListenerméthode.

ws.addEventListener('open', function (event) {
    
    
  ws.send('Hello Server!');
});

4.4 webSocket.onclose

L'attribut onclose de l'objet d'instance est utilisé pour spécifier la fonction de rappel après la fermeture de la connexion.

ws.onclose = function(event) {
    
    
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
};

ws.addEventListener("close", function(event) {
    
    
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
});

4.5 webSocket.onmessage

L'attribut onmessage de l'objet instance est utilisé pour spécifier la fonction de rappel après avoir reçu les données du serveur.

ws.onmessage = function(event) {
    
    
  var data = event.data;
  // 处理数据
};

ws.addEventListener("message", function(event) {
    
    
  var data = event.data;
  // 处理数据
});

Notez que les données du serveur peuvent être du texte ou des données binaires (objet blob ou objet Arraybuffer).

ws.onmessage = function(event){
    
    
  if(typeof event.data === String) {
    
    
    console.log("Received data string");
  }

  if(event.data instanceof ArrayBuffer){
    
    
    var buffer = event.data;
    console.log("Received arraybuffer");
  }
}

Outre la détermination dynamique du type de données reçues, vous pouvez également utiliser l'attribut binaryType pour spécifier explicitement le type de données binaires reçu.

// 收到的是 blob 数据
ws.binaryType = "blob";
ws.onmessage = function(e) {
    
    
  console.log(e.data.size);
};

// 收到的是 ArrayBuffer 数据
ws.binaryType = "arraybuffer";
ws.onmessage = function(e) {
    
    
  console.log(e.data.byteLength);
};

4.6 webSocket.send ()

La méthode send () de l'objet instance est utilisée pour envoyer des données au serveur.

Exemple d'envoi de texte.

ws.send('your message');

Exemple d'envoi d'un objet Blob.

var file = document
  .querySelector('input[type="file"]')
  .files[0];
ws.send(file);

Exemple d'envoi d'objet ArrayBuffer.

// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
    
    
  binary[i] = img.data[i];
}
ws.send(binary.buffer);

4.7 webSocket.bufferedAmount

La propriété bufferedAmount de l'objet d'instance indique combien d'octets de données binaires n'ont pas été envoyés. Il peut être utilisé pour déterminer si la transmission est terminée.

var data = new ArrayBuffer(10000000);
socket.send(data);

if (socket.bufferedAmount === 0) {
    
    
  // 发送完毕
} else {
    
    
  // 发送还没结束
}

4.8 webSocket.onerror

L'attribut onerror de l'objet instance est utilisé pour spécifier la fonction de rappel lorsqu'une erreur est signalée.

socket.onerror = function(event) {
    
    
  // handle error event
};

socket.addEventListener("error", function(event) {
    
    
  // handle error event
});

Cinq, la réalisation du serveur

Pour l'implémentation du serveur WebSocket, vous pouvez consulter la liste sur Wikipédia.

Il existe trois implémentations Node couramment utilisées comme suit.

• µWebSockets
• Socket.IO
• Pour l'
  utilisation spécifique de WebSocket-Node , veuillez consulter leur documentation, qui ne sera pas décrite en détail ici.

Six, WebSocketd

Ensuite, je voudrais recommander un serveur WebSocket très spécial: Websocketd.

Sa plus grande caractéristique est que le script d'arrière-plan n'est pas limité aux langues: l'entrée standard (stdin) est l'entrée de WebSocket et la sortie standard (stdout) est la sortie de WebSocket.

Par exemple, ce qui suit est un script Bash counter.sh.

#!/bin/bash

echo 1
sleep 1

echo 2
sleep 1

echo 3

L'exécution de ce script sur la ligne de commande produira 1, 2 et 3, avec un intervalle de 1 seconde entre chaque valeur.

$ bash ./counter.sh
1
2
3

Maintenant, démarrez-le websocketdet spécifiez ce script en tant que service.

$ websocketd --port=8080 bash ./counter.sh

La commande ci-dessus démarrera un serveur WebSocket avec le port 8080. Chaque fois qu'un client se connecte à ce serveur, il exécute le script counter.sh et transmet sa sortie au client.

var ws = new WebSocket('ws://localhost:8080/');

ws.onmessage = function(event) {
    
    
  console.log(event.data);
};

Ce qui précède est le code JavaScript du client. Après l'exécution, il affichera 1, 2 et 3 dans la console.

Avec lui, vous pouvez facilement envoyer la sortie de la ligne de commande au navigateur.

$ websocketd --port=8080 ls

La commande ci-dessus exécutera la commande ls pour envoyer le contenu du répertoire courant au navigateur. Utiliser cette méthode pour surveiller le serveur en temps réel est tout simplement un jeu d'enfant (code).

Pour plus d'utilisation, veuillez vous référer à l'exemple officiel.

• Exemple de script Bash lisant l'entrée client
• Cinq lignes de code pour obtenir le serveur de chat le plus simple

L'essence de websocketd est le proxy WebSocket de la ligne de commande. Tant que le programme peut être exécuté par la ligne de commande, il peut communiquer avec le navigateur via WebSocket. Ce qui suit est un service d'écho implémenté par Node greeter.js.

process.stdin.setEncoding('utf8');

process.stdin.on('readable', function() {
    
    
  var chunk = process.stdin.read();
  if (chunk !== null) {
    
    
    process.stdout.write('data: ' + chunk);
  }
});

La commande pour démarrer ce script est la suivante.

$ websocketd --port=8080 node ./greeter.js