@lark-apaas/client-toolkit 1.2.0-alpha.6 → 1.2.0-alpha.7

package/lib/components/AppContainer/index.js

@@ -15,7 +15,7 @@ import { useAppInfo } from "../../hooks/index.js";
 import { TrackKey } from "../../types/tea.js";
 import safety from "./safety.js";
 import { getAppId } from "../../utils/getAppId.js";
-import { ServerLogPoller } from "../../server-log/index.js";
+import { ServerLogSSEClient } from "../../server-log/index.js";
 import QueryProvider from "../QueryProvider/index.js";
 import { initObservable } from "./utils/observable.js";
 registerDayjsPlugins();
@@ -34,7 +34,7 @@ const readCssVarColor = (varName, fallback)=>{
 const App = (props)=>{
     const { themeMeta = {} } = props;
     useAppInfo();
-    const serverLogPollerRef = useRef(null);
+    const serverLogClientRef = useRef(null);
     const { rem } = findValueByPixel(themeMetaOptions.themeRadius, themeMeta.borderRadius) || {
         rem: '0.625'
     };
@@ -50,22 +50,32 @@ const App = (props)=>{
         if ('production' !== process.env.NODE_ENV && window.parent !== window) {
             try {
                 const backendUrl = window.location.origin;
-                serverLogPollerRef.current = new ServerLogPoller({
+                serverLogClientRef.current = new ServerLogSSEClient({
                     serverUrl: backendUrl,
-                    apiPath: '/dev/logs/server-logs',
-                    pollInterval: 2000,
-                    limit: 100,
+                    sseEndpoint: '/dev/logs/server-logs/stream',
                     debug: true
                 });
-                serverLogPollerRef.current.start();
-                console.log('[AppContainer] Server log poller started');
+                serverLogClientRef.current.start();
+                console.log('[AppContainer] Server log SSE client started');
             } catch (error) {
-                console.error('[AppContainer] Failed to start server log poller:', error);
+                console.error('[AppContainer] Failed to start server log SSE client:', error);
             }
+            const handleVisibilityChange = ()=>{
+                if (!serverLogClientRef.current) return;
+                if (document.hidden) {
+                    serverLogClientRef.current.pause();
+                    console.log('[AppContainer] Tab hidden, SSE paused');
+                } else {
+                    serverLogClientRef.current.resume();
+                    console.log('[AppContainer] Tab visible, SSE resumed');
+                }
+            };
+            document.addEventListener('visibilitychange', handleVisibilityChange);
             return ()=>{
-                if (serverLogPollerRef.current) {
-                    serverLogPollerRef.current.stop();
-                    console.log('[AppContainer] Server log poller stopped');
+                document.removeEventListener('visibilitychange', handleVisibilityChange);
+                if (serverLogClientRef.current) {
+                    serverLogClientRef.current.stop();
+                    console.log('[AppContainer] Server log SSE client stopped');
                 }
             };
         }

package/lib/server-log/index.d.ts

@@ -1,9 +1,15 @@
 /**
  * Server Log 模块
  *
- * 通过 HTTP 轮询方式获取服务端日志并转发给父窗口
+ * 通过 SSE (Server-Sent Events) 方式获取服务端日志并转发给父窗口
+ *
+ * 变更说明 (2026-01-04):
+ * - 从 HTTP 轮询改为 SSE，降低延迟和网络压力
+ * - ServerLogPoller 已弃用，使用 ServerLogSSEClient 替代
  */
+export { ServerLogSSEClient } from './sse-client';
+export type { ServerLogSSEClientOptions } from './sse-client';
 export { ServerLogPoller } from './poller';
 export type { ServerLogPollerOptions } from './poller';
-export type { ServerLog, ServerLogLevel, ServerLogSource, ServerLogMeta, ServerLogPostMessage, ClientToServerMessage, ServerToClientMessage, } from './types';
-export { ServerLogPoller as default } from './poller';
+export type { ServerLog, ServerLogLevel, ServerLogSource, ServerLogMeta, ServerLogPostMessage, ServerLogControlMessage, ClientToServerMessage, ServerToClientMessage, } from './types';
+export { ServerLogSSEClient as default } from './sse-client';

package/lib/server-log/index.js

@@ -1,2 +1,3 @@
+import { ServerLogSSEClient } from "./sse-client.js";
 import { ServerLogPoller } from "./poller.js";
-export { ServerLogPoller, ServerLogPoller as default };
+export { ServerLogPoller, ServerLogSSEClient, ServerLogSSEClient as default };

package/lib/server-log/sse-client.d.ts

@@ -0,0 +1,108 @@
+/**
+ * Server Log SSE Client (SSE 版本)
+ *
+ * 职责：
+ * 1. 通过 EventSource 连接后端 SSE 端点 (/dev/logs/server-logs/stream)
+ * 2. 实时接收服务端日志
+ * 3. 将接收到的日志通过 postMessage 转发给父窗口 (miaoda)
+ * 4. 管理连接状态并通知父窗口
+ * 5. 支持通过 postMessage 从父窗口控制 (pause/resume/stop)
+ *
+ * 优势：
+ * - 相比 HTTP 轮询，延迟更低（~10ms vs 0-2000ms）
+ * - 无需持续请求，减少网络压力
+ * - EventSource 自带自动重连机制
+ * - 支持暂停/恢复，可按需关闭
+ */
+export interface ServerLogSSEClientOptions {
+    /**
+     * 后端服务器 URL
+     * @example 'http://localhost:3000'
+     */
+    serverUrl: string;
+    /**
+     * SSE 端点路径
+     * @default '/dev/logs/server-logs/stream'
+     */
+    sseEndpoint?: string;
+    /**
+     * 是否启用调试日志
+     * @default false
+     */
+    debug?: boolean;
+}
+type ConnectionStatus = 'disconnected' | 'connecting' | 'connected' | 'error';
+export declare class ServerLogSSEClient {
+    private eventSource;
+    private status;
+    private isPaused;
+    private options;
+    private messageListener;
+    private reconnectCount;
+    constructor(options: ServerLogSSEClientOptions);
+    /**
+     * 启动 SSE 连接
+     */
+    start(): void;
+    /**
+     * 停止 SSE 连接
+     */
+    stop(): void;
+    /**
+     * 暂停接收日志（断开 SSE 连接）
+     */
+    pause(): void;
+    /**
+     * 恢复接收日志（重新建立 SSE 连接）
+     */
+    resume(): void;
+    /**
+     * 重新连接（用于断开后手动重连）
+     */
+    reconnect(): void;
+    /**
+     * 获取当前连接状态
+     */
+    getStatus(): ConnectionStatus;
+    /**
+     * 是否暂停中
+     */
+    getIsPaused(): boolean;
+    /**
+     * 设置 EventSource 连接
+     */
+    private setupEventSource;
+    /**
+     * 清理 EventSource
+     */
+    private cleanupEventSource;
+    /**
+     * 设置父窗口控制消息监听器
+     */
+    private setupParentMessageListener;
+    /**
+     * 清理消息监听器
+     */
+    private cleanupMessageListener;
+    /**
+     * 转发日志到父窗口
+     */
+    private forwardLog;
+    /**
+     * 更新连接状态并通知父窗口
+     */
+    private updateStatus;
+    /**
+     * 发送消息到父窗口
+     */
+    private postToParent;
+    /**
+     * 调试日志
+     */
+    private log;
+    /**
+     * 错误日志
+     */
+    private error;
+}
+export {};

package/lib/server-log/sse-client.js

@@ -0,0 +1,209 @@
+class ServerLogSSEClient {
+    eventSource = null;
+    status = 'disconnected';
+    isPaused = false;
+    options;
+    messageListener = null;
+    reconnectCount = 0;
+    constructor(options){
+        this.options = {
+            serverUrl: options.serverUrl,
+            sseEndpoint: (process.env.CLIENT_BASE_PATH || '') + (options.sseEndpoint || '/dev/logs/server-logs/stream'),
+            debug: options.debug ?? false
+        };
+    }
+    start() {
+        if (this.eventSource) return void this.log('SSE client already started');
+        this.log('Starting SSE client...', {
+            serverUrl: this.options.serverUrl,
+            sseEndpoint: this.options.sseEndpoint
+        });
+        this.updateStatus('connecting');
+        this.setupEventSource();
+        this.setupParentMessageListener();
+    }
+    stop() {
+        this.log('Stopping SSE client...');
+        this.cleanupEventSource();
+        this.cleanupMessageListener();
+        this.updateStatus('disconnected');
+    }
+    pause() {
+        if (this.isPaused) return;
+        this.isPaused = true;
+        this.cleanupEventSource();
+        this.log('Paused - SSE connection closed');
+    }
+    resume() {
+        if (!this.isPaused) return;
+        this.isPaused = false;
+        this.setupEventSource();
+        this.log('Resumed - SSE connection reopened');
+    }
+    reconnect() {
+        this.log('Reconnecting...');
+        this.cleanupEventSource();
+        this.isPaused = false;
+        this.setupEventSource();
+    }
+    getStatus() {
+        return this.status;
+    }
+    getIsPaused() {
+        return this.isPaused;
+    }
+    setupEventSource() {
+        this.reconnectCount = 0;
+        const url = `${this.options.serverUrl}${this.options.sseEndpoint}`;
+        this.log('Connecting to SSE endpoint:', url);
+        try {
+            this.eventSource = new EventSource(url);
+            this.eventSource.addEventListener('connected', (event)=>{
+                try {
+                    const data = JSON.parse(event.data);
+                    this.log('Connected to SSE server', data);
+                    this.updateStatus('connected');
+                } catch (e) {
+                    this.error('Failed to parse connected event', e);
+                }
+            });
+            this.eventSource.addEventListener('log', (event)=>{
+                if (this.isPaused) return;
+                try {
+                    const log = JSON.parse(event.data);
+                    this.forwardLog(log);
+                } catch (e) {
+                    this.error('Failed to parse log event', e);
+                }
+            });
+            this.eventSource.addEventListener('heartbeat', (event)=>{
+                try {
+                    const data = JSON.parse(event.data);
+                    this.log('Heartbeat received', data);
+                } catch (e) {}
+            });
+            this.eventSource.onmessage = (event)=>{
+                this.log('Received generic message:', event.data);
+            };
+            this.eventSource.onerror = (event)=>{
+                this.error('SSE connection error', event);
+                this.reconnectCount++;
+                if (this.reconnectCount > 1) {
+                    this.log('Max reconnect attempts reached, closing connection');
+                    this.cleanupEventSource();
+                    this.updateStatus('error');
+                    this.postToParent({
+                        type: 'SERVER_LOG_CONNECTION',
+                        status: 'error',
+                        error: 'SSE connection failed after retry'
+                    });
+                } else if (this.eventSource?.readyState === EventSource.CONNECTING) {
+                    this.log(`Reconnecting... attempt ${this.reconnectCount}`);
+                    this.updateStatus('connecting');
+                } else if (this.eventSource?.readyState === EventSource.CLOSED) {
+                    this.updateStatus('error');
+                    this.postToParent({
+                        type: 'SERVER_LOG_CONNECTION',
+                        status: 'error',
+                        error: 'SSE connection closed'
+                    });
+                }
+            };
+            this.eventSource.onopen = ()=>{
+                this.log('SSE connection opened');
+                this.reconnectCount = 0;
+            };
+        } catch (e) {
+            this.error('Failed to create EventSource', e);
+            this.updateStatus('error');
+            this.postToParent({
+                type: 'SERVER_LOG_CONNECTION',
+                status: 'error',
+                error: e instanceof Error ? e.message : String(e)
+            });
+        }
+    }
+    cleanupEventSource() {
+        if (this.eventSource) {
+            this.eventSource.close();
+            this.eventSource = null;
+        }
+    }
+    setupParentMessageListener() {
+        this.messageListener = (event)=>{
+            const data = event.data;
+            if (data?.type !== 'SERVER_LOG_CONTROL') return;
+            this.log('Received control message:', data);
+            switch(data.action){
+                case 'pause':
+                    this.pause();
+                    break;
+                case 'resume':
+                    this.resume();
+                    break;
+                case 'stop':
+                    this.stop();
+                    break;
+                case 'reconnect':
+                    this.reconnect();
+                    break;
+                default:
+                    this.log('Unknown control action:', data.action);
+            }
+        };
+        window.addEventListener('message', this.messageListener);
+    }
+    cleanupMessageListener() {
+        if (this.messageListener) {
+            window.removeEventListener('message', this.messageListener);
+            this.messageListener = null;
+        }
+    }
+    forwardLog(log) {
+        try {
+            this.log('Forwarding log to parent window', {
+                type: 'SERVER_LOG',
+                logId: log.id,
+                level: log.level,
+                tags: log.tags
+            });
+            this.postToParent({
+                type: 'SERVER_LOG',
+                payload: JSON.stringify(log)
+            });
+            this.log('Log forwarded successfully');
+        } catch (e) {
+            this.error('Failed to forward log', e);
+        }
+    }
+    updateStatus(status) {
+        const previousStatus = this.status;
+        this.status = status;
+        if (previousStatus !== status) {
+            this.log(`Status changed: ${previousStatus} → ${status}`);
+            this.postToParent({
+                type: 'SERVER_LOG_CONNECTION',
+                status
+            });
+        }
+    }
+    postToParent(message) {
+        if (window.parent === window) return;
+        try {
+            window.parent.postMessage(message, '*');
+        } catch (e) {
+            this.error('postMessage error', e);
+        }
+    }
+    log(message, data) {
+        const enableLog = 'true' === localStorage.getItem('debug_server_log_sse');
+        if (this.options.debug && enableLog) if (data) console.log(`[ServerLogSSEClient] ${message}`, data);
+        else console.log(`[ServerLogSSEClient] ${message}`);
+    }
+    error(message, error) {
+        const enableLog = 'true' === localStorage.getItem('debug_server_log_sse');
+        if (enableLog) if (error) console.error(`[ServerLogSSEClient] ${message}`, error);
+        else console.error(`[ServerLogSSEClient] ${message}`);
+    }
+}
+export { ServerLogSSEClient };

package/lib/server-log/types.d.ts

@@ -164,3 +164,12 @@ export type ServerLogPostMessage = {
 } | {
     type: 'SERVER_LOG_CLEARED';
 };
+/**
+ * PostMessage 控制类型（parent → iframe）
+ *
+ * 父窗口可以通过 postMessage 控制 iframe 内的 SSE 客户端
+ */
+export type ServerLogControlMessage = {
+    type: 'SERVER_LOG_CONTROL';
+    action: 'pause' | 'resume' | 'stop' | 'reconnect';
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/client-toolkit",
-  "version": "1.2.0-alpha.6",
+  "version": "1.2.0-alpha.7",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [
@@ -81,7 +81,7 @@
     "@ant-design/colors": "^7.2.1",
     "@ant-design/cssinjs": "^1.24.0",
     "@data-loom/js": "^0.4.3",
-    "@lark-apaas/client-capability": "0.0.1-alpha.3",
+    "@lark-apaas/client-capability": "^0.1.0",
     "@lark-apaas/miaoda-inspector": "^1.0.8",
     "@lark-apaas/observable-web": "^1.0.0",
     "@radix-ui/react-avatar": "^1.1.10",