WebSockets - Gestion des erreurs

Une fois la connexion établie entre le client et le serveur, un openl'événement est déclenché à partir de l'instance Web Socket. Des erreurs sont générées pour les erreurs qui se produisent pendant la communication. Il est marqué à l'aide deonerror un événement. Onerror est toujours suivi de la fin de la connexion.

le onerrorL'événement est déclenché lorsqu'un problème se produit entre les communications. L'événementonerror est suivie d'une terminaison de connexion, qui est un close un événement.

Une bonne pratique consiste à toujours informer l'utilisateur de l'erreur inattendue et à essayer de le reconnecter.

socket.onclose = function(event) {
   console.log("Error occurred.");
	
   // Inform the user about the error.
   var label = document.getElementById("status-label");
   label.innerHTML = "Error: " + event;
}

En ce qui concerne la gestion des erreurs, vous devez tenir compte des paramètres internes et externes.

  • Les paramètres internes incluent des erreurs qui peuvent être générées en raison des bogues de votre code ou du comportement inattendu de l'utilisateur.

  • Les erreurs externes n'ont rien à voir avec l'application; ils sont plutôt liés à des paramètres qui ne peuvent être contrôlés. Le plus important est la connectivité réseau.

  • Toute application Web bidirectionnelle interactive nécessite, eh bien, une connexion Internet active.

Vérification de la disponibilité du réseau

Imaginez que vos utilisateurs profitent de votre application Web, lorsque soudainement la connexion réseau ne répond plus au milieu de leur tâche. Dans les applications de bureau et mobiles natives modernes, il est courant de vérifier la disponibilité du réseau.

La manière la plus courante de le faire consiste simplement à envoyer une requête HTTP à un site Web censé être opérationnel (par exemple, http://www.google.com). Si la demande aboutit, le bureau ou l'appareil mobile sait qu'il existe une connectivité active. De même, HTML aXMLHttpRequest pour déterminer la disponibilité du réseau.

HTML5, cependant, l'a rendu encore plus facile et a introduit un moyen de vérifier si le navigateur peut accepter les réponses Web. Ceci est réalisé via l'objet navigateur -

if (navigator.onLine) {
   alert("You are Online");
}else {
   alert("You are Offline");
}

Le mode hors ligne signifie que l'appareil n'est pas connecté ou que l'utilisateur a sélectionné le mode hors ligne dans la barre d'outils du navigateur.

Voici comment informer l'utilisateur que le réseau n'est pas disponible et essayer de se reconnecter lorsqu'un événement de fermeture WebSocket se produit -

socket.onclose = function (event) {
   // Connection closed.
   // Firstly, check the reason.
	
   if (event.code != 1000) {
      // Error code 1000 means that the connection was closed normally.
      // Try to reconnect.
		
      if (!navigator.onLine) {
         alert("You are offline. Please connect to the Internet and try again.");
      }
   }
}

Démo pour recevoir les messages d'erreur

Le programme suivant explique comment afficher les messages d'erreur à l'aide de Web Sockets -

<!DOCTYPE html>
<html>
   <meta charset = "utf-8" />
   <title>WebSocket Test</title>

   <script language = "javascript" type = "text/javascript">
      var wsUri = "ws://echo.websocket.org/";
      var output;
		
      function init() {
         output = document.getElementById("output");
         testWebSocket();
      }
		
      function testWebSocket() {
         websocket = new WebSocket(wsUri);
			
         websocket.onopen = function(evt) {
            onOpen(evt)
         };
			
         websocket.onclose = function(evt) {
            onClose(evt)
         };
			
         websocket.onerror = function(evt) {
            onError(evt)
         };
      }
		
      function onOpen(evt) {
         writeToScreen("CONNECTED");
         doSend("WebSocket rocks");
      }
		
      function onClose(evt) {
         writeToScreen("DISCONNECTED");
      }
		
      function onError(evt) {
         writeToScreen('<span style = "color: red;">ERROR:</span> ' + evt.data);
      } 
		
      function doSend(message) {
         writeToScreen("SENT: " + message); websocket.send(message);
      }
		
      function writeToScreen(message) {
         var pre = document.createElement("p"); 
         pre.style.wordWrap = "break-word"; 
         pre.innerHTML = message; output.appendChild(pre);
      }
		
      window.addEventListener("load", init, false);
   </script>
	
   <h2>WebSocket Test</h2>
   <div id = "output"></div>
	
</html>

La sortie est la suivante -