利用websocket检测网络连接稳定性

浏览器中打开F12，控制台中输入以下内容 > 回车 > 等待结果
连接关闭 表示断网

let reconnectDelay = 1000; // 初始重连间隔
let pingInterval = null;
let socketManuallyClosed = false; // 标志是否手动关闭

function createWebSocket() {
    if (socketManuallyClosed) return;

    const socket = new WebSocket("wss://echo.websocket.org");

    socket.onopen = function () {
        console.log(new Date().toLocaleString(), "WebSocket 连接成功");
        socket.send("Hello WebSocket!");

        // 发送心跳包（每 30 秒）
        pingInterval = setInterval(() => {
            if (socket.readyState === WebSocket.OPEN) {
                socket.send("ping");
                // console.log(new Date().toLocaleString(), "发送 ping");
            }
        }, 30000);

        // 重置重连时间
        reconnectDelay = 1000;
    };

    socket.onmessage = function (event) {
    	if(event.data === 'ping') return
        console.log(new Date().toLocaleString(), "收到消息:", event.data);
    };

    socket.onerror = function (error) {
        console.error(new Date().toLocaleString(), "WebSocket 错误:", error);
        socket.close(); // 触发 onclose 进行重连
    };

    socket.onclose = function () {
        console.log(new Date().toLocaleString(), "WebSocket 连接关闭");

        clearInterval(pingInterval);

        if (!socketManuallyClosed) {
            setTimeout(() => {
                console.log("尝试重新连接 WebSocket...");
                createWebSocket();
            }, reconnectDelay);

            // 指数退避：每次失败后重连间隔增加，最大 60 秒
            reconnectDelay = Math.min(reconnectDelay * 2, 60000);
        }
    };
}

// 启动 WebSocket 连接
createWebSocket();