糯麦 NurMai

糯麦科技

/

新闻资讯

/

技术讨论

/

不容错过!顶级WebSocket封装库:支持断网自动重连与智能心跳检测!

不容错过!顶级WebSocket封装库:支持断网自动重连与智能心跳检测!

原创 新闻资讯

于 2024-06-03 21:48:15 发布

1879 浏览

在前端开发中,WebSocket技术无疑是不可或缺的核心技能之一。尽管在某些项目中可能并不直接使用,但掌握WebSocket对于深入理解实时通信和构建高效、稳定的实时应用至关重要。


最近,我就遇到了一个明确的需求,要求界面数据通过WebSocket实现实时推送,并且该功能需要支持断网重连和自动心跳机制。断网重连功能确保在网络中断后能够自动恢复与服务器的连接,保持数据的持续传输。而自动心跳则通过定期向服务端发送小型数据包来检测连接状态,若服务端在一段时间内未收到心跳响应,系统将自动采取断开连接等相应措施,以确保资源的有效管理和连接的稳定性。


这两项功能的结合,不仅增强了系统的健壮性,也为用户提供了更加流畅、可靠的实时交互体验。因此,掌握WebSocket及其高级特性,对于前端开发人员来说,无疑是一项宝贵的技能。


websokect的API非常简单

// 创建ws连接
const ws = new WebSocket('ws://localhost:8080/test');
ws.onopen = function() {
    console.log('WebSocket 连接已经建立。');
    ws.send('Hello, server!');
};
ws.onmessage = function(event) {
    console.log('收到服务器消息:', event.data);
};
ws.onerror = function(event) {
    console.error('WebSocket 连接出现错误:', event);
};
ws.onclose = function() {
    console.log('WebSocket 连接已经关闭。');
}

但是,要封装一个支持断网重连、自动心跳的websokect没有那么容易!


封装成功演示

核心优势

我们先看我封装的websokect,首先,最重要的,它的使用方法和官方Api完全一致!零学习成本,上手即用!

import WebSocketClient from "./WebSocketClient"

// 创建实例
const ws = new WebSocketClient('ws://localhost:3200');

// 连接
ws.connect()
// 同原生方法
ws.onclose(()=>{})
// 同原生方法
ws.onerror(()=>{})
// 同原生方法
ws.onmessage(()=>{
  // 同原生方法
  ws.send("自定义发送的数据")
})
// 同原生方法
ws.onopen(()=>{})

// 关闭连接
ws.close()


后端服务创建

我们先使用node创建一个后端服务,安装ws库:

npm install ws

创建node index.js文件,引入WebSocket 服务器

const WebSocket = require("ws");

const wss = new WebSocket.Server({ port: 3200 });

console.log("服务运行在http://localhost:3200/");

wss.on("connection", (ws) => {
  console.log("[服务器]:客官您来了~里边请");
  ws.send(`[websocket云端]您已经连接云端!数据推送中!`);
  let index = 1;
  const interval = setInterval(() => {
    ws.send(`[websocket]数据推送第${index}次`);
    index ++
  }, 1000 * 10);

  ws.on("close", () => {
    clearInterval(interval); // 清除定时器
    console.log("[服务器]:客官下次再来呢~");
  });
});

我们启动这个服务

node index.js

现在,我们在前端服务内进行连接测试


前端websokect测试

我们先写前端的相关逻辑

import { WebSocketClient } from '@/utils/dataDispatcher/WebSocketClient';

const ws = new WebSocketClient('ws://localhost:3200');

// 连接
ws.connect();
// 同原生方法
ws.onclose(() => {});
// 同原生方法
ws.onerror(() => {});
// 同原生方法
ws.onmessage(() => {
    // 同原生方法
    ws.send('自定义发送的数据');
});
// 同原生方法
ws.onopen(() => {});

启动项目,我们会发现控制台已经有了提示

1.jpg


等待一段时间后,我们可以看到ws连接里,前端已经发送了多次心跳数据

2.jpg

服务端与客户端也一直在进行数据交互

