WebSocket處理錯誤 - tw511教學網

當在用戶端和伺服器之間建立了連線，就會從Web Socket範例觸發open事件。在通訊期間發生的錯誤會生成錯誤。它是在onerror事件的幫助下標記和處理的。在發生錯誤之後總是會終止連線。

當通訊之間發生錯誤時會觸發onerror事件。事件onerror之後是連線終止，這是一個關閉事件。

一個好的做法是始終告知使用者意外錯誤並嘗試重新連線它們。

var wsUri = "wss://echo.websocket.org/";
var socket = new WebSocket(wsUri);
socket.onclose = function(event) {
   console.log("Error occurred.");

   // Inform the user about the error.
   var label = document.getElementById("status-label");
   label.innerHTML = "Error: " + event;
}

在處理錯誤時，必須考慮內部和外部引數。

內部引數包括由於程式碼中的錯誤或意外的使用者行為而可能生成的錯誤。
外部錯誤與應用程式無關; 它們與引數無關，而這些引數無法控制。最重要的是網路連線。
任何互動式雙向Web應用程式都需要有效的Internet連線。

檢查網路可用性

想象一下，當使用者正在使用網路應用時，突然網路連線在任務中間變得無法響應。在現代本機桌面和移動應用程式中，檢查網路可用性是一項常見任務。

最常見的方法是向一個應該啟動的網站發出HTTP請求(例如，http://www.google.com)。如果請求成功，則桌面或移動裝置知道存在活動連線。類似地，HTML可使用XMLHttpRequest來確定網路可用性。

但是，HTML5使它變得更加容易，並引入了一種檢查瀏覽器是否可以接受Web響應的方法。這是通過導航器物件實現的 -

if (navigator.onLine) {
   alert("網路連線正常");
}else {
   alert("網路連線好像出現問題");
}

離線模式表示裝置未連線或使用者已從瀏覽器工具列中選擇離線模式。以下是如何通知使用者網路不可用並嘗試在發生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.");
      }
   }
}

接收錯誤訊息的範例

以下程式說明如何使用Web通訊端顯示錯誤訊息 -

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

在瀏覽器中開啟上面程式碼檔案，得到以下結果：