WebSockets - obsługa błędów

Po nawiązaniu połączenia między klientem a serwerem, plik openzdarzenie jest wyzwalane z instancji Web Socket. Błędy są generowane w przypadku błędów, które mają miejsce podczas komunikacji. Jest oznaczony za pomocąonerror zdarzenie. Onerror zawsze następuje zakończenie połączenia.

Plik onerrorzdarzenie jest wyzwalane, gdy między komunikacją wystąpi błąd. Wydarzenieonerror następuje zakończenie połączenia, które jest close zdarzenie.

Dobrą praktyką jest zawsze informowanie użytkownika o nieoczekiwanym błędzie i próba ponownego połączenia.

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

Jeśli chodzi o obsługę błędów, musisz wziąć pod uwagę zarówno parametry wewnętrzne, jak i zewnętrzne.

Parametry wewnętrzne obejmują błędy, które mogą zostać wygenerowane z powodu błędów w kodzie lub nieoczekiwanego zachowania użytkownika.
Błędy zewnętrzne nie mają nic wspólnego z aplikacją; odnoszą się raczej do parametrów, których nie można kontrolować. Najważniejszą z nich jest łączność sieciowa.
Każda interaktywna dwukierunkowa aplikacja internetowa wymaga aktywnego połączenia z Internetem.

Sprawdzanie dostępności sieci

Wyobraź sobie, że Twoi użytkownicy korzystają z Twojej aplikacji internetowej, gdy nagle połączenie sieciowe przestaje odpowiadać w środku ich zadania. W nowoczesnych natywnych aplikacjach na komputery stacjonarne i aplikacje mobilne sprawdzanie dostępności sieci jest częstym zadaniem.

Najczęstszym sposobem jest po prostu wysłanie żądania HTTP do witryny, która powinna być uruchomiona (na przykład http://www.google.com). Jeśli żądanie powiedzie się, komputer stacjonarny lub urządzenie przenośne wie, że istnieje aktywna łączność. Podobnie HTML maXMLHttpRequest do określania dostępności sieci.

Jednak HTML5 uczynił to jeszcze łatwiejszym i wprowadził sposób sprawdzania, czy przeglądarka akceptuje odpowiedzi internetowe. Osiąga się to za pomocą obiektu nawigatora -

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

Tryb offline oznacza, że albo urządzenie nie jest podłączone, albo użytkownik wybrał tryb offline z paska narzędzi przeglądarki.

Oto jak poinformować użytkownika, że sieć jest niedostępna i spróbować połączyć się ponownie, gdy wystąpi zdarzenie zamknięcia WebSocket -

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.");
      }
   }
}

Demo do otrzymywania komunikatów o błędach

Poniższy program wyjaśnia, jak wyświetlać komunikaty o błędach za pomocą gniazd sieciowych -

<!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>

Dane wyjściowe są następujące -