3.jpg

断网重连验证:

可以看到,当我们断开服务端的时候,断网重连被自动触发。

4.gif

技术路线

基本框架搭建

export class WebSocketClient {
    // #socket链接
    private url = '';
    // #socket实例
    private socket: WebSocket | null = null;
    
    constructor(url: string) {
        super();
        this.url = url;
    }
   
    // >消息发送
    public send(message: string): void {
        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
            this.socket.send(message);
        } else {
            console.error('[WebSocket] 未连接');
        }
    }

    // !初始化连接
    public connect(): void {
        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
            return;
        }
        this.socket = new WebSocket(this.url);

        // !websocket连接成功
        this.socket.onopen = event => {
            console.log(`连接成功,等待服务端数据推送[onopen]...`);
        };

        this.socket.onmessage = event => {
        };

        this.socket.onclose = event => {
            console.log(`连接断开[onclose]...`);
        };

        this.socket.onerror = event => {
            console.log(`连接异常[onerror]...`);
        };
    }

    // >关闭连接
    public close(): void {
        if (this.socket) {
            this.socket.close();
            this.socket = null;
        }
    }
}

上述代码借助官方API实现了一个基本的 WebSocket 客户端,具有以下功能:


● 初始化连接并处理各种 WebSocket 事件(打开、消息、关闭、错误)。

● 发送消息到服务器。

● 关闭连接。

现在,我们开始逐步完善代码,进行封装。


断网重连封装

export class WebSocketClient{
    // #socket链接
    private url = '';
    // #socket实例
    private socket: WebSocket | null = null;
    // #重连次数
    private reconnectAttempts = 0;
    // #最大重连数
    private maxReconnectAttempts = 5;
    // #重连间隔
    private reconnectInterval = 10000; // 10 seconds
  
    constructor(url: string) {
        super();
        this.url = url;
    }
    // >消息发送
    public send(message: string): void {
        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
            this.socket.send(message);
        } else {
            console.error('[WebSocket] 未连接');
        }
    }

    // !初始化连接
    public connect(): void {
        if (this.reconnectAttempts === 0) {
            console.log(`初始化连接中...`);
        }
        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
            return;
        }
        this.socket = new WebSocket(this.url);

        // !websocket连接成功
        this.socket.onopen = event => {
            // 重置重连尝试成功连接
            this.reconnectAttempts = 0;
            console.log(`连接成功,等待服务端数据推送[onopen]...`);
        };

        this.socket.onmessage = event => {
        };

        this.socket.onclose = event => {
            if (this.reconnectAttempts === 0) {
                console.log(`连接断开[onclose]...`);
            }
            if (!this.stopWs) {
                this.handleReconnect();
            }
        };

        this.socket.onerror = event => {
            if (this.reconnectAttempts === 0) {
                console.log(`连接异常[onerror]...`);
            }
        };
    }

    // > 断网重连逻辑
    private handleReconnect(): void {
        if (this.reconnectAttempts < this.maxReconnectAttempts) {
            this.reconnectAttempts++;
            console.log(`尝试重连... (${this.reconnectAttempts}/${this.maxReconnectAttempts})`);
            setTimeout(() => {
                this.connect();
            }, this.reconnectInterval);
        } else {
            console.log(`最大重连失败,终止重连: ${this.url}`);
        }
    }

    // >关闭连接
    public close(): void {
        if (this.socket) {
            this.socket.close();
            this.socket = null;
        }
    }
}

上述代码添加了自动断网重连的机制。其核心逻辑在于以下几个方面:


1.「记录重连次数」:通过 reconnectAttempts 属性记录当前已经尝试重连的次数。

2.「设置最大重连次数」:通过 maxReconnectAttempts 属性设置允许的最大重连次数。

3.「重连逻辑」:在 onclose 和 onerror 事件中调用重连处理函数 handleReconnect。

4.「重连间隔」:通过 reconnectInterval 属性设置每次重连的间隔时间,可以在每次重连时增加间隔以实现指数退避。

