@jetlinks-web/core 2.0.8 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetlinks-web/core",
-  "version": "2.0.8",
+  "version": "2.1.0",
   "description": "",
   "main": "index.ts",
   "module": "index.ts",
@@ -16,9 +16,10 @@
   "license": "ISC",
   "dependencies": {
     "axios": "^1.7.4",
-    "@jetlinks-web/types": "^1.0.2",
+    "rxjs": "^7.8.1",
     "@jetlinks-web/constants": "^1.0.7",
-    "@jetlinks-web/utils": "^1.2.5"
+    "@jetlinks-web/utils": "^1.2.5",
+    "@jetlinks-web/types": "^1.0.2"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package/src/axios.ts

@@ -38,6 +38,14 @@ interface Options {
 
 }
 
+interface RequestOptions {
+  url?: string
+  method?: string
+  params?: any
+  data?: any
+  [key: string]: any
+}
+
 let instance: AxiosInstance
 
 let _options: Options = {
@@ -223,5 +231,123 @@ export const request = {
   post, get, put, patch, remove, getStream, postStream
 }
 
+export class Request {
+  modulePath: string
+
+  constructor(modulePath: string) {
+    this.modulePath = modulePath
+  }
+
+  /**
+   * 分页查询
+   * @param {object} data 查询参数
+   * @param {object} options 请求配置
+   * @returns {Promise<AxiosResponse<any>>} 分页查询结果
+   */
+  page(data: any, options: RequestOptions= {
+    url: undefined,
+    method: undefined,
+  }) {
+    const { url='/_query', method = 'post', ...rest } = options
+    return request[method](`${this.modulePath}${url}`, data, rest)
+  }
+
+  /**
+   * 不分页查询
+   * @param {object} data 查询参数
+   * @param {object} options 请求配置
+   * @returns {Promise<AxiosResponse<any>>} 不分页查询结果
+   */
+  noPage(data?: any, options: RequestOptions = {
+    url: undefined,
+    method: undefined,
+  }) {
+    const { url='/_query/no-page', method = 'post', ...rest } = options
+    return request[method](`${this.modulePath}${url}`, { paging: false, ...data}, rest)
+  }
+
+  /**
+   * 详情查询
+   * @param {string} id 详情ID
+   * @param {object} params 查询参数
+   * @param {object} options 请求配置
+   * @returns {Promise<AxiosResponse<any>>} 详情查询结果
+   */
+  detail(id: string, params?: any, options: RequestOptions= {
+    url: undefined,
+    method: undefined,
+  }) {
+    const { url=`/${id}/detail`, method = 'get', ...rest } = options
+    return request[method](`${this.modulePath}${url}`, params, rest)
+  }
+
+  /**
+   * 保存
+   * @param {object} data 保存参数
+   * @param {object} options 请求配置
+   * @returns {Promise<AxiosResponse<any>>} 保存结果
+   */
+  save(data: any, options: RequestOptions = {
+    url: undefined,
+    method: undefined,
+  }) {
+    const { url=``, method = 'post', ...rest } = options
+    return request[method](`${this.modulePath}${url}`, data, rest)
+  }
+  
+  /**
+   * 更新
+   * @param {object} data 更新参数
+   * @param {object} options 请求配置
+   * @returns {Promise<AxiosResponse<any>>} 更新结果
+   */
+  update(data: any, options: RequestOptions = {
+    url: undefined,
+    method: undefined,
+  }) {
+    const { url=``, method = 'post', ...rest } = options
+    return patch(`${this.modulePath}${url}`, data, rest)
+  }
+
+  /**
+   * 删除
+   * @param {string} id 删除ID
+   * @param {object} options 请求配置
+   * @returns {Promise<AxiosResponse<any>>} 删除结果
+   */
+  delete(id: string, params?: any, options: RequestOptions = {
+    url: undefined,
+    method: undefined,
+  }) {
+    const { url=`/${id}`, method = 'post', ...rest } = options
+    return remove(`${this.modulePath}${url}`, params, rest)
+  }
+
+  post(...args) {
+    const [url, data, options] = args
+    return post(`${this.modulePath}${url}`, data, options)
+  }
+
+  get(...args) {
+    const [url, params, options] = args
+    return get(`${this.modulePath}${url}`, params, options)
+  }
+
+  put(...args) {
+    const [url, data, options] = args
+    return put(`${this.modulePath}${url}`, data, options)
+  }
+
+  patch(...args) {
+    const [url, data, options] = args
+    return patch(`${this.modulePath}${url}`, data, options)
+  }
+
+  remove(...args) {
+    const [url, params, options] = args
+    return remove(`${this.modulePath}${url}`, params, options)
+  }
+}
+
 
 

package/src/websocket.ts

@@ -0,0 +1,243 @@
+import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
+import { Observable, Subject, timer, Subscription, EMPTY } from 'rxjs';
+import { retry, catchError } from 'rxjs/operators';
+import { notification } from 'ant-design-vue';
+
+interface WebSocketMessage {
+  type: string;
+  id?: string;
+  topic?: string;
+  parameter?: Record<string, any>;
+  requestId?: string;
+  message?: string;
+  [key: string]: any;
+}
+
+type WS_Options = {
+    onError?: (message: WebSocketMessage) => void
+}
+
+export class WebSocketClient {
+  private ws: WebSocketSubject<WebSocketMessage> | null = null;
+  private subscriptions = new Map<string, Subject<WebSocketMessage>>();
+  private pendingSubscriptions = new Map<string, Subject<WebSocketMessage>>();
+  private heartbeatSubscription: Subscription | null = null;
+  private reconnectAttempts = 0;
+  private readonly maxReconnectAttempts = 100;
+  private isConnected = false;
+  private tempQueue: WebSocketMessage[] = []; // 缓存消息队列
+  private url: string = '';
+  private options: WS_Options = {}
+
+  constructor(options?: WS_Options) {
+    this.options = options || {};
+    this.setupConnectionMonitor();
+  }
+
+  public initWebSocket(url: string) {
+    this.url = url;
+  }
+
+  private setupConnectionMonitor() {
+    window.addEventListener('online', () => {
+      console.log('Network is online, attempting to reconnect...');
+      this.reconnect();
+    });
+
+    window.addEventListener('offline', () => {
+      console.log('Network is offline, caching subscriptions...');
+      this.cacheSubscriptions();
+    });
+
+    window.addEventListener('beforeunload', () => {
+      this.disconnect();
+    });
+  }
+
+  private getReconnectDelay(): number {
+    if (this.reconnectAttempts <= 10) {
+      return 5000; // 5s
+    } else if (this.reconnectAttempts <= 20) {
+      return 15000; // 15s
+    }
+    return 60000; // 60s
+  }
+
+  private setupWebSocket() {
+    if (this.ws || !this.url) {
+      return;
+    }
+
+    this.ws = webSocket<WebSocketMessage>({
+      url: this.url,
+      openObserver: {
+        next: () => {
+          console.log('WebSocket connected');
+          this.isConnected = true;
+          this.reconnectAttempts = 0;
+          this.startHeartbeat();
+          this.restoreSubscriptions();
+          this.processTempQueue();
+        }
+      },
+      closeObserver: {
+        next: () => {
+          console.log('WebSocket disconnected');
+          this.isConnected = false;
+          this.cacheSubscriptions();
+          this.stopHeartbeat();
+          this.reconnect();
+        }
+      }
+    });
+
+    this.ws.pipe(
+      catchError(error => {
+        console.error('WebSocket error:', error);
+        return EMPTY;
+      }),
+      retry({
+        delay: (error, retryCount) => {
+          this.reconnectAttempts = retryCount;
+          if (retryCount > this.maxReconnectAttempts) {
+            throw new Error('Max reconnection attempts reached');
+          }
+          return timer(this.getReconnectDelay());
+        }
+      })
+    ).subscribe(
+      (message) => this.handleMessage(message),
+      (error) => console.error('WebSocket error:', error)
+    );
+  }
+
+  private startHeartbeat() {
+    this.stopHeartbeat();
+    this.heartbeatSubscription = timer(0, 2000).subscribe(() => {
+      this.send({ type: 'ping' });
+    });
+  }
+
+  private stopHeartbeat() {
+    if (this.heartbeatSubscription) {
+      this.heartbeatSubscription.unsubscribe();
+      this.heartbeatSubscription = null;
+    }
+  }
+
+  private handleMessage(message: WebSocketMessage) {
+    if (message.type === 'pong') {
+      return;
+    }
+
+    if (message.type === 'error') {
+        if (this.options.onError) {
+            this.options.onError(message)
+        } else {
+            notification.error({ key: 'error', message: message.message });
+        }
+      return;
+    }
+
+    const subscriber = this.subscriptions.get(message.requestId || '');
+    if (subscriber) {
+      if (message.type === 'complete') {
+        subscriber.complete();
+        this.subscriptions.delete(message.requestId || '');
+      } else if (message.type === 'result') {
+        subscriber.next(message);
+      }
+    }
+  }
+
+  private processTempQueue() {
+    while (this.tempQueue.length > 0) {
+      const message = this.tempQueue.shift();
+      if (message) {
+        this.send(message);
+      }
+    }
+  }
+
+  private cacheSubscriptions() {
+    this.pendingSubscriptions = new Map(this.subscriptions);
+    this.subscriptions.clear();
+  }
+
+  private restoreSubscriptions() {
+    this.pendingSubscriptions.forEach((subject, id) => {
+      this.subscriptions.set(id, subject);
+    });
+    this.pendingSubscriptions.clear();
+  }
+
+  private reconnect() {
+    if (!this.isConnected && navigator.onLine) {
+      this.ws = null;
+      this.setupWebSocket();
+    }
+  }
+
+  public connect() {
+    this.setupWebSocket();
+  }
+
+  public disconnect() {
+    if (this.ws) {
+      this.ws.complete();
+      this.ws = null;
+    }
+    this.stopHeartbeat();
+    this.subscriptions.clear();
+    this.pendingSubscriptions.clear();
+    this.tempQueue = [];
+  }
+
+  public send(message: WebSocketMessage) {
+    if (this.ws && this.isConnected) {
+      this.ws.next(message);
+    } else {
+      this.tempQueue.push(message);
+    }
+  }
+
+  public getWebSocket(id: string, topic: string, parameter: Record<string, any> = {}): Observable<WebSocketMessage> {
+    const subject = new Subject<WebSocketMessage>();
+    this.subscriptions.set(id, subject);
+
+    const message: WebSocketMessage = {
+      id,
+      topic,
+      parameter,
+      type: 'sub'
+    };
+
+    this.send(message);
+
+    return new Observable(subscriber => {
+      const subscription = subject.subscribe(subscriber);
+
+      return () => {
+        subscription.unsubscribe();
+        this.send({ id, type: 'unsub' });
+        this.subscriptions.delete(id);
+      };
+    });
+  }
+}
+
+/**
+ * 创建单例
+ * @example
+ * wsClient.initWebSocket('ws://example.com/ws');
+ * wsClient.connect();
+ * const subscription = wsClient.getWebSocket('id1', 'topic1', { param: 'value' })
+ *   .subscribe(
+ *     message => console.log('Received:', message)
+ *   );
+ * 
+ * // 清理
+ * subscription.unsubscribe();
+ * 
+ */
+export const wsClient = new WebSocketClient();