Reconexion automatica en el cliente cuando falla la conexion WebSocket

- Retry con backoff (hasta 3 intentos, delay incremental)
- Suprimir errores de consola durante reintentos
- Mostrar estado "Reconectando" en el widget
- Si todos los reintentos fallan, limpiar sesion y mostrar form de token
This commit is contained in:
2026-02-13 03:05:55 -06:00
parent 4fa3ba9517
commit 480d4d618e
3 changed files with 65 additions and 19 deletions

View File

@@ -26,6 +26,10 @@
this.registeredTools = /* @__PURE__ */ new Set();
this.registeredPrompts = /* @__PURE__ */ new Set();
this.registeredResources = /* @__PURE__ */ new Set();
this._reconnectAttempts = 0;
this._maxReconnectAttempts = 3;
this._reconnectDelay = 1e3;
this._lastConnectionToken = null;
this.SESSION_STORAGE_KEY = "webmcp_token";
this.TOOLS_STORAGE_KEY = "webmcp_tools";
this.PROMPTS_STORAGE_KEY = "webmcp_prompts";
@@ -739,6 +743,7 @@
this._updateStatus("disconnected", "Error: No token provided");
return;
}
this._lastConnectionToken = connectionToken;
this._updateStatus("connecting", "Connecting...");
try {
if (!this._processConnectionToken(connectionToken)) {
@@ -884,6 +889,7 @@
}
this.socket.addEventListener("open", () => {
this.isConnected = true;
this._reconnectAttempts = 0;
this._updateStatus("connected", `Connected to ${this.currentChannel}`);
this._updateConnectionUI(true);
console.log("WebMCP connection established");
@@ -891,18 +897,31 @@
});
this.socket.addEventListener("close", (event) => {
this.isConnected = false;
console.log(`Connection closed: ${event.code} ${event.reason}`);
if (event.code === 1e3) {
this._updateStatus("disconnected", "Disconnected");
this._updateConnectionUI(false);
return;
}
if (this._reconnectAttempts < this._maxReconnectAttempts && this._lastConnectionToken) {
this._reconnectAttempts++;
const delay = this._reconnectDelay * this._reconnectAttempts;
console.log(`Reconnecting (attempt ${this._reconnectAttempts}/${this._maxReconnectAttempts}) in ${delay}ms...`);
this._updateStatus("connecting", `Reconectando (${this._reconnectAttempts}/${this._maxReconnectAttempts})...`);
setTimeout(() => {
this.connect(this._lastConnectionToken);
}, delay);
return;
}
this._updateStatus("disconnected", "Disconnected");
this._updateConnectionUI(false);
console.log(`Connection closed: ${event.code} ${event.reason}`);
if (event.code === 1001 || event.code === 401) {
this._updateStatus("disconnected", "Authorization failed");
this.currentToken = "";
this.currentServer = "";
this.currentChannel = "";
sessionStorage.removeItem(this.SESSION_STORAGE_KEY);
}
this.currentToken = "";
this.currentServer = "";
this.currentChannel = "";
sessionStorage.removeItem(this.SESSION_STORAGE_KEY);
});
this.socket.addEventListener("error", () => {
if (this._reconnectAttempts > 0) return;
console.error("WebSocket error");
if (this.isConnected) {
this._updateStatus("disconnected", "Connection error occurred");