5.「初始化连接并处理事件」


在 connect 方法中,初始化 WebSocket 连接并为其设置事件处理函数。特别关注 onclose 和 onerror 事件,在连接关闭和出现错误时调用重连逻辑。

public connect(): void {
    if (this.reconnectAttempts === 0) {
        console.log(`初始化连接中...`);
    }
    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
        return;
    }
    this.socket = new WebSocket(this.url);

    this.socket.onopen = (event: Event) => {
        this.reconnectAttempts = 0;
        console.log(`连接成功,等待服务端数据推送[onopen]...`);
    };
    this.socket.onclose = (event: CloseEvent) => {
        if (this.reconnectAttempts === 0) {
            console.log(`连接断开[onclose]...`);
        }
        this.handleReconnect();
    };

    this.socket.onerror = (event: Event) => {
        if (this.reconnectAttempts === 0) {
            console.log(`连接异常[onerror]...`);
        }
        this.handleReconnect();
    };
}

处理重连逻辑

在 handleReconnect 方法中,实现了实际的重连逻辑。该方法会递增 reconnectAttempts,检查是否达到最大重连次数,如果没有达到,则在指定的重连间隔后再次调用 connect 方法尝试重连。

private handleReconnect(): void {
    if (this.reconnectAttempts < this.maxReconnectAttempts) {
        this.reconnectAttempts++;
        console.log(`尝试重连... (${this.reconnectAttempts}/${this.maxReconnectAttempts})`);
        setTimeout(() => {
            this.connect();
        }, this.reconnectInterval * this.reconnectAttempts); // 重连间隔可以增加,例如指数退避
    } else {
        console.log(`最大重连失败,终止重连: ${this.url}`);
    }
}

关闭连接

在 close 方法中,手动关闭 WebSocket 连接并将 socket 设置为 null。

public close(): void {
    if (this.socket) {
        this.socket.close();
        this.socket = null;
    }
}


自动心跳封装

自动心跳(Automatic Heartbeat)是一种在网络通信中常用的机制,用于维持连接的活跃状态,检测连接是否仍然有效,并及时发现和处理连接断开或故障的情况。心跳机制通过定期发送“心跳”消息(通常是一个简单的 ping 或者 pong 消息)来确认连接双方的状态。


实现自动心跳的基本思路

1. 发送心跳消息:在 WebSocket 连接建立后,启动一个定时器,定期发送心跳消息到服务器。

2. 接收心跳响应:服务器收到心跳消息后返回响应,客户端接收到响应后重置定时器。

3. 检测心跳超时:如果在指定时间内没有收到心跳响应,则认为连接断开,进行重连。

