feat: 添加ComfyUI服务器管理功能,重构相关代码以支持动态注册和状态监控,增强系统的可扩展性和可维护性

This commit is contained in:
iHeyTang
2025-08-14 15:52:20 +08:00
parent 9c72bffd21
commit a475a87165
10 changed files with 1019 additions and 168 deletions

View File

@@ -2,12 +2,39 @@ import { app } from "../../scripts/app.js";
import { api } from "../../scripts/api.js";
// 本地存储的 key
const SETTINGS_STORAGE_KEY = "comfyui_publisher_settings";
const COMFY_SERVER_REGISTRATION_KEY = "comfyui_server_registration";
// ComfyUI服务器注册配置
const DEFAULT_SERVER_CONFIG = {
name: "comfyui_node_1",
http_url: "http://127.0.0.1:8188",
workflow_service_host: "http://localhost:8000",
};
// 获取ComfyUI服务器注册配置
function getComfyServerConfig() {
try {
const stored = localStorage.getItem(COMFY_SERVER_REGISTRATION_KEY);
return stored ? JSON.parse(stored) : { ...DEFAULT_SERVER_CONFIG };
} catch (error) {
console.error("读取ComfyUI服务器配置失败:", error);
return { ...DEFAULT_SERVER_CONFIG };
}
}
// 保存ComfyUI服务器注册配置
function saveComfyServerConfig(config) {
try {
localStorage.setItem(COMFY_SERVER_REGISTRATION_KEY, JSON.stringify(config));
} catch (error) {
console.error("保存ComfyUI服务器配置失败:", error);
}
}
// 获取本地设置
function getLocalSettings() {
try {
const stored = localStorage.getItem(SETTINGS_STORAGE_KEY);
const stored = localStorage.getItem("workflow_publisher_settings");
return stored ? JSON.parse(stored) : { host: "" };
} catch (error) {
console.error("读取本地设置失败:", error);
@@ -15,32 +42,247 @@ function getLocalSettings() {
}
}
// 保存设置到本地
// 保存本地设置
function saveLocalSettings(settings) {
try {
localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(settings));
localStorage.setItem(
"workflow_publisher_settings",
JSON.stringify(settings)
);
} catch (error) {
console.error("保存本地设置失败:", error);
}
}
// 自定义 fetchApi 函数,使用本地存储的 host
// ComfyUI服务器注册管理器
class ComfyServerManager {
constructor() {
this.registrationInterval = null;
this.heartbeatInterval = null;
this.isRegistered = false;
this.serverConfig = getComfyServerConfig();
}
// 注册服务器到工作流服务
async registerServer() {
if (!this.serverConfig.workflow_service_host) {
console.warn("未设置工作流服务地址,无法注册");
return false;
}
try {
const response = await fetch(
`${this.serverConfig.workflow_service_host}/api/comfy/register`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name: this.serverConfig.name,
http_url: this.serverConfig.http_url,
ws_url: this.getWebSocketUrl(),
}),
}
);
if (response.ok) {
const result = await response.json();
console.log("ComfyUI服务器注册成功:", result);
this.isRegistered = true;
this.startHeartbeat();
return true;
} else {
const errorText = await response.text();
console.error("ComfyUI服务器注册失败:", response.status, errorText);
return false;
}
} catch (error) {
console.error("注册ComfyUI服务器时发生错误:", error);
return false;
}
}
// 注销服务器
async unregisterServer() {
if (!this.serverConfig.workflow_service_host || !this.isRegistered) {
return false;
}
try {
const response = await fetch(
`${this.serverConfig.workflow_service_host}/api/comfy/unregister`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ name: this.serverConfig.name }),
}
);
if (response.ok) {
console.log("ComfyUI服务器注销成功");
this.isRegistered = false;
this.stopHeartbeat();
return true;
} else {
console.error("ComfyUI服务器注销失败:", response.status);
return false;
}
} catch (error) {
console.error("注销ComfyUI服务器时发生错误:", error);
return false;
}
}
// 发送心跳
async sendHeartbeat() {
if (!this.serverConfig.workflow_service_host || !this.isRegistered) {
return false;
}
try {
const response = await fetch(
`${this.serverConfig.workflow_service_host}/api/comfy/heartbeat`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ name: this.serverConfig.name }),
}
);
if (response.ok) {
console.debug("心跳发送成功");
return true;
} else {
console.warn("心跳发送失败:", response.status);
// 如果心跳失败,尝试重新注册
if (response.status === 404) {
console.log("服务器不存在,尝试重新注册...");
this.isRegistered = false;
await this.registerServer();
}
return false;
}
} catch (error) {
console.error("发送心跳时发生错误:", error);
// 如果网络错误,尝试重新注册
this.isRegistered = false;
await this.registerServer();
return false;
}
}
// 启动心跳
startHeartbeat() {
if (this.heartbeatInterval) {
clearInterval(this.heartbeatInterval);
}
// 每30秒发送一次心跳
this.heartbeatInterval = setInterval(() => {
this.sendHeartbeat();
}, 30000);
console.log("ComfyUI服务器心跳已启动");
}
// 停止心跳
stopHeartbeat() {
if (this.heartbeatInterval) {
clearInterval(this.heartbeatInterval);
this.heartbeatInterval = null;
}
console.log("ComfyUI服务器心跳已停止");
}
// 更新服务器配置
updateConfig(newConfig) {
this.serverConfig = { ...this.serverConfig, ...newConfig };
saveComfyServerConfig(this.serverConfig);
// 如果已注册,需要重新注册以更新配置
if (this.isRegistered) {
this.unregisterServer().then(() => {
setTimeout(() => this.registerServer(), 1000);
});
}
}
// 设置工作流服务地址
setWorkflowServiceHost(host) {
this.serverConfig.workflow_service_host = host;
saveComfyServerConfig(this.serverConfig);
}
// 获取WebSocket URL自动从HTTP URL生成
getWebSocketUrl() {
if (!this.serverConfig.http_url) return "";
const url = new URL(this.serverConfig.http_url);
// 根据协议自动选择ws或wss
const protocol = url.protocol === "https:" ? "wss:" : "ws:";
return `${protocol}//${url.host}/ws`;
}
// 获取服务器状态
async getServerStatus() {
if (!this.serverConfig.workflow_service_host) {
return null;
}
try {
const response = await fetch(
`${this.serverConfig.workflow_service_host}/api/comfy/status/${this.serverConfig.name}`
);
if (response.ok) {
return await response.json();
}
} catch (error) {
console.error("获取服务器状态失败:", error);
}
return null;
}
// 获取系统健康状态
async getSystemHealth() {
if (!this.serverConfig.workflow_service_host) {
return null;
}
try {
const response = await fetch(
`${this.serverConfig.workflow_service_host}/api/comfy/health`
);
if (response.ok) {
return await response.json();
}
} catch (error) {
console.error("获取系统健康状态失败:", error);
}
return null;
}
}
// 自定义 fetchApi 函数使用ComfyUI服务器配置中的工作流服务地址
async function customFetchApi(endpoint, options = {}) {
try {
// 从本地存储获取设置
const settings = getLocalSettings();
// 从ComfyUI服务器配置获取工作流服务地址
const serverConfig = getComfyServerConfig();
// 如果没有配置 host,回退到默认的 api.fetchApi
if (!settings.host) {
console.warn("未配置 host,使用默认的 ComfyUI API");
// 如果没有配置工作流服务地址,回退到默认的 api.fetchApi
if (!serverConfig.workflow_service_host) {
console.warn("未配置工作流服务地址,使用默认的 ComfyUI API");
return await api.fetchApi(endpoint, options);
}
// 构建完整的 URL
const host = settings.host.replace(/\/$/, ""); // 移除末尾的斜杠
const host = serverConfig.workflow_service_host.replace(/\/$/, ""); // 移除末尾的斜杠
const fullUrl = `${host}${endpoint}`;
console.log(`使用本地存储的 host 请求: ${fullUrl}`);
console.log(`使用工作流服务地址请求: ${fullUrl}`);
// 使用 fetch 发送请求
const response = await fetch(fullUrl, {
@@ -186,22 +428,18 @@ app.registerExtension({
const btnPublish = createButton(iconPublish, "发布当前工作流", {
onClick: () => showPublishDialog(),
});
const btnSettings = createButton(`⚙️`, "发布设置", {
onClick: () => showSettingsDialog(),
const btnComfyServer = createButton(`🖥️`, "ComfyUI服务器管理", {
onClick: () => showComfyServerDialog(),
});
const separator = document.createElement("div");
separator.style.cssText =
"border-left: 1px solid var(--border-color); height: 22px; margin: 0 4px;";
container.append(btnGet, btnPublish, btnSettings, separator);
container.append(btnGet, btnPublish, btnComfyServer, separator);
menu.insertBefore(container, menu.firstChild);
});
const settingsDialog = new Modal(
"workflow-publisher-settings-dialog",
"发布设置"
);
const publishDialog = new Modal(
"workflow-publisher-publish-dialog",
"发布工作流"
@@ -213,6 +451,12 @@ app.registerExtension({
true
);
const comfyServerDialog = new Modal(
"comfy-server-dialog",
"ComfyUI服务器管理",
true
);
async function showWorkflowListDialog() {
workflowListDialog.setContent(
'<p style="text-align:center;">正在从服务器加载工作流...</p>'
@@ -318,76 +562,8 @@ app.registerExtension({
}
}
async function showSettingsDialog() {
try {
// 首先尝试从本地存储获取设置
const settings = getLocalSettings();
settingsDialog.setContent(`
<label for="publisher-host" style="display: block; margin-bottom: 5px;">Host:</label>
<input id="publisher-host" type="text" value="${settings.host}" placeholder="例如: http://localhost:8000" style="width: 100%; box-sizing: border-box; background: var(--comfy-input-bg); color: var(--fg-color); border: 1px solid var(--border-color); padding: 5px; border-radius: 4px; margin-bottom: 10px;">
`);
settingsDialog.addButtons([
{ label: "取消", callback: () => settingsDialog.hide() },
{ label: "保存", callback: saveSettings },
]);
settingsDialog.show();
} catch (error) {
console.error("加载设置失败:", error);
alert(`加载设置失败: ${error.message}`);
}
}
async function saveSettings() {
const host = document.getElementById("publisher-host").value;
// 构建新的设置对象
const newSettings = { host: host };
try {
// 保存到本地存储
saveLocalSettings(newSettings);
alert("设置已保存到本地!");
settingsDialog.hide();
} catch (error) {
alert(`保存设置失败: ${error}`);
}
}
async function showPublishDialog() {
try {
// 从本地存储获取设置
let settings = getLocalSettings();
// 如果本地没有设置,尝试从服务器获取
if (!settings.host) {
try {
const settingsResp = await customFetchApi("/publisher/settings", {
cache: "no-store",
});
if (settingsResp.ok) {
const text = await settingsResp.text();
try {
const serverSettings = text ? JSON.parse(text) : {};
settings = { ...settings, ...serverSettings };
// 保存到本地存储
saveLocalSettings(settings);
} catch (parseError) {
console.error("JSON解析失败:", parseError, "原始响应:", text);
}
}
} catch (error) {
console.error("从服务器获取设置失败:", error);
}
}
// 确保设置对象有必需的字段
settings = {
host: settings.host || "",
...settings,
};
publishDialog.setContent(
`<label for="publisher-workflow-name" style="display: block; margin-bottom: 5px;">工作流基础名称:</label><input id="publisher-workflow-name" type="text" placeholder="例如: SDXL高级出图" style="width: 100%; box-sizing: border-box; background: var(--comfy-input-bg); color: var(--fg-color); border: 1px solid var(--border-color); padding: 5px; border-radius: 4px;"><p id="publisher-status" style="margin-top: 10px; color: var(--success-color); min-height: 1.2em;"></p>`
);
@@ -397,8 +573,176 @@ app.registerExtension({
]);
publishDialog.show();
} catch (error) {
console.error("加载设置失败:", error);
alert(`加载设置失败: ${error.message}`);
console.error("显示发布对话框失败:", error);
alert(`显示对话框失败: ${error.message}`);
}
}
// ComfyUI 服务器管理对话框
async function showComfyServerDialog() {
try {
const serverConfig = getComfyServerConfig();
const settings = getLocalSettings();
// 创建服务器配置表单
const configForm = `
<div style="display: flex; flex-direction: column; gap: 15px;">
<div>
<label for="server-name" style="display: block; margin-bottom: 5px;">当前服务节点名称:</label>
<input id="server-name" type="text" value="${serverConfig.name}" placeholder="例如: comfyui_node_1" style="width: 100%; box-sizing: border-box; background: var(--comfy-input-bg); color: var(--fg-color); border: 1px solid var(--border-color); padding: 8px; border-radius: 4px;">
</div>
<div>
<label for="server-http-url" style="display: block; margin-bottom: 5px;">当前服务节点地址:</label>
<input id="server-http-url" type="text" value="${serverConfig.http_url}" placeholder="例如: http://127.0.0.1:8188" style="width: 100%; box-sizing: border-box; background: var(--comfy-input-bg); color: var(--fg-color); border: 1px solid var(--border-color); padding: 8px; border-radius: 4px;">
<small style="color: var(--border-color); font-size: 0.9em;">WebSocket地址将自动生成为: <span id="ws-url-preview">${serverConfig.http_url ? serverConfig.http_url.replace(/^https?:\/\//, 'ws://') + '/ws' : ''}</span></small>
</div>
<div>
<label for="workflow-service-host" style="display: block; margin-bottom: 5px;">工作流服务地址 (统一管理地址):</label>
<input id="workflow-service-host" type="text" value="${settings.host}" placeholder="例如: http://localhost:8000" style="width: 100%; box-sizing: border-box; background: var(--comfy-input-bg); color: var(--fg-color); border: 1px solid var(--border-color); padding: 8px; border-radius: 4px;">
</div>
<div id="server-status" style="padding: 10px; border-radius: 4px; background: var(--comfy-input-bg); border: 1px solid var(--border-color);">
<strong>服务器状态:</strong> <span id="status-text">未连接</span>
</div>
<div id="server-actions" style="display: flex; gap: 10px; flex-wrap: wrap;">
<button id="btn-register" class="jags-button" style="flex: 1; min-width: 120px;">注册服务器</button>
<button id="btn-unregister" class="jags-button" style="flex: 1; min-width: 120px;">注销服务器</button>
<button id="btn-refresh-status" class="jags-button" style="flex: 1; min-width: 120px;">刷新状态</button>
</div>
</div>
`;
comfyServerDialog.setContent(configForm);
comfyServerDialog.addButtons([
{ label: "关闭", callback: () => comfyServerDialog.hide() },
]);
comfyServerDialog.show();
// 初始化 ComfyServerManager
const serverManager = new ComfyServerManager();
if (settings.host) {
serverManager.setWorkflowServiceHost(settings.host);
}
// 绑定事件
const btnRegister = document.getElementById("btn-register");
const btnUnregister = document.getElementById("btn-unregister");
const btnRefreshStatus = document.getElementById("btn-refresh-status");
const statusText = document.getElementById("status-text");
// 添加HTTP地址输入框的实时预览功能
const httpUrlInput = document.getElementById("server-http-url");
const wsUrlPreview = document.getElementById("ws-url-preview");
httpUrlInput.addEventListener("input", function() {
const httpUrl = this.value;
if (httpUrl) {
try {
const url = new URL(httpUrl);
// 根据协议自动选择ws或wss
const protocol = url.protocol === "https:" ? "wss:" : "ws:";
const wsUrl = `${protocol}//${url.host}/ws`;
wsUrlPreview.textContent = wsUrl;
} catch (error) {
wsUrlPreview.textContent = "无效的URL格式";
}
} else {
wsUrlPreview.textContent = "";
}
});
// 注册服务器
btnRegister.onclick = async () => {
const newConfig = {
name: document.getElementById("server-name").value,
http_url: document.getElementById("server-http-url").value,
};
const workflowHost = document.getElementById(
"workflow-service-host"
).value;
if (workflowHost) {
serverManager.setWorkflowServiceHost(workflowHost);
// 保存到本地设置
saveLocalSettings({ host: workflowHost });
}
serverManager.updateConfig(newConfig);
btnRegister.disabled = true;
btnRegister.textContent = "注册中...";
const success = await serverManager.registerServer();
if (success) {
statusText.textContent = "已注册";
statusText.style.color = "var(--success-color)";
btnRegister.textContent = "已注册";
btnRegister.disabled = true;
btnUnregister.disabled = false;
} else {
statusText.textContent = "注册失败";
statusText.style.color = "var(--error-color)";
btnRegister.textContent = "注册服务器";
btnRegister.disabled = false;
}
};
// 注销服务器
btnUnregister.onclick = async () => {
btnUnregister.disabled = true;
btnUnregister.textContent = "注销中...";
const success = await serverManager.unregisterServer();
if (success) {
statusText.textContent = "已注销";
statusText.style.color = "orange";
btnRegister.disabled = false;
btnRegister.textContent = "注册服务器";
btnUnregister.disabled = true;
btnUnregister.textContent = "注销服务器";
} else {
statusText.textContent = "注销失败";
statusText.style.color = "var(--error-color)";
btnUnregister.disabled = false;
btnUnregister.textContent = "注销服务器";
}
};
// 刷新状态
btnRefreshStatus.onclick = async () => {
if (settings.host) {
serverManager.setWorkflowServiceHost(settings.host);
const status = await serverManager.getServerStatus();
if (status) {
statusText.textContent = `在线 - 最后心跳: ${new Date(
status.last_heartbeat
).toLocaleString()}`;
statusText.style.color = "var(--success-color)";
btnRegister.disabled = true;
btnRegister.textContent = "已注册";
btnUnregister.disabled = false;
} else {
statusText.textContent = "未注册";
statusText.style.color = "orange";
btnRegister.disabled = false;
btnRegister.textContent = "注册服务器";
btnUnregister.disabled = true;
}
}
};
// 初始状态检查
if (settings.host) {
btnRefreshStatus.click();
}
} catch (error) {
console.error("显示ComfyUI服务器管理对话框失败:", error);
alert(`显示对话框失败: ${error.message}`);
}
}
},