WebSockets - Xử lý lỗi

Khi kết nối đã được thiết lập giữa máy khách và máy chủ, opensự kiện được kích hoạt từ phiên bản Web Socket. Lỗi được tạo ra cho những sai lầm, diễn ra trong quá trình giao tiếp. Nó được đánh dấu với sự giúp đỡ củaonerror biến cố. Onerror luôn luôn theo sau là chấm dứt kết nối.

Các onerrorsự kiện được kích hoạt khi có sự cố xảy ra giữa các lần liên lạc. Sự kiệnonerror theo sau là một kết thúc kết nối, là close biến cố.

Một phương pháp hay là luôn thông báo cho người dùng về lỗi không mong muốn và cố gắng kết nối lại chúng.

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

Khi nói đến việc xử lý lỗi, bạn phải xem xét cả các thông số bên trong và bên ngoài.

Các thông số nội bộ bao gồm các lỗi có thể được tạo ra do lỗi trong mã của bạn hoặc do hành vi không mong muốn của người dùng.
Các lỗi bên ngoài không liên quan gì đến ứng dụng; đúng hơn, chúng liên quan đến các tham số, không thể kiểm soát được. Điều quan trọng nhất là kết nối mạng.
Bất kỳ ứng dụng web hai chiều tương tác nào cũng yêu cầu kết nối Internet hoạt động.

Kiểm tra tính khả dụng của mạng

Hãy tưởng tượng rằng người dùng của bạn đang thưởng thức ứng dụng web của bạn, thì đột nhiên kết nối mạng không phản hồi khi đang thực hiện tác vụ của họ. Trong các ứng dụng di động và máy tính để bàn hiện đại, nhiệm vụ phổ biến là kiểm tra tính khả dụng của mạng.

Cách phổ biến nhất để làm như vậy chỉ đơn giản là thực hiện một yêu cầu HTTP đến một trang web được cho là sẽ được khởi động (ví dụ: http://www.google.com). Nếu yêu cầu thành công, máy tính để bàn hoặc thiết bị di động biết có kết nối hoạt động. Tương tự, HTML cóXMLHttpRequest để xác định tính khả dụng của mạng.

Tuy nhiên, HTML5 đã làm cho nó trở nên dễ dàng hơn và giới thiệu một cách để kiểm tra xem trình duyệt có thể chấp nhận các phản hồi web hay không. Điều này đạt được thông qua đối tượng điều hướng -

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

Chế độ ngoại tuyến có nghĩa là thiết bị không được kết nối hoặc người dùng đã chọn chế độ ngoại tuyến từ thanh công cụ của trình duyệt.

Dưới đây là cách thông báo cho người dùng rằng mạng không khả dụng và cố gắng kết nối lại khi xảy ra sự kiện đóng 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 để nhận thông báo lỗi

Chương trình sau giải thích cách hiển thị thông báo lỗi bằng 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>

Kết quả như sau: