heitu 更新通知(usePolling/useWebSocket)

网站地址 heitu.wang/hooks

usePolling

描述

一个用于处理轮询请求的 Hook，支持定时轮询、错误重试、手动控制等功能。

特性

• 支持自动/手动控制轮询
• 可配置轮询间隔时间
• 内置错误重试机制
• 提供完整的状态管理
• 支持成功/失败回调
• 自动清理资源

演示

基础用法

import React from 'react';
import { usePolling } from 'heitu';
import Mock from 'mockjs';

export default () => {
  const getUsername = () => {
    console.log('polling getUsername');
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(Mock.mock('@name'));
      }, 1000);
    });
  };
  const { data, loading, error, start, stop, state } = usePolling(
    async () => {
      const res = await getUsername();
      return res;
    },
    {
      interval: 5000, // 每5秒轮询一次
      onSuccess: (data) => {
        console.log('轮询成功:', data);
      },
      onError: (error) => {
        console.log('轮询失败:', error);
      },
    },
  );
  console.log(state, 'state');
  return (
    <div>
      {state === 1 && <span>轮询中...</span>}
      {loading && <span>加载中...</span>}
      {error && <span>错误: {error.message}</span>}
      <div>数据: {JSON.stringify(data)}</div>
      <button onClick={start}>开始轮询</button>
      <button onClick={stop}>停止轮询</button>
    </div>
  );
};

API

Options

参数	说明	类型	默认值
interval	轮询间隔时间(ms)	number	3000
manual	是否手动控制轮询	boolean	false
retryTimes	失败重试次数	number	3
retryInterval	重试间隔时间(ms)	number	1000
onSuccess	成功回调	(data: T) => void	-
onError	失败回调	(error: Error) => void	-

返回值

参数	说明	类型
data	轮询返回的数据	T | undefined
loading	加载状态	boolean
error	错误信息	Error | undefined
start	开始轮询	() => void
stop	停止轮询	() => void

useWebSocket

描述

useWebSocket

• 用于某些项目前端多次请求相同浪费资源请求时间的问题

• 使用要求:

  1. 请求参数相同
  2. 接口返回也相同

演示

import { useWebSocket } from 'heitu';
import { useState } from 'react';

const Index = () => {
  const [message, setMessage] = useState('');

  const { readyState, sendMessage, connect, disconnect, latestMessage } =
    useWebSocket('wss://ws.postman-echo.com/raw', {
      onOpen: (event) => {
        console.log('连接成功');
      },
      onMessage: (message) => {
        console.log('收到消息:', message);
      },
      onError: (event) => {
        console.log('连接错误');
      },
      onClose: (event) => {
        console.log('连接关闭');
      },
      json: true,
    });
  console.log(readyState, 'readyState');
  return (
    <div>
      <p>
        连接状态:
        {readyState === WebSocket.CONNECTING && '正在连接中'}
        {readyState === WebSocket.OPEN && '连接已建立'}
        {readyState === WebSocket.CLOSING && '连接正在关闭'}
        {readyState === WebSocket.CLOSED && '连接已关闭'}
      </p>
      <button
        onClick={() => sendMessage({ text: 'hello', date: `${Date.now()}` })}
        disabled={readyState !== WebSocket.OPEN}
      >
        发送消息
      </button>
      <p>
        最新消息: {latestMessage ? JSON.stringify(latestMessage) : '暂无消息'}
      </p>
      {readyState === WebSocket.OPEN && (
        <button onClick={disconnect}>断开连接</button>
      )}
      {(readyState === WebSocket.CONNECTING ||
        readyState === WebSocket.CLOSED) && (
        <button onClick={connect}>连接</button>
      )}
    </div>
  );
};
export default Index;

API

Options

参数	说明	类型	默认值
onOpen	连接建立时的回调	(event: WebSocketEventMap['open']) => void	-
onClose	连接关闭时的回调	(event: WebSocketEventMap['close']) => void	-
onMessage	收到消息时的回调	(message: WebSocketEventMap['message']) => void	-
onError	连接错误时的回调	(event: WebSocketEventMap['error']) => void	-
protocols	WebSocket 子协议	string | string[]	-
reconnectLimit	重连次数限制	number	3
reconnectInterval	重连间隔时间(ms)	number	3000
manual	是否手动控制连接	boolean	false
json	是否自动序列化 JSON	boolean	false

返回值

参数	说明	类型
readyState	WebSocket 连接状态	number
sendMessage	发送消息方法	(message: string | ArrayBufferLike | Blob | ArrayBufferView) => void
connect	手动连接方法	() => void
disconnect	断开连接方法	() => void

readyState 状态说明

值	状态	描述
0	CONNECTING	正在连接中
1	OPEN	连接已建立
2	CLOSING	连接正在关闭
3	CLOSED	连接已关闭