dashboardWS.js

Go to the documentation of this file.

/**
 * WebSocket Client for Dashboard
 * 
 * Manages real-time communication with backend:
 * - Subscribes to agent data streams
 * - Receives metrics, process, service updates
 * - Handles script execution output
 * - Live logs and events
 */
 
class DashboardWebSocket {
  constructor() {
    this.ws = null;
    this.connectionId = null;
    this.connected = false;
    this.authenticated = false;
    this.subscriptions = new Set();
    this.listeners = new Map();
    this.reconnectAttempts = 0;
    this.maxReconnectAttempts = 999;
    this.baseDelay = 1000;
    this.maxDelay = 30000;
    this.reconnectTimer = null;
    this.pendingRequests = new Map();
  }
 
  /**
   * Connect to backend WebSocket
   */
  connect() {
    // Use environment variable for WebSocket URL, or construct from API URL
    // For production, this should point to the backend server (rmm-psa-backend-t9f7k.ondigitalocean.app)
    let wsUrl;
    
    if (import.meta.env.VITE_WS_URL) {
      wsUrl = import.meta.env.VITE_WS_URL;
    } else if (import.meta.env.VITE_API_URL) {
      // Convert API URL to WebSocket URL
      const apiUrl = import.meta.env.VITE_API_URL.replace('/api', '');
      wsUrl = apiUrl.replace(/^http/, 'ws') + '/dashboard-ws';
    } else {
      // Fallback to same host (for local development)
      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
      const host = window.location.hostname;
      const port = window.location.port;
      wsUrl = port ? `${protocol}//${host}:${port}/dashboard-ws` : `${protocol}//${host}/dashboard-ws`;
    }
 
    console.log('[DashboardWS] Connecting to:', wsUrl);
 
    this.ws = new WebSocket(wsUrl);
 
    this.ws.onopen = () => {
      console.log('[DashboardWS] ✅ Connected');
      this.connected = true;
      this.reconnectAttempts = 0;
      
      // Emit connected event
      this.emit('connected');
      
      // Authenticate with JWT token
      const token = localStorage.getItem('token');
      if (token) {
        this.send({
          type: 'authenticate',
          token: token
        });
      } else {
        console.warn('[DashboardWS] No authentication token found');
      }
    };
 
    this.ws.onclose = (event) => {
      console.log('[DashboardWS] Connection closed:', event.code, event.reason);
      this.connected = false;
      this.authenticated = false;
      this.connectionId = null;
      this.emit('disconnected');
      this.scheduleReconnect();
    };
 
    this.ws.onerror = (error) => {
      console.error('[DashboardWS] Error:', error);
      this.emit('error', error);
    };
 
    this.ws.onmessage = (event) => {
      try {
        const msg = JSON.parse(event.data);
        this.handleMessage(msg);
      } catch (err) {
        console.error('[DashboardWS] Failed to parse message:', err);
      }
    };
  }
 
  /**
   * Schedule reconnection with exponential backoff
   */
  scheduleReconnect() {
    if (this.reconnectTimer) {
      clearTimeout(this.reconnectTimer);
    }
 
    this.reconnectAttempts++;
    const delay = Math.min(
      this.baseDelay * Math.pow(2, this.reconnectAttempts - 1),
      this.maxDelay
    );
 
    console.log(`[DashboardWS] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts})`);
 
    this.reconnectTimer = setTimeout(() => {
      this.connect();
    }, delay);
  }
 
  /**
   * Handle incoming messages
   */
  handleMessage(msg) {
    console.log('[DashboardWS] Received:', msg.type);
 
    switch (msg.type) {
      case 'welcome':
        this.connectionId = msg.connection_id;
        console.log('[DashboardWS] Connection ID:', this.connectionId);
        break;
 
      case 'authenticated':
        console.log('[DashboardWS] Authenticated as user:', msg.user_id);
        this.authenticated = true;
        this.emit('authenticated', msg);
        
        // Now resubscribe to agents after authentication
        if (this.subscriptions.size > 0) {
          this.subscribe(Array.from(this.subscriptions));
        }
        break;
 
      case 'auth_error':
        console.error('[DashboardWS] Authentication failed:', msg.error);
        this.authenticated = false;
        this.emit('auth_error', msg.error);
        break;
 
      case 'subscribed':
        console.log('[DashboardWS] Subscribed to:', msg.agent_uuids);
        break;
 
      case 'metrics_update':
        this.emit('metrics', msg.agent_uuid, msg.data);
        break;
 
      case 'processes_snapshot':
        this.emit('processes', msg.agent_uuid, msg.processes);
        break;
 
      case 'services_snapshot':
        this.emit('services', msg.agent_uuid, msg.services);
        break;
 
      case 'script_output':
        this.emit('script_output', msg.execution_id, msg.line);
        break;
 
      case 'script_complete':
        this.emit('script_complete', msg.execution_id, msg.exit_code);
        break;
 
      case 'script_error':
        this.emit('script_error', msg.execution_id, msg.error);
        break;
 
      case 'agent_log':
        this.emit('agent_log', msg.agent_uuid, msg.level, msg.message);
        break;
 
      case 'event_log':
        this.emit('event_log', msg.agent_uuid, msg.event);
        break;
 
      case 'agent_disconnected':
        this.emit('agent_disconnected', msg.agent_uuid);
        break;
 
      case 'response':
        // Handle response to request
        if (msg.request_id) {
          const pending = this.pendingRequests.get(msg.request_id);
          if (pending) {
            clearTimeout(pending.timeout);
            pending.resolve(msg.data);
            this.pendingRequests.delete(msg.request_id);
          }
        }
        break;
 
      default:
        console.log('[DashboardWS] Unknown message type:', msg.type);
    }
  }
 
