WebSocket 加持下，如何保证可靠性？

随着互联网的飞速发展，越来越多的应用程序需要实时通信。WebSocket 作为一种双向通信协议，可以轻松地实现客户端和服务器之间的实时通信。在项目中，我们使用 WebSocket 来做一个简单的长连接，用来实时展示登录用户信息。

const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {
  // 连接成功后发送登录信息
  ws.send(JSON.stringify({
    username: 'admin',
    password: '123456'
  }));
};

ws.onmessage = (event) => {
  // 接收服务器发送的信息
  const data = JSON.parse(event.data);
  // 将用户信息展示在页面上
  document.getElementById('username').innerHTML = data.username;
  document.getElementById('email').innerHTML = data.email;
};

ws.onclose = (event) => {
  // 连接关闭后重新连接
  setTimeout(() => {
    ws.open();
  }, 1000);
};

在使用 WebSocket 时，我们可能会遇到一些异常场景，如服务器重启、前端断网等。这些异常场景可能会导致 WebSocket 连接中断，从而影响应用程序的正常运行。因此，我们需要考虑如何使用 WebSocket 来保证可靠性。

1. 服务器重启

当服务器重启时，WebSocket 连接会被中断。为了保证可靠性，我们需要在服务器重启后重新建立 WebSocket 连接。我们可以使用定时器来定期检查 WebSocket 连接状态，如果连接中断，则重新建立连接。

setInterval(() => {
  if (ws.readyState !== WebSocket.OPEN) {
    ws.open();
  }
}, 1000);

2. 前端断网

当前端断网时，WebSocket 连接也会被中断。为了保证可靠性，我们需要在前端断网后重新建立 WebSocket 连接。我们可以使用 window.onoffline 事件来监听网络状态，当网络断开时，重新建立 WebSocket 连接。

window.onoffline = () => {
  ws.close();
  ws.open();
};

3. 长时间不连接

如果 WebSocket 连接长时间不活动，服务器可能会主动关闭连接。为了防止这种情况发生，我们需要在 WebSocket 连接空闲时发送心跳包来保持连接。我们可以使用定时器来定期发送心跳包，如果服务器在一段时间内没有收到心跳包，则关闭连接。

setInterval(() => {
  ws.send('ping');
}, 5000);

通过以上措施，我们可以保证 WebSocket 连接的可靠性，从而保证应用程序的正常运行。

WebSocket 是一种强大的工具，可以实现客户端和服务器之间的实时通信。在项目中使用 WebSocket 时，我们需要考虑异常场景，并采取措施来保证可靠性。通过合理的规划和设计，我们可以让 WebSocket 应用更加稳定可靠。