Skip to content

websocket 断开自动重连,使用简单,无依赖,TypeScript编写,单元测试。

License

Notifications You must be signed in to change notification settings

chenchenwuai/websocket-reconnect

Repository files navigation

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>);

About

websocket 断开自动重连,使用简单,无依赖,TypeScript编写,单元测试。

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published