export class WebSocketClient {
    // #socket链接
    private url = '';
    // #socket实例
    private socket: WebSocket | null = null;
    // #重连次数
    private reconnectAttempts = 0;
    // #最大重连数
    private maxReconnectAttempts = 5;
    // #重连间隔
    private reconnectInterval = 10000; // 10 seconds
    // #发送心跳数据间隔
    private heartbeatInterval = 1000 * 30;
    // #计时器id
    private heartbeatTimer?: NodeJS.Timeout;
    // #彻底终止ws
    private stopWs = false;
    // *构造函数
    constructor(url: string) {
        super();
        this.url = url;
    }
    // >消息发送
    public send(message: string): void {
        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
            this.socket.send(message);
        } else {
            console.error('[WebSocket] 未连接');
        }
    }

    // !初始化连接
    public connect(): void {
        if (this.reconnectAttempts === 0) {
            console.log('WebSocket', `初始化连接中...`);
        }
        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
            return;
        }
        this.socket = new WebSocket(this.url);

        // !websocket连接成功
        this.socket.onopen = event => {
            this.stopWs = false;
            // 重置重连尝试成功连接
            this.reconnectAttempts = 0;
            // 在连接成功时停止当前的心跳检测并重新启动
            this.startHeartbeat();
            console.log(`连接成功,等待服务端数据推送[onopen]...`);
        };

        this.socket.onmessage = event => {
            this.dispatchEvent('message', event);
            this.startHeartbeat();
        };

        this.socket.onclose = event => {
            if (this.reconnectAttempts === 0) {
                console.log(`连接断开[onclose]...`);
            }
            if (!this.stopWs) {
                this.handleReconnect();
            }
        };

        this.socket.onerror = event => {
            if (this.reconnectAttempts === 0) {
                console.log(`连接异常[onerror]...`);
            }
            this.closeHeartbeat();
        };
    }

    // > 断网重连逻辑
    private handleReconnect(): void {
        if (this.reconnectAttempts < this.maxReconnectAttempts) {
            this.reconnectAttempts++;
            console.log('WebSocket', `尝试重连...`);
            setTimeout(() => {
                this.connect();
            }, this.reconnectInterval);
        } else {
            this.closeHeartbeat();
            console.log(`最大重连失败,终止重连: ${this.url}`);
        }
    }

    // >关闭连接
    public close(): void {
        if (this.socket) {
            this.stopWs = true;
            this.socket.close();
            this.socket = null;
        }
        this.closeHeartbeat();
    }

    // >开始心跳检测 -> 定时发送心跳消息
    private startHeartbeat(): void {
        if (this.stopWs) return;
        if (this.heartbeatTimer) {
            this.closeHeartbeat();
        }
        this.heartbeatTimer = setInterval(() => {
            if (this.socket) {
                this.socket.send(JSON.stringify({ type: 'heartBeat', data: {} }));
                console.log('WebSocket', '送心跳数据...');
            } else {
                console.error('[WebSocket] 未连接');
            }
        }, this.heartbeatInterval);
    }

    // >关闭心跳
    private closeHeartbeat(): void {
        clearInterval(this.heartbeatTimer);
        this.heartbeatTimer = undefined;
    }
}

上述代码通过定时发送心跳消息来实现自动心跳机制,并结合断网重连逻辑来确保 WebSocket 连接的稳定性。


心跳机制的实现原理简析:

● 在连接成功时启动心跳检测

在 connect() 方法中,当 WebSocket 连接成功(onopen 事件触发)时,调用 startHeartbeat() 方法。

this.socket.onopen = event => {
  this.stopWs = false;
  this.reconnectAttempts = 0;
  this.startHeartbeat();
  console.log(`连接成功,等待服务端数据推送[onopen]...`);
};

● 定时发送心跳消息

startHeartbeat() 方法启动一个定时器,每隔 heartbeatInterval 时间(30秒)发送一次心跳消息。

private startHeartbeat(): void {
  if (this.stopWs) return;
if (this.heartbeatTimer) {
  this.closeHeartbeat();
}
this.heartbeatTimer = setInterval(() => {
  if (this.socket) {
    this.socket.send(JSON.stringify({ type: 'heartBeat', data: {} }));
    console.log('WebSocket', '发送心跳数据...');
  } else {
    console.error('[WebSocket] 未连接');
  }
}, this.heartbeatInterval);
}

● 停止心跳检测

closeHeartbeat() 方法用于停止心跳检测,清除定时器。

private closeHeartbeat(): void {
  clearInterval(this.heartbeatTimer);
    this.heartbeatTimer = undefined;
}

● 在连接断开或发生错误时停止心跳检测

在 onclose 和 onerror 事件中调用 closeHeartbeat(),停止心跳检测。

this.socket.onclose = event => {
  if (this.reconnectAttempts === 0) {
    console.log(`连接断开[onclose]...`);
  }
  if (!this.stopWs) {
    this.handleReconnect();
  }
};

this.socket.onerror = event => {
  if (this.reconnectAttempts === 0) {
    console.log(`连接异常[onerror]...`);
  }
  this.closeHeartbeat();
};


如何触发原生函数

现在,我们已经基本完成了功能的封装,那么,我们如何在外部调用原生的websokectApi呢?非常简单,借助几个自定义的生命周期函数即可!

import { EventDispatcher } from './dispatcher';

