feat(useWebSocket): add on max attempt callback

packages/hooks/src/useWebSocket/__tests__/index.test.ts

@@ -145,3 +145,52 @@ describe('useWebSocket', () => {
     act(() => wsServer2.close());
   });
 });
+
+it('should call onMaxAttempt when reconnect attempts exceeded and unable to connect to server', async () => {
+  const onMaxAttempt = jest.fn();
+
+  renderHook(() =>
+    useWebSocket('ws://localhost:8888', {
+      onMaxAttempt,
+      reconnectInterval: 100,
+    }),
+  );
+
+  await act(async () => {
+    await sleep(500);
+  });
+
+  expect(onMaxAttempt).toBeCalledTimes(1);
+});
+
+it('should call onMaxAttempt when reconnect attempts exceed and server disconnects', async () => {
+  const onMaxAttempt = jest.fn();
+
+  const wsServer = new WS(wsUrl);
+
+  renderHook(() =>
+    useWebSocket(wsUrl, {
+      onMaxAttempt,
+      reconnectInterval: 100,
+      reconnectLimit: 1,
+    }),
+  );
+
+  await act(async () => {
+    await wsServer.connected;
+  });
+
+  wsServer.close();
+
+  await act(async () => {
+    await wsServer.connected;
+  });
+
+  wsServer.close();
+
+  await act(async () => {
+    await sleep(500);
+  });
+
+  expect(onMaxAttempt).toBeCalledTimes(1);
+});

packages/hooks/src/useWebSocket/index.en-US.md

@@ -60,6 +60,7 @@ useWebSocket(socketUrl: string, options?: Options): Result;
 | onClose           | WebSocket close callback           | `(event: WebSocketEventMap['close'], instance: WebSocket) => void`     | -       |
 | onMessage         | WebSocket receive message callback | `(message: WebSocketEventMap['message'], instance: WebSocket) => void` | -       |
 | onError           | WebSocket error callback           | `(event: WebSocketEventMap['error'], instance: WebSocket) => void`     | -       |
+| onMaxAttempt      | Reconnect attempts exceed callback | `() => void`                                                           | -       |
 | reconnectLimit    | Retry times                        | `number`                                                               | `3`     |
 | reconnectInterval | Retry interval(ms)                 | `number`                                                               | `3000`  |
 | manual            | Manually starts connection         | `boolean`                                                              | `false` |

packages/hooks/src/useWebSocket/index.ts

@@ -18,6 +18,7 @@ export interface Options {
   onClose?: (event: WebSocketEventMap['close'], instance: WebSocket) => void;
   onMessage?: (message: WebSocketEventMap['message'], instance: WebSocket) => void;
   onError?: (event: WebSocketEventMap['error'], instance: WebSocket) => void;
+  onMaxAttempt?: () => void;
 
   protocols?: string | string[];
 }
@@ -40,17 +41,20 @@ export default function useWebSocket(socketUrl: string, options: Options = {}):
     onClose,
     onMessage,
     onError,
+    onMaxAttempt,
     protocols,
   } = options;
 
   const onOpenRef = useLatest(onOpen);
   const onCloseRef = useLatest(onClose);
   const onMessageRef = useLatest(onMessage);
   const onErrorRef = useLatest(onError);
+  const onMaxAttemptRef = useLatest(onMaxAttempt);
 
   const reconnectTimesRef = useRef(0);
   const reconnectTimerRef = useRef<ReturnType<typeof setTimeout>>();
   const websocketRef = useRef<WebSocket>();
+  const maxAttemptThrottle = useRef<ReturnType<typeof setTimeout>>();
 
   const [latestMessage, setLatestMessage] = useState<WebSocketEventMap['message']>();
   const [readyState, setReadyState] = useState<ReadyState>(ReadyState.Closed);
@@ -69,6 +73,14 @@ export default function useWebSocket(socketUrl: string, options: Options = {}):
         connectWs();
         reconnectTimesRef.current++;
       }, reconnectInterval);
+    } else {
+      if (maxAttemptThrottle.current) {
+        clearTimeout(maxAttemptThrottle.current);
+      }
+
+      maxAttemptThrottle.current = setTimeout(() => {
+        onMaxAttemptRef.current?.();
+      }, 100);
     }
   };
 
@@ -140,6 +152,10 @@ export default function useWebSocket(socketUrl: string, options: Options = {}):
       clearTimeout(reconnectTimerRef.current);
     }
 
+    if (maxAttemptThrottle.current) {
+      clearTimeout(maxAttemptThrottle.current);
+    }
+
     reconnectTimesRef.current = reconnectLimit;
     websocketRef.current?.close();
     websocketRef.current = undefined;

packages/hooks/src/useWebSocket/index.zh-CN.md

@@ -60,6 +60,7 @@ useWebSocket(socketUrl: string, options?: Options): Result;
 | onClose           | webSocket 关闭回调     | `(event: WebSocketEventMap['close'], instance: WebSocket) => void`     | -       |
 | onMessage         | webSocket 收到消息回调 | `(message: WebSocketEventMap['message'], instance: WebSocket) => void` | -       |
 | onError           | webSocket 错误回调     | `(event: WebSocketEventMap['error'], instance: WebSocket) => void`     | -       |
+| onMaxAttempt      | 重试最大次数回调       | `() => void`                                                           | -       |
 | reconnectLimit    | 重试次数               | `number`                                                               | `3`     |
 | reconnectInterval | 重试时间间隔（ms）     | `number`                                                               | `3000`  |
 | manual            | 手动启动连接           | `boolean`                                                              | `false` |