  /**
   * Subscribe to agent updates
   */
  subscribe(agent_uuids) {
    if (!Array.isArray(agent_uuids)) {
      agent_uuids = [agent_uuids];
    }
 
    // Add to subscriptions set
    agent_uuids.forEach(uuid => this.subscriptions.add(uuid));
 
    if (!this.connected || !this.ws) {
      console.log('[DashboardWS] Not connected, will subscribe on connect');
      return;
    }
 
    this.send({
      type: 'subscribe',
      agent_uuids
    });
  }
 
  /**
   * Unsubscribe from agent updates
   */
  unsubscribe(agent_uuids) {
    if (!Array.isArray(agent_uuids)) {
      agent_uuids = [agent_uuids];
    }
 
    // Remove from subscriptions set
    agent_uuids.forEach(uuid => this.subscriptions.delete(uuid));
 
    if (!this.connected || !this.ws) {
      return;
    }
 
    this.send({
      type: 'unsubscribe',
      agent_uuids
    });
  }
 
  /**
   * Request processes snapshot
   */
  requestProcesses(agent_uuid) {
    return this.sendRequest({
      type: 'request_processes',
      agent_uuid
    });
  }
 
  /**
   * Request services snapshot
   */
  requestServices(agent_uuid) {
    return this.sendRequest({
      type: 'request_services',
      agent_uuid
    });
  }
 
  /**
   * Execute script
   */
  executeScript(agent_uuid, script_id, code) {
    this.send({
      type: 'execute_script',
      agent_uuid,
      script_id,
      code
    });
  }
 
  /**
   * Kill process
   */
  killProcess(agent_uuid, pid) {
    return this.sendRequest({
      type: 'kill_process',
      agent_uuid,
      pid
    });
  }
 
  /**
   * Control service (start/stop/restart)
   */
  controlService(agent_uuid, service_name, action) {
    return this.sendRequest({
      type: 'control_service',
      agent_uuid,
      service_name,
      action
    });
  }
 
  /**
   * Send message to backend
   */
  send(message) {
    if (!this.connected || !this.ws || this.ws.readyState !== WebSocket.OPEN) {
      console.warn('[DashboardWS] Cannot send, not connected');
      return false;
    }
 
    try {
      this.ws.send(JSON.stringify(message));
      return true;
    } catch (err) {
      console.error('[DashboardWS] Failed to send:', err);
      return false;
    }
  }
 
  /**
   * Send request and await response
   */
  sendRequest(message, timeout = 10000) {
    return new Promise((resolve, reject) => {
      const request_id = `req-${Date.now()}-${Math.random().toString(36).slice(2)}`;
      
      const timer = setTimeout(() => {
        this.pendingRequests.delete(request_id);
        reject(new Error('Request timeout'));
      }, timeout);
 
      this.pendingRequests.set(request_id, { resolve, reject, timeout: timer });
 
      const success = this.send({
        ...message,
        request_id
      });
 
      if (!success) {
        clearTimeout(timer);
        this.pendingRequests.delete(request_id);
        reject(new Error('Not connected'));
      }
    });
  }
 
  /**
   * Add event listener
   */
  on(event, callback) {
    if (!this.listeners.has(event)) {
      this.listeners.set(event, []);
    }
    this.listeners.get(event).push(callback);
  }
 
  /**
   * Remove event listener
   */
  off(event, callback) {
    if (!this.listeners.has(event)) return;
    const callbacks = this.listeners.get(event);
    const index = callbacks.indexOf(callback);
    if (index > -1) {
      callbacks.splice(index, 1);
    }
  }
 
  /**
   * Emit event
   */
  emit(event, ...args) {
    if (!this.listeners.has(event)) return;
    const callbacks = this.listeners.get(event);
    callbacks.forEach(callback => {
      try {
        callback(...args);
      } catch (err) {
        console.error(`[DashboardWS] Error in ${event} callback:`, err);
      }
    });
  }
 
  /**
   * Disconnect
   */
  disconnect() {
    if (this.reconnectTimer) {
      clearTimeout(this.reconnectTimer);
      this.reconnectTimer = null;
    }
 
    if (this.ws) {
      this.ws.close();
      this.ws = null;
    }
 
    this.connected = false;
    this.connectionId = null;
    this.subscriptions.clear();
    this.listeners.clear();
  }
}
 
// Create singleton instance
const dashboardWS = new DashboardWebSocket();
 
// Auto-connect on load
if (typeof window !== 'undefined') {
  window.addEventListener('load', () => {
    dashboardWS.connect();
  });
}
 
export default dashboardWS;