@yh-ui/request 0.1.21

package/dist/websocket.d.ts

@@ -0,0 +1,163 @@
+/**
+ * WebSocket 支持
+ * 提供 WebSocket 连接管理、自动重连、心跳检测等功能
+ */
+import { type Ref } from 'vue';
+/** WebSocket 状态 */
+export type WebSocketState = 'connecting' | 'connected' | 'disconnecting' | 'disconnected' | 'reconnecting' | 'error';
+/** WebSocket 消息数据 */
+export type WebSocketData = string | ArrayBuffer | Blob;
+/** WebSocket 消息 */
+export interface WebSocketMessage<T = unknown> {
+    /** 消息类型 */
+    type: 'text' | 'binary' | 'ping' | 'pong' | 'error';
+    /** 消息数据 */
+    data: T;
+    /** 原始数据 */
+    raw: WebSocketData;
+    /** 时间戳 */
+    timestamp: number;
+}
+/** WebSocket 配置 */
+export interface WebSocketOptions {
+    /** WebSocket URL */
+    url: string;
+    /** 协议子数组 */
+    protocols?: string | string[];
+    /** 自动重连 */
+    reconnect?: boolean;
+    /** 重连最大次数 */
+    reconnectMaxAttempts?: number;
+    /** 重连初始延迟 (ms) */
+    reconnectInterval?: number;
+    /** 重连最大延迟 (ms) */
+    reconnectMaxDelay?: number;
+    /** 心跳启用 */
+    heartbeat?: boolean;
+    /** 心跳间隔 (ms) */
+    heartbeatInterval?: number;
+    /** 心跳超时 (ms) */
+    heartbeatTimeout?: number;
+    /** 自定义请求头 (仅浏览器) */
+    headers?: Record<string, string>;
+    /** 二进制数据类型 */
+    binaryType?: BinaryType;
+    /** 消息编码器 */
+    encode?: (data: unknown) => string | ArrayBuffer;
+    /** 消息解码器 */
+    decode?: (data: WebSocketData) => unknown;
+}
+/**
+ * WebSocket 客户端类
+ * 支持自动重连、心跳检测、消息队列等功能
+ */
+export declare class WebSocketClient {
+    private ws;
+    private url;
+    private protocols?;
+    private options;
+    private _state;
+    private reconnectAttempts;
+    private reconnectTimer;
+    private heartbeatTimer;
+    private heartbeatTimeoutTimer;
+    private messageQueue;
+    private onOpenCallback;
+    private onCloseCallback;
+    private onErrorCallback;
+    private onMessageCallback;
+    private onStateChangeCallback;
+    readonly state: Ref<WebSocketState>;
+    readonly isConnected: Ref<boolean>;
+    readonly lastMessage: Ref<WebSocketMessage | null>;
+    constructor(options: WebSocketOptions);
+    /**
+     * 获取当前状态
+     */
+    getState(): WebSocketState;
+    /**
+     * 设置状态
+     */
+    private setState;
+    /**
+     * 连接
+     */
+    connect(): Promise<void>;
+    /**
+     * 断开连接
+     */
+    disconnect(code?: number, reason?: string): void;
+    /**
+     * 发送消息
+     */
+    send(data: unknown): boolean;
+    /**
+     * 发送并等待响应
+     */
+    sendAndWait<T = unknown>(data: unknown, timeout?: number): Promise<T>;
+    /**
+     * 事件回调
+     */
+    onOpen(callback: () => void): this;
+    onClose(callback: (code: number, reason: string) => void): this;
+    onError(callback: (error: Event) => void): this;
+    onMessage(callback: (message: WebSocketMessage) => void): this;
+    onStateChange(callback: (state: WebSocketState) => void): this;
+    private handleOpen;
+    private handleClose;
+    private handleError;
+    private handleMessage;
+    private reconnect;
+    private startHeartbeat;
+    private clearHeartbeatTimeout;
+    private clearTimers;
+    /**
+     * 清理资源
+     */
+    dispose(): void;
+}
+/**
+ * WebSocket Vue Hook
+ *
+ * @example
+ * const {
+ *   state, isConnected, lastMessage,
+ *   connect, disconnect, send
+ * } = useWebSocket({
+ *   url: 'wss://example.com/ws',
+ *   reconnect: true,
+ *   heartbeat: true,
+ * })
+ */
+export declare function useWebSocket(options: WebSocketOptions): {
+    /** 当前状态 */
+    state: Ref<WebSocketState, WebSocketState>;
+    /** 是否已连接 */
+    isConnected: Ref<boolean, boolean>;
+    /** 最后收到的消息 */
+    lastMessage: Ref<WebSocketMessage<unknown> | null, WebSocketMessage<unknown> | null>;
+    /** 连接 */
+    connect: () => Promise<void>;
+    /** 断开连接 */
+    disconnect: (code?: number, reason?: string) => void;
+    /** 发送消息 */
+    send: (data: unknown) => boolean;
+    /** 发送并等待响应 */
+    sendAndWait: <T = unknown>(data: unknown, timeout?: number) => Promise<T>;
+    /** 事件监听 */
+    onOpen: (callback: () => void) => WebSocketClient;
+    onClose: (callback: (code: number, reason: string) => void) => WebSocketClient;
+    onError: (callback: (error: Event) => void) => WebSocketClient;
+    onMessage: (callback: (message: WebSocketMessage) => void) => WebSocketClient;
+    onStateChange: (callback: (state: WebSocketState) => void) => WebSocketClient;
+    /** 获取原始客户端 */
+    getClient: () => WebSocketClient;
+};
+/**
+ * 创建 WebSocket 客户端
+ */
+export declare function createWebSocket(options: WebSocketOptions): WebSocketClient;
+/**
+ * 判断浏览器是否支持 WebSocket
+ */
+export declare function isWebSocketSupported(): boolean;

