Day20：状态参数判读

在 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。