js怎么判断websocket是否连接

创作时间:

作者:

@小白创作中心

js怎么判断websocket是否连接

引用

来源

https://docs.pingcode.com/baike/3779891

WebSocket是现代Web应用中常见的技术，特别是在需要实时通信的场景中。本文将详细介绍如何使用JavaScript判断WebSocket是否连接。

一、检查WebSocket的readyState属性

WebSocket对象的readyState属性是一个只读属性，表示WebSocket连接的当前状态。它有以下四种状态：

0: CONNECTING - 连接正在进行。
1: OPEN - 连接已建立，可以进行通信。
2: CLOSING - 连接正在关闭。
3: CLOSED - 连接已经关闭或者连接尝试已经失败。

通过检查这个属性，你可以确定WebSocket当前是否处于连接状态。例如：

if (websocket.readyState === WebSocket.OPEN) {
    console.log("WebSocket is connected.");
} else {
    console.log("WebSocket is not connected.");
}

二、使用事件监听器

WebSocket API 提供了多个事件，可以用来检测 WebSocket 的连接状态，包括 onopen、onclose 和 onerror 事件。

1. `onopen` 事件

当 WebSocket 连接成功建立时，会触发 onopen 事件。你可以在此事件中执行一些初始化操作或发送初始消息。

websocket.onopen = function(event) {
    console.log("WebSocket connection opened.");
    // 其他操作
};

2. `onclose` 事件

当 WebSocket 连接关闭时，会触发 onclose 事件。你可以在此事件中执行一些清理操作或尝试重新连接。

websocket.onclose = function(event) {
    console.log("WebSocket connection closed.");
    // 其他操作
};

3. `onerror` 事件

当 WebSocket 出现错误时，会触发 onerror 事件。你可以在此事件中记录错误信息或执行错误处理逻辑。

websocket.onerror = function(event) {
    console.log("WebSocket error:", event);
    // 其他操作
};

三、定期发送心跳包

为了确保 WebSocket 连接保持活跃，通常会定期发送心跳包。如果心跳包发送失败，可以认为 WebSocket 连接已断开。

const interval = 30000; // 30秒

let heartBeatInterval = setInterval(() => {
    if (websocket.readyState === WebSocket.OPEN) {
        websocket.send("heartbeat");
    } else {
        clearInterval(heartBeatInterval);
        console.log("WebSocket connection lost.");
        // 尝试重新连接
    }
}, interval);

四、重连机制

在实际应用中，网络环境的不稳定可能会导致 WebSocket 连接中断。为了提高应用的健壮性，通常需要实现一个自动重连机制。当检测到 WebSocket 连接断开时，可以尝试重新连接。

function createWebSocket(url) {
    let ws = new WebSocket(url);
    ws.onopen = function(event) {
        console.log("WebSocket connection opened.");
    };
    ws.onclose = function(event) {
        console.log("WebSocket connection closed.");
        // 尝试重新连接
        setTimeout(() => {
            ws = createWebSocket(url);
        }, 1000); // 1秒后重连
    };
    ws.onerror = function(event) {
        console.log("WebSocket error:", event);
    };
    return ws;
}
let websocket = createWebSocket("wss://example.com/socket");