WebSockets-오류 처리

클라이언트와 서버간에 연결이 설정되면 open이벤트는 웹 소켓 인스턴스에서 시작됩니다. 통신 중에 발생하는 실수에 대해 오류가 생성됩니다. 그것은의 도움으로 표시됩니다onerror 행사. Onerror 항상 연결이 종료됩니다.

그만큼 onerror통신간에 문제가 발생하면 이벤트가 시작됩니다. 이벤트onerror 연결 종료가 이어집니다. close 행사.

항상 사용자에게 예상치 못한 오류를 알리고 다시 연결하는 것이 좋습니다.

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

오류 처리와 관련하여 내부 및 외부 매개 변수를 모두 고려해야합니다.

내부 매개 변수에는 코드의 버그 또는 예상치 못한 사용자 동작으로 인해 생성 될 수있는 오류가 포함됩니다.
외부 오류는 응용 프로그램과 관련이 없습니다. 오히려 제어 할 수없는 매개 변수와 관련이 있습니다. 가장 중요한 것은 네트워크 연결입니다.
양방향 양방향 웹 애플리케이션에는 활성 인터넷 연결이 필요합니다.

네트워크 가용성 확인

사용자가 작업 중에 갑자기 네트워크 연결이 응답하지 않을 때 웹 앱을 즐기고 있다고 상상해보십시오. 최신 기본 데스크톱 및 모바일 애플리케이션에서는 네트워크 가용성을 확인하는 것이 일반적인 작업입니다.

이를 수행하는 가장 일반적인 방법은 작동해야하는 웹 사이트 (예 : http://www.google.com)에 HTTP 요청을하는 것입니다. 요청이 성공하면 데스크톱 또는 모바일 장치는 활성 연결이 있음을 인식합니다. 마찬가지로 HTML에는XMLHttpRequest 네트워크 가용성을 결정합니다.

그러나 HTML5는 더 쉽게 만들었고 브라우저가 웹 응답을 수락 할 수 있는지 확인하는 방법을 도입했습니다. 이것은 네비게이터 객체를 통해 이루어집니다-

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

오프라인 모드는 장치가 연결되지 않았거나 사용자가 브라우저 도구 모음에서 오프라인 모드를 선택했음을 의미합니다.

다음은 네트워크를 사용할 수 없음을 사용자에게 알리고 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.");
      }
   }
}

오류 메시지 수신 데모

다음 프로그램은 웹 소켓을 사용하여 오류 메시지를 표시하는 방법을 설명합니다.

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

출력은 다음과 같습니다.