如何在连接之前干净地“关闭”/“中止”Webscoket 连接

Question

我正在建立一个 ws 连接，但在某些情况下，我需要/想要干净地中止请求，而控制台不会记录这样的错误 -

WebSocket 连接到 'ws://xyz:3001/?失败：WebSocket 已关闭 在建立连接之前。

代码如下：

const ws = new WebSocket(`${url}`);

setTimeout(() => ws.close(), random); // some other event that occur at any given time "random"

一个简单的用例是，当用户打开视图时启动连接，但随后快速关闭视图，这可能/应该中止连接请求。

有没有办法彻底中止连接请求，这样我就不会在浏览器控制台中收到太多类似的日志？

Answer 1

您可以测试一下

readyState

属性是否有帮助。

您可以在尝试关闭连接之前使用它来检查连接的当前状态。这将允许您避免在连接未处于打开状态时尝试关闭连接，从而防止错误消息出现在控制台中。

WebSocket API 通过

readyState

属性提供不同的状态：

• CONNECTING

  (0): 连接尚未打开。

• OPEN

  (1)：连接已打开并准备好进行通信。

• CLOSING

  (2): 连接正在关闭中。

• CLOSED

  (3): 连接已关闭或无法打开。

您可以使用这些状态来决定何时适合关闭 WebSocket：

const ws = new WebSocket(`${url}`);

setTimeout(() => {
    // Check if the WebSocket's state is CONNECTING or OPEN before attempting to close it
    if (ws.readyState === WebSocket.CONNECTING || ws.readyState === WebSocket.OPEN) {
        ws.close();
    }
}, random); // some other event that occur at any given time "random"

该代码修改确保仅当 WebSocket 仍在连接或已打开时才调用

ws.close()

。如果 WebSocket 正在关闭或已经关闭，再次调用

close()

可能会导致不必要的错误或日志。

我 99% 确信调用

ws.close() when ws.readyState === WebSocket.CONNECTING

会在控制台中记录错误，我只想有效地删除本地侦听器并放入 void

这与 OP 的

whatwg/websockets

第 57 期 相关，其中来自 Chromium 项目的 Adam Rice (

ricea

) 补充道：

WebSocket

close()

方法已经可以用来执行此操作。如果您不喜欢 Chrome 在发生这种情况时打印控制台消息的行为，您应该在 https://crbug.com/.

提交问题

提议的 WebSocketStream API 使用 AbortController 来取消握手。

我们不太可能将其添加到 WebSocket API 中，因为它可以使用类似的函数轻松模拟

function AbortableWebSocket(url, signal) {
  signal.throwIfAborted();
  const ws = new WebSocket(url);
  const abortHandler = () => ws.close();
  signal.addEventListener('abort', abortHandler);
  ws.addEventListener('open', 
    () => signal.removeEventListener('abort', abortHandler));
  return ws;
}