export class WebSocketClient extends EventDispatcher {

    //...
    constructor(url: string) {
        super();
        this.url = url;
    }
    // >生命周期钩子
    onopen(callBack: Function) {
        this.addEventListener('open', callBack);
    }
    onmessage(callBack: Function) {
        this.addEventListener('message', callBack);
    }
    onclose(callBack: Function) {
        this.addEventListener('close', callBack);
    }
    onerror(callBack: Function) {
        this.addEventListener('error', callBack);
    }

    // !初始化连接
    public connect(): void {
        // ...

        // !websocket连接成功
        this.socket.onopen = event => {
            // ...
            this.dispatchEvent('open', event);
        };

        this.socket.onmessage = event => {
            this.dispatchEvent('message', event);
            this.startHeartbeat();
        };

        this.socket.onclose = event => {
            // ...
            this.dispatchEvent('close', event);
        };

        this.socket.onerror = event => {
            // ...
            this.closeHeartbeat();
            this.dispatchEvent('error', event);
        };
    }

    // >关闭连接
    public close(): void {
        if (this.socket) {
            this.stopWs = true;
            this.socket.close();
            this.socket = null;
            this.removeEventListener('open');
            this.removeEventListener('message');
            this.removeEventListener('close');
            this.removeEventListener('error');
        }
        this.closeHeartbeat();
    }

    // ...
}

当原生的onclose、onopen方法触发时,会通过dispatchEvent触发相应的调度,进而触发通过addEventListener绑定的生命周期函数!

注意,这里的this.dispatchEvent方法,addEventListener方法都是通过类继承EventDispatcher方法获得的!

EventDispatcher源码如下:

export class EventDispatcher {
    private listeners: { [type: string]: Function[] } = {};

    protected addEventListener(type: string, listener: Function) {
        if (!this.listeners[type]) {
            this.listeners[type] = [];
        }
        if (this.listeners[type].indexOf(listener) === -1) {
            this.listeners[type].push(listener);
        }
    }

    protected removeEventListener(type: string) {
        this.listeners[type] = [];
    }

    protected dispatchEvent(type: string, data: any) {
        const listenerArray = this.listeners[type] || [];
        if (listenerArray.length === 0) return;
        listenerArray.forEach(listener => {
            listener.call(this, data);
        });
    }
}

总结

这篇文章精心封装了websocket,它卓越地实现了断网重连与自动心跳机制的功能,确保了网络通信的稳定性和实时性。同时,这款封装完全遵循原生websocket的编程规范,用户无需承担任何额外的学习负担,即可轻松上手并投入使用。然而,值得注意的是,当前的断网重连时间间隔以及心跳数据内容均为预设值,尚未实现动态配置。但这也为用户提供了定制化的空间,您可以根据实际应用场景的需要,轻松调整这些参数,使其更加贴合您的使用需求,从而实现更为灵活的网络通信管理。

WebSocket

小程序开发

网站开发

网站建设

阅读排行

  • 1. 几行代码就能实现Html大转盘抽奖

    大转盘抽奖是网络互动营销的一种常见形式,其通过简单易懂的界面设计,让用户在游戏中体验到乐趣,同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。

    查看详情
  • 2. 微信支付商户申请接入流程

    微信支付,是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案,包括多种支付方式,如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。

    查看详情
  • 3. 浙江省同区域公司地址变更详细流程

    提前准备好所有需要的资料,包含:房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书(由于我们公司其中一区域已有注册另外一公司,所以必须需要承诺书)

    查看详情
  • 4. 阿里云域名ICP网络备案流程

    根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》,国家对非经营性互联网信息服务实行备案制度,对经营性互联网信息服务实行许可制度。

    查看详情
  • 5. 温州小程序开发市场调研

    随着互联网技术的不断发展,传统市场正面临着数字化转型的挑战和机遇。温州作为中国的重要商业城市之一,其传统市场具有独特的特点和运营模式。本文将从温州传统市场的特点出发,探讨如何开发出适合温州市场的小程序系统。

    查看详情