如何在 Chrome 中使用本机 WebSocket 库重新连接套接字答案

【问题标题】：How to reconnect a socket using native WebSocket library in Chrome如何在 Chrome 中使用本机 WebSocket 库重新连接套接字
【发布时间】：2019-12-29 02:35:30
【问题描述】：

我有这个：

<script>

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

  socket.addEventListener('open', function (event) {
    console.log('connection made to server:', event);
  });

  socket.addEventListener('message', function (event) {
    console.log('ws client received message:', event);
    location.reload();
  });

</script>

如果服务器重新启动，它不会自动重新连接。重新连接到服务器的最佳方式是什么？

【问题讨论】：

标签： node.js google-chrome sockets websocket reconnect

【解决方案1】：

需要检测connection-close事件并编写reconnect函数尝试重新连接服务器：

socket.addEventListener('close', function (event) {
    console.log('Disconnected!');
    reconnect(); //----------> tries to reconnect through the websocket
  });

请注意，关闭事件可能需要很长时间才能触发。在这种情况下，您可以按照here 的描述实现一个简单的乒乓方法来检测连接是否断开（而不是关闭事件）。

您可以找到reconnect 函数here 的简单实现。

【讨论】：

【解决方案2】：

所以看起来没有重新连接选项，这对于较低级别的库是有意义的。此重新连接逻辑运行良好：

  const createConnection = () => {

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

    socket.addEventListener('open', function (event) {
      console.log('connection made to server:', event);
    });

    socket.addEventListener('close', function (event) {
      console.log('connection closed:', event);
      socket.close();
      setTimeout(createConnection, 2500);  // reconnect here
    });

    socket.addEventListener('message', function (event) {
      console.log('ws client received message:', event);
      location.reload();
    });

  };

一旦连接关闭（因为服务器重新启动而发生'close'事件），然后我们等待 2.5 秒然后尝试重新连接。如果重新连接失败，则关闭事件会重新触发，因此我们只需在 2.5 秒后重试。

【讨论】：