admin/TaskPool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add sharedworker for task stauts

Browse Source
This commit is contained in:
duorameng
2026-05-07 20:12:30 +08:00
parent e5f9081a64
commit 4bf9ea8802
12 changed files with 542 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/composables/useEventBus.ts
+35
View File
@@ -0,0 +1,35 @@
import { onMounted, onUnmounted } from 'vue';
import { eventBus, type WSMessage } from '../utils/event-bus';
/**
* Vue Composable: 使用系统事件总线
*
* @param eventType 可选，指定监听的消息类型
* @param handler 消息处理回调
*/
export function useEventBus(eventType: string | string[] | null, handler: (payload: any, type: string) => void) {
let unsubscribe: (() => void) | null = null;
const handleMessage = (msg: WSMessage) => {
if (!eventType) {
// 监听所有消息
handler(msg.payload, msg.type);
return;
}
const types = Array.isArray(eventType) ? eventType : [eventType];
if (types.includes(msg.type)) {
handler(msg.payload, msg.type);
}
};
onMounted(() => {
// 确保驱动已初始化 (单例内部会处理多次调用)
eventBus.init();
unsubscribe = eventBus.subscribe(handleMessage);
});
onUnmounted(() => {
if (unsubscribe) unsubscribe();
});
}
web/src/utils/event-bus.ts
+129
View File
@@ -0,0 +1,129 @@
/**
* 系统事件总线驱动 (带 SharedWorker 降级逻辑)
*/
export interface WSMessage {
type: string;
timestamp: number;
payload: any;
}
export type MessageHandler = (msg: WSMessage) => void;
class EventBusDriver {
private wsUrl: string;
private handlers: Set<MessageHandler> = new Set();
private worker: SharedWorker | null = null;
private socket: WebSocket | null = null;
private reconnectTimer: any = null;
constructor() {
// 获取基础路径配置
const baseUrl = (window as any).__BASE_URL__ || '';
const apiVersion = (window as any).__API_VERSION__ || '/api/v1';
// 自动计算 WebSocket 地址
let host = window.location.host;
let protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
// 如果 BASE_URL 是绝对路径 (如 http://api.example.com)
if (baseUrl.startsWith('http')) {
const url = new URL(baseUrl);
host = url.host;
protocol = url.protocol === 'https:' ? 'wss:' : 'ws:';
}
// 拼接最终的 WS 地址
const path = baseUrl.startsWith('http') ? '' : baseUrl;
this.wsUrl = `${protocol}//${host}${path}${apiVersion}/ws/events`;
// 记录基础路径用于 worker 加载
this.workerPath = `${path}/workers/event-worker.js`.replace(/\/+/g, '/');
}
private workerPath: string;
private initialized = false;
/**
* 初始化连接
*/
init() {
if (this.initialized) return;
if (window.SharedWorker) {
this.initSharedWorker();
} else {
this.initStandardWebSocket();
}
this.initialized = true;
}
private initSharedWorker() {
try {
this.worker = new SharedWorker(this.workerPath);
this.worker.port.postMessage({
type: 'init',
data: { url: this.wsUrl }
});
this.worker.port.onmessage = (e) => {
this.emit(e.data);
};
this.worker.port.start();
console.log('[EventBus] SharedWorker initialized');
} catch (e) {
console.error('[EventBus] SharedWorker failed, falling back', e);
this.initStandardWebSocket();
}
}
private initStandardWebSocket() {
if (this.socket) return;
this.socket = new WebSocket(this.wsUrl);
this.socket.onmessage = (e) => {
try {
const data = JSON.parse(e.data);
this.emit(data);
} catch (err) {
console.error('[EventBus] Parse message error', err);
}
};
this.socket.onclose = () => {
this.socket = null;
this.reconnect();
};
this.socket.onerror = () => {
this.socket = null;
this.reconnect();
};
console.log('[EventBus] Standard WebSocket initialized (Fallback)');
}
private reconnect() {
if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
this.reconnectTimer = setTimeout(() => this.init(), 5000);
}
private emit(msg: WSMessage) {
if (!msg || !msg.type) return;
this.handlers.forEach(handler => handler(msg));
}
/**
* 订阅消息
*/
subscribe(handler: MessageHandler) {
this.handlers.add(handler);
return () => this.handlers.delete(handler);
}
}
// 导出单例
export const eventBus = new EventBusDriver();
web/src/views/tasks/Tasks.vue
+15 -1
View File
@@ -24,6 +24,7 @@ import { Label } from '@/components/ui/label'
import { api, type Agent, type Task, type TaskLog } from '@/api'
import { toast } from 'vue-sonner'
import { useSiteSettings } from '@/composables/useSiteSettings'
import { useEventBus } from '@/composables/useEventBus'
import { useRouter, useRoute } from 'vue-router'
import { TASK_TYPE, AGENT_STATUS, TRIGGER_TYPE, TASK_STATUS } from '@/constants'
import TextOverflow from '@/components/TextOverflow.vue'
@@ -275,7 +276,9 @@ function cleanupLogSocket() {
logSocket.onmessage = null
logSocket.onerror = null
logSocket.onclose = null
logSocket.close()
if (logSocket.readyState === WebSocket.CONNECTING || logSocket.readyState === WebSocket.OPEN) {
logSocket.close()
}
logSocket = null
}
}
@@ -472,6 +475,14 @@ onMounted(async () => {
loadViewsFromSettings()
})
// 订阅任务状态实时更新
useEventBus(['task_running', 'task_queued', 'task_success', 'task_failed', 'task_timeout'], (payload) => {
const task = tasks.value.find(t => t.id === payload.task_id)
if (task) {
task.running_status = payload.status
}
})
// 监听路由参数变化
watch(() => route.query.agent_id, (newVal: any) => {
filterAgentId.value = newVal ? String(newVal) : null
@@ -624,6 +635,7 @@ watch(() => route.query.agent_id, (newVal: any) => {
<div v-for="(task, index) in tasks" :key="`large-${task.id}`"
class="flex items-center gap-2 px-4 py-1.5 hover:bg-muted/30 transition-colors">
<div v-if="task.running_status === 'running'" class="h-2 w-2 rounded-full bg-amber-500 animate-pulse shadow-[0_0_8px_rgba(245,158,11,0.5)] shrink-0" title="运行中" />
<div v-else-if="task.running_status === 'queued' || task.running_status === 'pending'" class="h-2 w-2 rounded-full bg-blue-400 animate-pulse shrink-0" title="排队中" />
<div v-else class="h-1.5 w-1.5 rounded-full bg-muted-foreground/20 shrink-0" />
<div class="w-12 shrink-0 text-muted-foreground tabular-nums">#{{ total - (currentPage - 1) * pageSize - index }}</div>
<span class="w-8 shrink-0 flex justify-center" :title="getTaskTypeTitle(task.type || 'task')">
@@ -720,6 +732,7 @@ watch(() => route.query.agent_id, (newVal: any) => {
<div v-for="(task, index) in tasks" :key="`medium-${task.id}`"
class="flex items-center gap-2 px-4 py-2.5 hover:bg-muted/30 transition-colors">
<div v-if="task.running_status === 'running'" class="h-1.5 w-1.5 rounded-full bg-amber-500 animate-pulse shadow-[0_0_8px_rgba(245,158,11,0.5)] shrink-0" />
<div v-else-if="task.running_status === 'queued' || task.running_status === 'pending'" class="h-1.5 w-1.5 rounded-full bg-blue-400 animate-pulse shrink-0" />
<div v-else class="h-1 w-1 rounded-full bg-muted-foreground/20 shrink-0" />
<div class="w-12 shrink-0 text-muted-foreground tabular-nums text-xs">#{{ total - (currentPage - 1) * pageSize - index }}</div>
<div class="w-48 shrink-0 flex items-center gap-2 overflow-hidden">
@@ -789,6 +802,7 @@ watch(() => route.query.agent_id, (newVal: any) => {
<div class="flex items-start justify-between mb-3 border-b border-border/40 pb-2">
<div class="flex items-center gap-2 flex-1 min-w-0 pr-2">
<div v-if="task.running_status === 'running'" class="h-1.5 w-1.5 rounded-full bg-amber-500 animate-pulse shadow-[0_0_8px_rgba(245,158,11,0.5)] shrink-0" />
<div v-else-if="task.running_status === 'queued' || task.running_status === 'pending'" class="h-1.5 w-1.5 rounded-full bg-blue-400 animate-pulse shrink-0" />
<div v-else class="h-1 w-1 rounded-full bg-muted-foreground/20 shrink-0" />
<span class="text-xs text-muted-foreground tabular-nums flex-shrink-0">#{{ total - (currentPage - 1) * pageSize - index }}</span>
<span class="shrink-0">