如何使用 Chrome 中的原生 WebSocket 库重新连接套接字

Question

>我有这个：

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

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

Answer 1

您需要检测连接关闭事件并编写一个reconnect函数来尝试重新连接到服务器：

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

请注意，触发关闭事件可能需要很长时间。在这种情况下，您可以实现一个简单的乒乓方法，如此处所述，以检测连接是否断开(而不是关闭事件)。

您可以在此处找到reconnect函数的简单实现。

Answer 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();
});
};

连接关闭后(由于服务器重新启动而发生"关闭"事件)，然后我们等待 2.5 秒，然后尝试重新连接。如果重新连接失败，则关闭事件将重新触发，因此我们只需在 2.5 秒后重试。