在 WebSocket 中，對於是否處於連線狀態，或是連線有無成功，預設有提供參數供開發者判斷，因此可以透過 readState 來檢查。

readyState

首先查看 WebSocket.readyState 文件，可以看到 1 是保持連線狀態，3 則是關閉連線。

所以接下來透過實作來查看狀態的變化。

// main.js

ws.onopen = function () {
  // send to server-side
  console.log(`open : ${ws.readyState}`);
};
ws.onmessage = function (event) {
  console.log(`message : ${ws.readyState}`);
  console.log(event);
};
// 當連結關閉時，主動觸發 close event
ws.onclose = function (event) {
  console.log(`close : ${ws.readyState}`);
};

terminal 運行 server-side 的 index.js，可以看到 client-side 印出來的狀態。

同樣的，如果 terminal 關閉 server-side，那頁面則會印出 3，表示 ws 連線已關閉。

Close Event

除了關閉 server 來觸發 close 事件外，也可以從 client-side 來關閉 ws 連線。

<button type="button" id="btn">Disconnect</button>

// main.js

const closeBtn = document.getElementById('btn');
closeBtn.addEventListener('click', () => {
  ws.close();
});

Error Event

另一種情境，則是 server-side 出現連線問題，導致 client-side 試圖連線卻失敗，這時候就會觸發 error 事件。

// main.js
ws.onerror = function () {
  console.log(`error : ${ws.readyState}`);
};

關閉運行的 server-side，並重新刷新 HTML 頁面，這時候，client-side 會因為無法連線 server 導致 fail，進而觸發 error event。