package/dist/websocket.mjs

@@ -0,0 +1,316 @@
+import { ref, onUnmounted } from "vue";
+export class WebSocketClient {
+  ws = null;
+  url = "";
+  protocols;
+  options;
+  // 状态
+  _state = "disconnected";
+  reconnectAttempts = 0;
+  reconnectTimer = null;
+  heartbeatTimer = null;
+  heartbeatTimeoutTimer = null;
+  messageQueue = [];
+  // 回调
+  onOpenCallback = null;
+  onCloseCallback = null;
+  onErrorCallback = null;
+  onMessageCallback = null;
+  onStateChangeCallback = null;
+  // 响应式状态 (供 Vue 使用)
+  state;
+  isConnected;
+  lastMessage;
+  constructor(options) {
+    this.url = options.url;
+    this.protocols = options.protocols;
+    this.options = {
+      url: options.url,
+      protocols: options.protocols,
+      reconnect: options.reconnect ?? true,
+      reconnectMaxAttempts: options.reconnectMaxAttempts ?? 10,
+      reconnectInterval: options.reconnectInterval ?? 1e3,
+      reconnectMaxDelay: options.reconnectMaxDelay ?? 3e4,
+      heartbeat: options.heartbeat ?? false,
+      heartbeatInterval: options.heartbeatInterval ?? 3e4,
+      heartbeatTimeout: options.heartbeatTimeout ?? 1e4,
+      headers: options.headers ?? {},
+      binaryType: options.binaryType ?? "blob",
+      encode: options.encode ?? ((data) => JSON.stringify(data)),
+      decode: options.decode ?? ((data) => {
+        if (typeof data === "string") {
+          try {
+            return JSON.parse(data);
+          } catch {
+            return data;
+          }
+        }
+        return data;
+      })
+    };
+    this.state = ref("disconnected");
+    this.isConnected = ref(false);
+    this.lastMessage = ref(null);
+    this.handleOpen = this.handleOpen.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleError = this.handleError.bind(this);
+    this.handleMessage = this.handleMessage.bind(this);
+  }
+  /**
+   * 获取当前状态
+   */
+  getState() {
+    return this._state;
+  }
+  /**
+   * 设置状态
+   */
+  setState(newState) {
+    this._state = newState;
+    this.state.value = newState;
+    this.isConnected.value = newState === "connected";
+    this.onStateChangeCallback?.(newState);
+  }
+  /**
+   * 连接
+   */
+  connect() {
+    return new Promise((resolve, reject) => {
+      if (!isWebSocketSupported()) {
+        const error = new Error("WebSocket is not supported in this environment");
+        this.setState("error");
+        reject(error);
+        return;
+      }
+      const CONNECTING = 0;
+      const OPEN = 1;
+      if (this.ws && (this.ws.readyState === OPEN || this.ws.readyState === CONNECTING)) {
+        resolve();
+        return;
+      }
+      this.setState("connecting");
+      try {
+        this.ws = this.protocols ? new WebSocket(this.url, this.protocols) : new WebSocket(this.url);
+        this.ws.binaryType = this.options.binaryType;
+        this.ws.onopen = (event) => {
+          this.handleOpen(event);
+          resolve();
+        };
+        this.ws.onclose = this.handleClose;
+        this.ws.onerror = this.handleError;
+        this.ws.onmessage = this.handleMessage;
+      } catch (error) {
+        this.setState("error");
+        reject(error);
+      }
+    });
+  }
+  /**
+   * 断开连接
+   */
+  disconnect(code = 1e3, reason = "Client disconnect") {
+    this.clearTimers();
+    this.setState("disconnecting");
+    if (this.ws) {
+      this.ws.close(code, reason);
+      this.ws = null;
+    }
+    this.setState("disconnected");
+  }
+  /**
+   * 发送消息
+   */
+  send(data) {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+      this.messageQueue.push(this.options.encode(data));
+      return false;
+    }
+    const encoded = this.options.encode(data);
+    this.ws.send(encoded);
+    return true;
+  }
+  /**
+   * 发送并等待响应
+   */
+  sendAndWait(data, timeout = 3e4) {
+    return new Promise((resolve, reject) => {
+      const messageId = Date.now().toString();
+      const timer = setTimeout(() => {
+        reject(new Error("WebSocket message timeout"));
+      }, timeout);
+      const originalCallback = this.onMessageCallback;
+      this.onMessageCallback = (message) => {
+        const decoded = message.data;
+        if (decoded && decoded.id === messageId) {
+          clearTimeout(timer);
+          this.onMessageCallback = originalCallback;
+          resolve(decoded.result);
+        } else {
+          originalCallback?.(message);
+        }
+      };
+      this.send({ id: messageId, ...data });
+    });
+  }
+  /**
+   * 事件回调
+   */
+  onOpen(callback) {
+    this.onOpenCallback = callback;
+    return this;
+  }
+  onClose(callback) {
+    this.onCloseCallback = callback;
+    return this;
+  }
+  onError(callback) {
+    this.onErrorCallback = callback;
+    return this;
+  }
+  onMessage(callback) {
+    this.onMessageCallback = callback;
+    return this;
+  }
+  onStateChange(callback) {
+    this.onStateChangeCallback = callback;
+    return this;
+  }
+  // ==================== 内部方法 ====================
+  handleOpen(_event) {
+    this.setState("connected");
+    this.reconnectAttempts = 0;
+    while (this.messageQueue.length > 0) {
+      const data = this.messageQueue.shift();
+      if (data && this.ws) {
+        this.ws.send(data);
+      }
+    }
+    if (this.options.heartbeat) {
+      this.startHeartbeat();
+    }
+    this.onOpenCallback?.();
+  }
+  handleClose(event) {
+    this.ws = null;
+    this.clearTimers();
+    this.setState("disconnected");
+    if (this.options.reconnect && this.reconnectAttempts < this.options.reconnectMaxAttempts) {
+      this.reconnect();
+    }
+    this.onCloseCallback?.(event.code, event.reason);
+  }
+  handleError(event) {
+    this.setState("error");
+    this.onErrorCallback?.(event);
+  }
+  handleMessage(event) {
+    const raw = event.data;
+    let data;
+    if (event.data === "pong") {
+      this.clearHeartbeatTimeout();
+      return;
+    }
+    try {
+      data = this.options.decode(raw);
+    } catch {
+      data = raw;
+    }
+    const message = {
+      type: event.data instanceof ArrayBuffer || event.data instanceof Blob ? "binary" : "text",
+      data,
+      raw,
+      timestamp: Date.now()
+    };
+    this.lastMessage.value = message;
+    this.onMessageCallback?.(message);
+  }
+  reconnect() {
+    this.setState("reconnecting");
+    this.reconnectAttempts++;
+    const delay = Math.min(
+      this.options.reconnectInterval * Math.pow(2, this.reconnectAttempts - 1),
+      this.options.reconnectMaxDelay
+    );
+    this.reconnectTimer = setTimeout(() => {
+      this.connect().catch(() => {
+      });
+    }, delay);
+  }
+  startHeartbeat() {
+    this.heartbeatTimer = setInterval(() => {
+      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+        this.ws.send("ping");
+        this.heartbeatTimeoutTimer = setTimeout(() => {
+          this.disconnect(4e3, "Heartbeat timeout");
+        }, this.options.heartbeatTimeout);
+      }
+    }, this.options.heartbeatInterval);
+  }
+  clearHeartbeatTimeout() {
+    if (this.heartbeatTimeoutTimer) {
+      clearTimeout(this.heartbeatTimeoutTimer);
+      this.heartbeatTimeoutTimer = null;
+    }
+  }
+  clearTimers() {
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    if (this.heartbeatTimer) {
+      clearInterval(this.heartbeatTimer);
+      this.heartbeatTimer = null;
+    }
+    this.clearHeartbeatTimeout();
+  }
+  /**
+   * 清理资源
+   */
+  dispose() {
+    this.disconnect();
+    this.onOpenCallback = null;
+    this.onCloseCallback = null;
+    this.onErrorCallback = null;
+    this.onMessageCallback = null;
+    this.onStateChangeCallback = null;
+  }
+}
+export function useWebSocket(options) {
+  const client = new WebSocketClient(options);
+  const state = client.state;
+  const isConnected = client.isConnected;
+  const lastMessage = client.lastMessage;
+  onUnmounted(() => {
+    client.dispose();
+  });
+  return {
+    /** 当前状态 */
+    state,
+    /** 是否已连接 */
+    isConnected,
+    /** 最后收到的消息 */
+    lastMessage,
+    /** 连接 */
+    connect: () => client.connect(),
+    /** 断开连接 */
+    disconnect: (code, reason) => client.disconnect(code, reason),
+    /** 发送消息 */
+    send: (data) => client.send(data),
+    /** 发送并等待响应 */
+    sendAndWait: (data, timeout) => client.sendAndWait(data, timeout),
+    /** 事件监听 */
+    onOpen: (callback) => client.onOpen(callback),
+    onClose: (callback) => client.onClose(callback),
+    onError: (callback) => client.onError(callback),
+    onMessage: (callback) => client.onMessage(callback),
+    onStateChange: (callback) => client.onStateChange(callback),
+    /** 获取原始客户端 */
+    getClient: () => client
+  };
+}
+export function createWebSocket(options) {
+  return new WebSocketClient(options);
+}
+export function isWebSocketSupported() {
+  return typeof WebSocket !== "undefined";
+}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@yh-ui/request",
+  "version": "0.1.21",
+  "description": "YH-UI HTTP request hooks - Enterprise-grade request management",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.mjs",
+      "require": "./dist/*.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@yh-ui/utils": "0.1.21"
+  },
+  "devDependencies": {
+    "vue": "^3.5.27",
+    "vue-tsc": "^2.2.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.27"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/1079161148/yh-ui.git",
+    "directory": "packages/request"
+  },
+  "keywords": [
+    "yh-ui",
+    "request",
+    "http",
+    "fetch",
+    "hooks",
+    "sse",
+    "streaming"
+  ],
+  "homepage": "https://1079161148.github.io/yh-ui/",
+  "author": "YH-UI Team",
+  "license": "MIT",
+  "scripts": {
+    "build": "unbuild",
+    "dev": "unbuild --stub",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint ."
+  }
+}