websocket-reconnect-pro

websocket reconnect

Usage no npm install needed!

<script type="module">
  import websocketReconnectPro from 'https://cdn.skypack.dev/websocket-reconnect-pro';
</script>

README

websocket-reconnect

🚀 websocket-reconnect-pro。websocket 断开自动重连，基于原生websocket扩展实现、无依赖、TypeScript编写、rollup打包、单元测试。

GitHub，如果帮助到了你，请给我一个star~ 💖，如果你发现bug，请尽情的提issue或者pr，灰常感谢💖

安装

npm install websocket-reconnect-pro

使用


// new WebsocketReconnect(url,protocols,options)

var url = 'ws://192.168.1.100:8000';
var ws = new WebsocketReconnect(url,[],{
    minReconnectionDelay:3000,
    reconnectionDelayGrowFactor:1.1,
    enableHeartbeat:true,
    debug:true
});
console.log(ws)

ws.onopen = function () {
        console.log('connect success');
        setTimeout(() => {
            ws.close()
        }, 3000);
}
ws.onclose = function (e) {
        console.log('onclose',e);
}
ws.onerror = function (e) {
        console.log('onerror',e);
}
ws.onmessage = function (e) {
        console.log(JSON.parse(e.data))
}
ws.onreconnect = function (e) {
        console.log('onreconnect',e);
}

API

参数

url

url 是一个 websocket 地址字符串，或者是一个返回字符串的方法

url: string | (() => string) | (() => Promise<string>)

protocols

一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议，这样单个服务器可以实现多个WebSocket子协议（例如，您可能希望一台服务器能够根据指定的协议（protocol）处理不同类型的交互）。如果不指定协议字符串，则假定为空字符串

options

options属性 说明 类型 可选值 默认值
WebSocket 内部实例化的WebSocket类，默认为浏览器自带的WebSocket Object - WebSocket
maxReconnectionDelay 最大重连时间间隔(毫秒) number - 10000
minReconnectionDelay 最小重连时间间隔(毫秒) number - 1000 + Math.random() * 4000
reconnectionDelayGrowFactor 重连时间增长率,基数为minReconnectionDelay,最大不超过maxReconnectionDelay number - 1.3
minUptime - number - 5000
connectionTimeout 连接超时时间(毫秒) number - 4000
maxRetries 最大重连次数 number - Infinity
maxEnqueuedMessages 最大消息队列数量，重连后成功后会依次发送 number - Infinity
startClosed 是否new之后不自动连接 boolean - false
enableHeartbeat 是否开启心跳 boolean - false
pingTimeout 心跳发送时间间隔(毫秒) number - 10000
pongTimeout 心跳接受时间间隔(毫秒) number - 10000
pingMsg 心跳消息 string - "\r\n"
outputPingMsg 心跳消息是否能被onWCSStringMessage方法输出 boolean - false
debug 开启debug模式 boolean - false

属性

除了 WebSocket 自带的属性（binaryType,readyState 等）以外，还有以下属性:

属性 说明 类型 备注
ws websocket实例 WebSocket 只读
retryCount 当前失败重连的次数 Number 只读
messageQueue 重连后需要发送的消息队列，当调用send方法时，内部的websocket还未建立，或者websocket的readyState不是OPEN时，会把消息push进此数组 Array 可读、可写
onreconnect 用于指定连接失败后的回调函数。 Function 可读、可写
onWebsocketError 用于内部执行new Websocket()时触发的错误回调函数。url无法连接会触发此回调函数 Function 可读、可写

方法

除了 WebSocket 自带的方法（close,send 等）以外，还有以下属性:

方法 说明 参数
reconnect 主动调用重新连接方法，会重置 retryCount 为0 -

部分定义 .d.ts

