Websocket Dashboard

const WebSocket = require('ws');
const os = require('os');

const server = new WebSocket.Server({ port: 8080 });
const clients = new Set();

server.on('connection', (ws) => {
  clients.add(ws);
  console.log('Dashboard client connected. Total:', clients.size);

  ws.on('close', () => {
    clients.delete(ws);
    console.log('Dashboard client disconnected. Total:', clients.size);
  });
});

// Collect and stream metrics every second
setInterval(() => {
  const metrics = {
    type: 'metrics',
    timestamp: Date.now(),
    cpu: {
      loadAverage: os.loadavg(),
      cpus: os.cpus().length,
    },
    memory: {
      total: os.totalmem(),
      free: os.freemem(),
      used: os.totalmem() - os.freemem(),
      usagePercent: ((os.totalmem() - os.freemem()) / os.totalmem() * 100).toFixed(1),
    },
    uptime: os.uptime(),
    network: getNetworkStats(),
    processes: process.memoryUsage(),
  };

  const data = JSON.stringify(metrics);
  clients.forEach((client) => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(data);
    }
  });
}, 1000);

function getNetworkStats() {
  const interfaces = os.networkInterfaces();
  const stats = {};
  for (const [name, addrs] of Object.entries(interfaces)) {
    if (addrs) {
      stats[name] = addrs.filter(a => a.family === 'IPv4').map(a => a.address);
    }
  }
  return stats;
}

class MetricsDashboard {
  constructor(wsUrl) {
    this.charts = {};
    this.historySize = 60; // 60 data points (1 minute at 1/sec)
    this.metricHistory = {
      cpu: [],
      memory: [],
      timestamps: [],
    };
    this.connect(wsUrl);
    this.initCharts();
  }

  connect(url) {
    this.ws = new WebSocket(url);
    
    this.ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      if (data.type === 'metrics') {
        this.updateDashboard(data);
      }
    };

    this.ws.onclose = () => {
      setTimeout(() => this.connect(url), 2000);
    };
  }

  initCharts() {
    const ctx = document.getElementById('cpu-chart').getContext('2d');
    this.charts.cpu = new Chart(ctx, {
      type: 'line',
      data: {
        labels: [],
        datasets: [{
          label: 'CPU Load Average (1m)',
          data: [],
          borderColor: 'rgb(75, 192, 192)',
          tension: 0.1,
        }],
      },
      options: {
        animation: false,
        scales: {
          x: { display: true, max: this.historySize },
          y: { min: 0, max: 100 },
        },
      },
    });

    // Memory gauge chart
    const memCtx = document.getElementById('memory-chart').getContext('2d');
    this.charts.memory = new Chart(memCtx, {
      type: 'doughnut',
      data: {
        labels: ['Used', 'Free'],
        datasets: [{
          data: [0, 100],
          backgroundColor: ['rgb(255, 99, 132)', 'rgb(75, 192, 192)'],
        }],
      },
      options: {
        animation: false,
        plugins: {
          tooltip: {
            callbacks: {
              label: (context) => {
                return `${context.label}: ${context.parsed.toFixed(1)}%`;
              },
            },
          },
        },
      },
    });
  }

  updateDashboard(metrics) {
    // Update CPU chart
    const cpuLoad = (metrics.cpu.loadAverage[0] / metrics.cpu.cpus) * 100;
    this.metricHistory.cpu.push(cpuLoad);
    this.metricHistory.timestamps.push(
      new Date(metrics.timestamp).toLocaleTimeString()
    );

    if (this.metricHistory.cpu.length > this.historySize) {
      this.metricHistory.cpu.shift();
      this.metricHistory.timestamps.shift();
    }

    this.charts.cpu.data.labels = this.metricHistory.timestamps;
    this.charts.cpu.data.datasets[0].data = this.metricHistory.cpu;
    this.charts.cpu.update('none');

    // Update memory gauge
    this.charts.memory.data.datasets[0].data = [
      metrics.memory.usagePercent,
      100 - metrics.memory.usagePercent,
    ];
    this.charts.memory.update('none');

    // Update metric displays
    document.getElementById('cpu-value').textContent =
      `${cpuLoad.toFixed(1)}%`;
    document.getElementById('memory-value').textContent =
      `${metrics.memory.usagePercent}%`;
    document.getElementById('uptime').textContent =
      formatUptime(metrics.uptime);
    document.getElementById('clients').textContent =
      metrics.clients || 'N/A';
  }
}

function formatUptime(seconds) {
  const days = Math.floor(seconds / 86400);
  const hours = Math.floor((seconds % 86400) / 3600);
  const mins = Math.floor((seconds % 3600) / 60);
  return `${days}d ${hours}h ${mins}m`;
}

// Initialize dashboard
const dashboard = new MetricsDashboard('wss://metrics.example.com/ws');

// Server with subscription filters
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (ws) => {
  ws.filters = {
    metrics: ['cpu', 'memory', 'disk'],
    interval: 1000,
    aggregation: 'raw',
  };

  ws.on('message', (data) => {
    const message = JSON.parse(data);

    switch (message.type) {
      case 'subscribe':
        ws.filters.metrics = message.metrics || ws.filters.metrics;
        ws.filters.interval = message.interval || ws.filters.interval;
        ws.filters.aggregation = message.aggregation || ws.filters.aggregation;
        
        ws.send(JSON.stringify({
          type: 'subscribed',
          metrics: ws.filters.metrics,
          interval: ws.filters.interval,
        }));
        break;
    }
  });
});

// Per-client metric streaming
setInterval(() => {
  const allMetrics = collectAllMetrics();

  server.clients.forEach((client) => {
    if (client.readyState !== WebSocket.OPEN) return;

    const filteredMetrics = {};
    client.filters.metrics.forEach((metric) => {
      if (allMetrics[metric]) {
        filteredMetrics[metric] = allMetrics[metric];
      }
    });

    client.send(JSON.stringify({
      type: 'metrics',
      timestamp: Date.now(),
      ...filteredMetrics,
    }));
  });
}, 100);