comi-logic/ComfyUI-WorkflowPublisher
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 添加ComfyUI服务器动态IP和端口检测功能，优化服务器注册和状态同步逻辑，增强系统的灵活性和可靠性

Browse Source
This commit is contained in:
iHeyTang
2025-08-18 13:36:34 +08:00
parent 8e818887d5
commit 7484e300ec
3 changed files with 506 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

323
js/publisher.js
View File

@@ -1,16 +1,91 @@
import { app } from "../../scripts/app.js";
import { api } from "../../scripts/api.js";
// 检测ComfyUI服务端口的函数
async function detectComfyUIPort(host) {
try {
const currentPort = window.location.port;
if (currentPort) {
console.log(`从当前页面URL获取端口: ${currentPort}`);
return parseInt(currentPort);
}
} catch (error) {
console.warn("无法从当前页面获取端口:", error);
}
// 默认返回8188
console.warn("无法检测到ComfyUI端口，使用默认端口8188");
return 8188;
}
// 获取本地IP地址的函数
async function getLocalIPAddress() {
try {
// 尝试通过WebRTC获取本地IP地址
const pc = new RTCPeerConnection({
iceServers: [],
});
pc.createDataChannel("");
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
return new Promise((resolve) => {
pc.onicecandidate = (event) => {
if (event.candidate) {
const ipMatch = event.candidate.candidate.match(
/([0-9]{1,3}(\.[0-9]{1,3}){3})/
);
if (ipMatch) {
const localIP = ipMatch[1];
// 保留有效的内网IP地址
if (
localIP.startsWith("192.168.") ||
localIP.startsWith("10.") ||
localIP.startsWith("172.") ||
localIP === "127.0.0.1"
) {
pc.close();
resolve(localIP);
}
}
}
};
// 超时处理
setTimeout(() => {
pc.close();
resolve("127.0.0.1"); // 如果获取失败，使用默认地址
}, 3000);
});
} catch (error) {
console.warn("无法获取本地IP地址，使用默认地址:", error);
return "127.0.0.1";
}
}
// 本地存储的 key
const COMFY_SERVER_REGISTRATION_KEY = "comfyui_server_registration";
// ComfyUI服务器注册配置
const DEFAULT_SERVER_CONFIG = {
// ComfyUI服务器注册配置 - 使用动态IP地址
let DEFAULT_SERVER_CONFIG = {
name: "comfyui_node_1",
http_url: "http://127.0.0.1:8188",
http_url: "http://127.0.0.1:8188", // 将在初始化时更新为实际IP
workflow_service_host: "http://localhost:8000",
};
// 初始化默认配置
async function initializeDefaultConfig() {
try {
const localIP = await getLocalIPAddress();
const port = await detectComfyUIPort(localIP);
DEFAULT_SERVER_CONFIG.http_url = `http://${localIP}:${port}`;
console.log("自动获取本地IP地址和端口:", localIP, port);
} catch (error) {
console.warn("初始化IP地址和端口失败，使用默认地址:", error);
}
}
// 获取ComfyUI服务器注册配置
function getComfyServerConfig() {
try {
@@ -66,8 +141,7 @@ class ComfyServerManager {
// 注册服务器到工作流服务
async registerServer() {
if (!this.serverConfig.workflow_service_host) {
console.warn("未设置工作流服务地址，无法注册");
return false;
return { success: false, error: "未设置工作流服务地址" };
}
try {
@@ -91,22 +165,26 @@ class ComfyServerManager {
console.log("ComfyUI服务器注册成功:", result);
this.isRegistered = true;
this.startHeartbeat();
return true;
return { success: true };
} else {
const errorText = await response.text();
console.error("ComfyUI服务器注册失败:", response.status, errorText);
return false;
const errorMessage = `HTTP ${response.status}: ${
errorText || "服务器响应错误"
}`;
console.error("ComfyUI服务器注册失败:", errorMessage);
return { success: false, error: errorMessage };
}
} catch (error) {
console.error("注册ComfyUI服务器时发生错误:", error);
return false;
const errorMessage = `网络错误: ${error.message}`;
console.error("注册ComfyUI服务器时发生错误:", errorMessage);
return { success: false, error: errorMessage };
}
}
// 注销服务器
async unregisterServer() {
if (!this.serverConfig.workflow_service_host || !this.isRegistered) {
return false;
return { success: false, error: "未设置工作流服务地址或服务器未注册" };
}
try {
@@ -125,14 +203,19 @@ class ComfyServerManager {
console.log("ComfyUI服务器注销成功");
this.isRegistered = false;
this.stopHeartbeat();
return true;
return { success: true };
} else {
console.error("ComfyUI服务器注销失败:", response.status);
return false;
const errorText = await response.text();
const errorMessage = `HTTP ${response.status}: ${
errorText || "服务器响应错误"
}`;
console.error("ComfyUI服务器注销失败:", errorMessage);
return { success: false, error: errorMessage };
}
} catch (error) {
console.error("注销ComfyUI服务器时发生错误:", error);
return false;
const errorMessage = `网络错误: ${error.message}`;
console.error("注销ComfyUI服务器时发生错误:", errorMessage);
return { success: false, error: errorMessage };
}
}
@@ -206,8 +289,12 @@ class ComfyServerManager {
// 如果已注册，需要重新注册以更新配置
if (this.isRegistered) {
this.unregisterServer().then(() => {
setTimeout(() => this.registerServer(), 1000);
this.unregisterServer().then((result) => {
if (result.success) {
setTimeout(() => this.registerServer(), 1000);
} else {
console.warn("更新配置时注销失败:", result.error);
}
});
}
}
@@ -264,6 +351,46 @@ class ComfyServerManager {
}
return null;
}
// 动态更新IP地址和端口
async updateLocalIPAddress() {
try {
const localIP = await getLocalIPAddress();
const port = await detectComfyUIPort(localIP);
const newHttpUrl = `http://${localIP}:${port}`;
if (this.serverConfig.http_url !== newHttpUrl) {
this.serverConfig.http_url = newHttpUrl;
saveComfyServerConfig(this.serverConfig);
console.log("已更新本地IP地址和端口:", localIP, port);
return { ip: localIP, port: port };
}
return null;
} catch (error) {
console.warn("更新IP地址和端口失败:", error);
return null;
}
}
// 同步注册状态
syncRegistrationStatus() {
if (this.serverConfig.workflow_service_host) {
this.getServerStatus()
.then((status) => {
if (status) {
this.isRegistered = true;
console.log("同步注册状态: 已注册");
} else {
this.isRegistered = false;
console.log("同步注册状态: 未注册");
}
})
.catch((error) => {
console.warn("同步注册状态失败:", error);
this.isRegistered = false;
});
}
}
}
// 自定义 fetchApi 函数，使用ComfyUI服务器配置中的工作流服务地址
@@ -375,6 +502,9 @@ const createButton = (innerHTML, title, { onClick }) => {
app.registerExtension({
name: "Comfy.WorkflowPublisher",
async setup() {
// 初始化默认配置，获取本地IP地址
await initializeDefaultConfig();
const addCustomStyles = () => {
const styleId = "jags-publisher-styles";
if (document.getElementById(styleId)) return;
@@ -589,20 +719,31 @@ app.registerExtension({
<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;">
<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>
<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;">
<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);">
@@ -613,6 +754,7 @@ app.registerExtension({
<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>
<button id="btn-refresh-ip" class="jags-button" style="flex: 1; min-width: 120px;">刷新IP和端口</button>
</div>
</div>
`;
@@ -627,19 +769,22 @@ app.registerExtension({
const serverManager = new ComfyServerManager();
if (settings.host) {
serverManager.setWorkflowServiceHost(settings.host);
// 同步注册状态
serverManager.syncRegistrationStatus();
}
// 绑定事件
const btnRegister = document.getElementById("btn-register");
const btnUnregister = document.getElementById("btn-unregister");
const btnRefreshStatus = document.getElementById("btn-refresh-status");
const btnRefreshIP = document.getElementById("btn-refresh-ip");
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() {
httpUrlInput.addEventListener("input", function () {
const httpUrl = this.value;
if (httpUrl) {
try {
@@ -677,15 +822,16 @@ app.registerExtension({
btnRegister.disabled = true;
btnRegister.textContent = "注册中...";
const success = await serverManager.registerServer();
if (success) {
const result = await serverManager.registerServer();
if (result.success) {
statusText.textContent = "已注册";
statusText.style.color = "var(--success-color)";
btnRegister.textContent = "已注册";
btnRegister.disabled = true;
btnUnregister.disabled = false;
} else {
statusText.textContent = "注册失败";
const errorMessage = result.error || "未知错误";
statusText.textContent = `注册失败: ${errorMessage}`;
statusText.style.color = "var(--error-color)";
btnRegister.textContent = "注册服务器";
btnRegister.disabled = false;
@@ -697,8 +843,8 @@ app.registerExtension({
btnUnregister.disabled = true;
btnUnregister.textContent = "注销中...";
const success = await serverManager.unregisterServer();
if (success) {
const result = await serverManager.unregisterServer();
if (result.success) {
statusText.textContent = "已注销";
statusText.style.color = "orange";
btnRegister.disabled = false;
@@ -706,7 +852,8 @@ app.registerExtension({
btnUnregister.disabled = true;
btnUnregister.textContent = "注销服务器";
} else {
statusText.textContent = "注销失败";
const errorMessage = result.error || "未知错误";
statusText.textContent = `注销失败: ${errorMessage}`;
statusText.style.color = "var(--error-color)";
btnUnregister.disabled = false;
btnUnregister.textContent = "注销服务器";
@@ -718,17 +865,56 @@ app.registerExtension({
if (settings.host) {
serverManager.setWorkflowServiceHost(settings.host);
const status = await serverManager.getServerStatus();
// 调试信息
console.log("服务器状态:", status);
if (status && status.last_heartbeat) {
console.log("最后心跳时间原始值:", status.last_heartbeat);
console.log("时间类型:", typeof status.last_heartbeat);
}
if (status) {
statusText.textContent = `在线 - 最后心跳: ${new Date(
status.last_heartbeat
).toLocaleString()}`;
// 安全地处理时间显示
let heartbeatTime = "未知";
if (status.last_heartbeat) {
try {
// 尝试解析ISO格式的时间字符串
const date = new Date(status.last_heartbeat);
if (!isNaN(date.getTime())) {
heartbeatTime = date.toLocaleString("zh-CN", {
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
});
} else {
heartbeatTime = "时间格式错误";
}
} catch (error) {
console.warn(
"时间解析失败:",
error,
"原始时间:",
status.last_heartbeat
);
heartbeatTime = "时间解析失败";
}
}
statusText.textContent = `在线 - 最后心跳: ${heartbeatTime}`;
statusText.style.color = "var(--success-color)";
// 同步更新本地注册状态
serverManager.isRegistered = true;
btnRegister.disabled = true;
btnRegister.textContent = "已注册";
btnUnregister.disabled = false;
} else {
statusText.textContent = "未注册";
statusText.style.color = "orange";
// 同步更新本地注册状态
serverManager.isRegistered = false;
btnRegister.disabled = false;
btnRegister.textContent = "注册服务器";
btnUnregister.disabled = true;
@@ -736,10 +922,81 @@ app.registerExtension({
}
};
// 刷新IP地址和端口
btnRefreshIP.onclick = async () => {
btnRefreshIP.disabled = true;
btnRefreshIP.textContent = "刷新中...";
try {
const result = await serverManager.updateLocalIPAddress();
if (result) {
// 更新输入框显示
document.getElementById(
"server-http-url"
).value = `http://${result.ip}:${result.port}`;
// 更新WebSocket预览
const wsUrlPreview = document.getElementById("ws-url-preview");
wsUrlPreview.textContent = `ws://${result.ip}:${result.port}/ws`;
statusText.textContent = `IP地址和端口已更新为: ${result.ip}:${result.port}`;
statusText.style.color = "var(--success-color)";
} else {
statusText.textContent = "IP地址和端口无需更新";
statusText.style.color = "orange";
}
} catch (error) {
statusText.textContent = `IP地址和端口更新失败: ${error.message}`;
statusText.style.color = "var(--error-color)";
} finally {
btnRefreshIP.disabled = false;
btnRefreshIP.textContent = "刷新IP和端口";
}
};
// 初始状态检查
if (settings.host) {
btnRefreshStatus.click();
} else {
// 如果没有设置工作流服务地址，确保按钮状态正确
btnRegister.disabled = false;
btnUnregister.disabled = true;
}
// 自动刷新IP地址和端口
setTimeout(async () => {
try {
const result = await serverManager.updateLocalIPAddress();
if (result) {
// 更新输入框显示
document.getElementById(
"server-http-url"
).value = `http://${result.ip}:${result.port}`;
// 更新WebSocket预览
const wsUrlPreview = document.getElementById("ws-url-preview");
wsUrlPreview.textContent = `ws://${result.ip}:${result.port}/ws`;
console.log(
"对话框显示时自动更新IP地址和端口:",
result.ip,
result.port
);
}
} catch (error) {
console.warn("自动更新IP地址和端口失败:", error);
}
}, 500);
// 延迟同步按钮状态，确保与内部状态一致
setTimeout(() => {
if (serverManager.isRegistered) {
btnRegister.disabled = true;
btnRegister.textContent = "已注册";
btnUnregister.disabled = false;
} else {
btnRegister.disabled = false;
btnRegister.textContent = "注册服务器";
btnUnregister.disabled = true;
}
}, 1000);
} catch (error) {
console.error("显示ComfyUI服务器管理对话框失败:", error);
alert(`显示对话框失败: ${error.message}`);