export default class WebsocketReconnect {
    private _ws?;
    private _binaryType;
    private _messageQueue;
    private _listeners;
    private _retryCount;
    private _uptimeTimeout;
    private _connectTimeout;
    private _shouldReconnect;
    private _connectLock;
    private _closeCalled;
    private _pingIntervalId;
    private _pongTimeoutId;
    private _nextConnectDelay;
    private readonly _url;
    private readonly _protocols;
    protected readonly _options: Required<Options>;
    constructor(url: UrlProvider, protocols?: string | string[], options?: Options);
    get binaryType(): BinaryType;
    set binaryType(value: BinaryType);
    get messageQueue(): Message[];
    set messageQueue(value: Message[]);
    get retryCount(): number;
    get bufferedAmount(): number;
    get extensions(): string;
    get protocol(): string;
    get readyState(): number;
    get url(): string;
        get ws(): WebSocket | undefined;
    static get CONNECTING(): number;
    static get OPEN(): number;
    static get CLOSING(): number;
    static get CLOSED(): number;
    get CONNECTING(): number;
    get OPEN(): number;
    get CLOSING(): number;
    get CLOSED(): number;
    onclose: ((event: CloseEvent) => any) | null;
    onerror: ((event: ErrorEvent) => any) | null;
    onmessage: ((message: MessageEvent) => void) | null;
    onopen: ((event: Event) => void) | null;
    onreconnect: ((options: ReconnectEventParams) => void) | null;
        onWebsocketError: ((error: unknown) => void) | null;
    close(code?: number, reason?: string): void;
    send(data: Message): void;
    addEventListener<T extends keyof WebSocketEventListenerMap>(type: T, listener: WebSocketEventListenerMap[T]): void;
    removeEventListener<T extends keyof WebSocketEventListenerMap>(type: T, listener: WebSocketEventListenerMap): void;
    dispatchEvent(event: Event): boolean;
    private _callEventListener;
    reconnect(code?: number, reason?: string): void;
    private _connect;
    private _disconnect;
    private _handleOpen;
    private _handleMessage;
    private _handleClose;
    private _handleError;
    private _handleReconnect;
    private _wait;
    private _getNextDelay;
    private _getNextUrl;
    private _handleTimeout;
    private _acceptOpen;
    private _debug;
    private _addEventListeners;
    private _removeListeners;
    private _heartCheck;
    private _heartStart;
    private _heartReset;
    private _clearTimeouts;
}

export declare class Event {
    target: any;
    type: string;
    constructor(type: string, target: any);
}
export declare class ErrorEvent extends Event {
    message: string;
    error: Error;
    constructor(error: Error, target: any);
}
export declare class CloseEvent extends Event {
    code: number;
    reason: string;
    wasClean: boolean;
    constructor(code: number | undefined, reason: string | undefined, target: any);
}
export declare type ReconnectEventParams = {
    maxRetries: number;
    reconnectDelay: number;
    retryCount: number;
};
export interface WebSocketEventMap {
    close: CloseEvent;
    error: ErrorEvent;
    message: MessageEvent;
    open: Event;
    reconnect: ReconnectEventParams;
}
export interface WebSocketEventListenerMap {
    close: (event: CloseEvent) => void | {
        handleEvent: (event: CloseEvent) => void;
    };
    error: (event: ErrorEvent) => void | {
        handleEvent: (event: ErrorEvent) => void;
    };
    message: (event: MessageEvent) => void | {
        handleEvent: (event: MessageEvent) => void;
    };
    open: (event: Event) => void | {
        handleEvent: (event: Event) => void;
    };
    reconnect: (options: ReconnectEventParams) => void;
}
export declare type ListenersMap = {
    error: Array<WebSocketEventListenerMap['error']>;
    message: Array<WebSocketEventListenerMap['message']>;
    open: Array<WebSocketEventListenerMap['open']>;
    close: Array<WebSocketEventListenerMap['close']>;
    reconnect: Array<WebSocketEventListenerMap['reconnect']>;
};
export declare type Message = string | ArrayBufferLike | Blob | ArrayBufferView;
export declare type Options = {
    WebSocket?: any;
    maxReconnectionDelay?: number;
    minReconnectionDelay?: number;
    reconnectionDelayGrowFactor?: number;
    minUptime?: number;
    connectionTimeout?: number;
    maxRetries?: number;
    maxEnqueuedMessages?: number;
    startClosed?: boolean;
    enableHeartbeat?: boolean;
    pingTimeout?: number;
    pongTimeout?: number;
    pingMsg?: Message;
    outputPingMsg?: boolean;
    debug?: boolean;
};
export declare type UrlProvider = string | (() => string) | (() => Promise<string>);