diff --git a/packages/hooks/src/useWebSocket/demo/demo2.tsx b/packages/hooks/src/useWebSocket/demo/demo2.tsx
index 4df5dd7b40..152cdfa041 100644
--- a/packages/hooks/src/useWebSocket/demo/demo2.tsx
+++ b/packages/hooks/src/useWebSocket/demo/demo2.tsx
@@ -15,7 +15,10 @@ export default () => {
'wss://ws.postman-echo.com/raw',
{
heartbeat: {
- interval: 1000 * 3,
+ message: 'ping',
+ responseMessage: 'pong',
+ interval: 3000,
+ responseTimeout: 10000,
},
},
);
diff --git a/packages/hooks/src/useWebSocket/index.en-US.md b/packages/hooks/src/useWebSocket/index.en-US.md
index bbb4aeb90b..6c100ce0d4 100644
--- a/packages/hooks/src/useWebSocket/index.en-US.md
+++ b/packages/hooks/src/useWebSocket/index.en-US.md
@@ -13,6 +13,28 @@ A hook for WebSocket.
+### Heartbeat example
+
+By setting the `heartbeat`, you can enable the heartbeat mechanism. After a successful connection, `useWebSocket` will send a `message` every `interval` milliseconds. If no messages are received within the `responseTimeout`, it may indicate that there is an issue with the connection, and the connection will be closed.
+
+It is important to note that if a `responseMessage` is defined, it will be ignored, and it will not trigger the `onMessage` event or update the `latestMessage`.
+
+```tsx | pure
+useWebSocket(
+ 'wss://ws.postman-echo.com/raw',
+ {
+ heartbeat: {
+ message: 'ping',
+ responseMessage: 'pong',
+ interval: 3000,
+ responseTimeout: 10000,
+ }
+ }
+);
+```
+
+
+
## API
```typescript
@@ -23,6 +45,13 @@ enum ReadyState {
Closed = 3,
}
+interface HeartbeatOptions{
+ message?: string;
+ responseMessage?: string;
+ interval?: number;
+ responseTimeout? :number;
+}
+
interface Options {
reconnectLimit?: number;
reconnectInterval?: number;
@@ -31,6 +60,7 @@ interface Options {
onMessage?: (message: WebSocketEventMap['message'], instance: WebSocket) => void;
onError?: (event: WebSocketEventMap['error'], instance: WebSocket) => void;
protocols?: string | string[];
+ heartbeat?: boolean | HeartbeatOptions;
}
interface Result {
@@ -68,11 +98,12 @@ useWebSocket(socketUrl: string, options?: Options): Result;
### HeartbeatOptions
-| 参数 | 说明 | 类型 | 默认值 |
-| --------------- | -------------------------------------------------------------------- | -------- | ------ |
-| message | Heartbeat message | `string` | `ping` |
-| responseMessage | Heartbeat response message, `latestMessage` will ignore this message | `string` | - |
-| interval | Heartbeat Interval(ms) | `number` | `6000` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
+| message | Heartbeat message | `string` | `ping` |
+| responseMessage | Heartbeat response message; the `onMessage` and `latestMessage` will ignore this message. | `string` | `pong` |
+| interval | Heartbeat Interval(ms) | `number` | `5000` |
+| responseTimeout | The heartbeat timeout (ms) indicates that if no heartbeat messages or other messages are received within this time, the connection will be considered abnormal and will be disconnected. | `number` | `10000` |
### Result
diff --git a/packages/hooks/src/useWebSocket/index.zh-CN.md b/packages/hooks/src/useWebSocket/index.zh-CN.md
index 51e9ddf701..94738693e2 100644
--- a/packages/hooks/src/useWebSocket/index.zh-CN.md
+++ b/packages/hooks/src/useWebSocket/index.zh-CN.md
@@ -13,7 +13,25 @@ nav:
-### 测试示例
+### 心跳示例
+
+通过设置 `heartbeat`,可以启用心跳机制,`useWebSocket` 在连接成功后,每隔 `interval` 毫秒发送一个 `message`,如果超过 `responseTimeout` 时间未收到任何消息,可能表示连接出问题,将关闭连接。
+
+需要注意的是,如果定义了 `responseMessage`,该消息将被忽略,不会触发 `onMessage` 事件,也不会更新 `latestMessage`。
+
+```tsx | pure
+useWebSocket(
+ 'wss://ws.postman-echo.com/raw',
+ {
+ heartbeat: {
+ message: 'ping',
+ responseMessage: 'pong',
+ interval: 3000,
+ responseTimeout: 10000,
+ }
+ }
+);
+```
@@ -31,6 +49,7 @@ interface HeartbeatOptions{
message?: string;
responseMessage?: string;
interval?: number;
+ responseTimeout? :number;
}
interface Options {
@@ -79,11 +98,12 @@ useWebSocket(socketUrl: string, options?: Options): Result;
### HeartbeatOptions
-| 参数 | 说明 | 类型 | 默认值 |
-| --------------- | ------------------------------------------ | -------- | ------ |
-| message | 心跳消息 | `string` | `ping` |
-| responseMessage | 心跳回复消息,`latestMessage` 会忽略该消息 | `string` | `pong` |
-| interval | 心跳时间间隔(ms) | `number` | `6000` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --------------- | ---------------------------------------------------------------------------- | -------- | ------- |
+| message | 心跳消息 | `string` | `ping` |
+| responseMessage | 心跳回复消息,`onMessage`、`latestMessage` 会忽略该消息 | `string` | `pong` |
+| interval | 心跳时间间隔(ms) | `number` | `5000` |
+| responseTimeout | 心跳超时时间(ms),超过此时间未收到心跳消息或其他消息将视为连接异常并断开连接 | `number` | `10000` |
### Result