websocket-reconnect

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

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

安装

websocket-reconnect-pro

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
autoSendQueueMessage	重连成功后是否自动发送队列中的消息	boolean	-	true
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>);