进一步优化算法引入Websocket

2026-04-05 22:45:23 +08:00
parent d7d650c5f9
commit 2a8cb32d47
6 changed files with 226 additions and 206 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,8 @@
        "dotenv": "^16.4.0",
        "express": "^4.21.0",
        "ioredis": "^5.10.1",
-        "mysql2": "^3.11.0"
+        "mysql2": "^3.11.0",
+        "ws": "^8.20.0"
      }
    },
    "node_modules/@ioredis/commands": {
@@ -1215,6 +1216,27 @@
      "engines": {
        "node": ">= 0.8"
      }
+    },
+    "node_modules/ws": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.20.0.tgz",
+      "integrity": "sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
    }
  }
 }
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
    "dotenv": "^16.4.0",
    "express": "^4.21.0",
    "ioredis": "^5.10.1",
-    "mysql2": "^3.11.0"
+    "mysql2": "^3.11.0",
+    "ws": "^8.20.0"
  }
 }
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -127,7 +127,9 @@ html {

 body {
  font-family: var(--font-sans);
-  background: var(--bg-primary);
+  background: radial-gradient(circle at 0% 0%, #1a1e2e 0%, #0a0e1a 45%),
+              radial-gradient(circle at 100% 100%, #151a2e 0%, #0a0e1a 45%);
+  background-attachment: fixed;
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
@@ -146,65 +148,7 @@ body {
  pointer-events: none;
 }

-.bg-glow {
-  position: fixed;
-  border-radius: 50%;
-  filter: blur(120px);
-  opacity: 0.4;
-  z-index: 0;
-  pointer-events: none;
-  animation: glowFloat 20s ease-in-out infinite;
-  will-change: transform, opacity;
-  transform: translateZ(0);
-}
-
-.bg-glow-1 {
-  width: 600px;
-  height: 600px;
-  background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);
-  top: -200px;
-  left: -100px;
-  animation-delay: 0s;
-}
-
-.bg-glow-2 {
-  width: 500px;
-  height: 500px;
-  background: radial-gradient(circle, rgba(6, 182, 212, 0.12), transparent 70%);
-  bottom: -150px;
-  right: -100px;
-  animation-delay: -7s;
-}
-
-.bg-glow-3 {
-  width: 400px;
-  height: 400px;
-  background: radial-gradient(circle, rgba(168, 85, 247, 0.1), transparent 70%);
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  animation-delay: -14s;
-}
-
-@keyframes glowFloat {
-
-  0%,
-  100% {
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-
-  25% {
-    transform: translate3d(30px, -30px, 0) scale(1.05);
-  }
-
-  50% {
-    transform: translate3d(-20px, 20px, 0) scale(0.95);
-  }
-
-  75% {
-    transform: translate3d(25px, 15px, 0) scale(1.02);
-  }
-}
+/* ---- Animated Background Classes Removed for Performance ---- */

 /* ---- App Container ---- */
 #app {
@@ -223,9 +167,7 @@ body {
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
-  background: rgba(10, 14, 26, 0.85);
-  backdrop-filter: blur(12px) saturate(150%);
-  -webkit-backdrop-filter: blur(12px) saturate(150%);
+  background: rgba(10, 14, 26, 0.95); /* More opaque, no filter */
  border-bottom: 1px solid var(--border-color);
 }

@@ -455,8 +397,9 @@ input:checked+.slider:before {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
+  /* backdrop-filter: blur(8px); */
+  /* -webkit-backdrop-filter: blur(8px); */
+  background: rgba(15, 22, 50, 0.9); /* More solid background for readability without blur */
  transform: translateZ(0);
  transition: all 0.3s ease;
  overflow: hidden;
@@ -624,8 +567,9 @@ input:checked+.slider:before {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
+  /* backdrop-filter: blur(8px); */
+  /* -webkit-backdrop-filter: blur(8px); */
+  background: rgba(15, 22, 50, 0.9); /* More solid background for readability without blur */
  transform: translateZ(0);
  overflow: hidden;
  transition: all 0.3s ease;
--- a/public/index.html
+++ b/public/index.html
@@ -38,11 +38,8 @@
 </head>

 <body>
-  <!-- Animated Background -->
+  <!-- Optimized Background -->
  <div class="bg-grid"></div>
-  <div class="bg-glow bg-glow-1"></div>
-  <div class="bg-glow bg-glow-2"></div>
-  <div class="bg-glow bg-glow-3"></div>

  <!-- App Container -->
  <div id="app">
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -305,10 +305,40 @@

    loadSiteSettings();

-    setInterval(fetchMetrics, REFRESH_INTERVAL);
+    // setInterval(fetchMetrics, REFRESH_INTERVAL); - Now using WebSockets
+    initWebSocket();
    setInterval(fetchNetworkHistory, NETWORK_HISTORY_INTERVAL);
  }

+  // ---- Real-time WebSocket ----
+  function initWebSocket() {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${window.location.host}`;
+    const ws = new WebSocket(wsUrl);
+
+    ws.onmessage = (event) => {
+      try {
+        const msg = JSON.parse(event.data);
+        if (msg.type === 'overview') {
+          allServersData = msg.data.servers || [];
+          updateDashboard(msg.data);
+        }
+      } catch (err) {
+        console.error('WS Message Error:', err);
+      }
+    };
+
+    ws.onclose = () => {
+      console.log('WS connection closed. Reconnecting in 5s...');
+      setTimeout(initWebSocket, 5000);
+    };
+
+    ws.onerror = (err) => {
+      // Small silent error here to not alert the user constantly if server is down during maintenance
+      ws.close();
+    };
+  }
+
  // ---- Theme Switching ----
  function toggleTheme() {
    const theme = dom.themeToggle.checked ? 'light' : 'dark';
@@ -507,11 +537,9 @@
                }
            },
            series: [{
-                type: 'effectScatter',
+                type: 'scatter',
                coordinateSystem: 'geo',
                geoIndex: 0,
-                showEffectOn: 'render',
-                rippleEffect: { brushType: 'stroke', scale: 3, period: 6 },
                symbolSize: 5,
                itemStyle: {
                    color: '#06b6d4',
--- a/server/index.js
+++ b/server/index.js
@@ -7,6 +7,8 @@ const prometheusService = require('./prometheus-service');
 const cache = require('./cache');
 const geoService = require('./geo-service');
 const checkAndFixDatabase = require('./db-integrity-check');
+const http = require('http');
+const WebSocket = require('ws');

 const app = express();
 const PORT = process.env.PORT || 3000;
@@ -570,136 +572,135 @@ app.post('/api/settings', requireAuth, async (req, res) => {

 // ==================== Metrics Aggregation ====================

+// Reusable function to get overview metrics
+async function getOverview() {
+  const [sources] = await db.query('SELECT * FROM prometheus_sources');
+  if (sources.length === 0) {
+    return {
+      totalServers: 0,
+      activeServers: 0,
+      cpu: { used: 0, total: 0, percent: 0 },
+      memory: { used: 0, total: 0, percent: 0 },
+      disk: { used: 0, total: 0, percent: 0 },
+      network: { total: 0, rx: 0, tx: 0 },
+      traffic24h: { rx: 0, tx: 0, total: 0 },
+      servers: []
+    };
+  }
+
+  const allMetrics = await Promise.all(sources.map(async (source) => {
+    const cacheKey = `source_metrics:${source.url}:${source.name}`;
+    const cached = await cache.get(cacheKey);
+    if (cached) return cached;
+
+    try {
+      const metrics = await prometheusService.getOverviewMetrics(source.url, source.name);
+      // Don't set cache here if we want real-time WS push to be fresh, 
+      // but keeping it for REST API performance is fine.
+      await cache.set(cacheKey, metrics, 15); // Cache for 15s
+      return metrics;
+    } catch (err) {
+      console.error(`Error fetching metrics from ${source.name}:`, err.message);
+      return null;
+    }
+  }));
+
+  const validMetrics = allMetrics.filter(m => m !== null);
+
+  // Aggregate across all sources
+  let totalServers = 0;
+  let activeServers = 0;
+  let cpuUsed = 0, cpuTotal = 0;
+  let memUsed = 0, memTotal = 0;
+  let diskUsed = 0, diskTotal = 0;
+  let netRx = 0, netTx = 0;
+  let traffic24hRx = 0, traffic24hTx = 0;
+  let allServers = [];
+
+  for (const m of validMetrics) {
+    totalServers += m.totalServers;
+    activeServers += (m.activeServers !== undefined ? m.activeServers : m.totalServers);
+    cpuUsed += m.cpu.used;
+    cpuTotal += m.cpu.total;
+    memUsed += m.memory.used;
+    memTotal += m.memory.total;
+    diskUsed += m.disk.used;
+    diskTotal += m.disk.total;
+    netRx += m.network.rx;
+    netTx += m.network.tx;
+    traffic24hRx += m.traffic24h.rx;
+    traffic24hTx += m.traffic24h.tx;
+    allServers = allServers.concat(m.servers);
+  }
+
+  const overview = {
+    totalServers,
+    activeServers,
+    cpu: {
+      used: cpuUsed,
+      total: cpuTotal,
+      percent: cpuTotal > 0 ? (cpuUsed / cpuTotal * 100) : 0
+    },
+    memory: {
+      used: memUsed,
+      total: memTotal,
+      percent: memTotal > 0 ? (memUsed / memTotal * 100) : 0
+    },
+    disk: {
+      used: diskUsed,
+      total: diskTotal,
+      percent: diskTotal > 0 ? (diskUsed / diskTotal * 100) : 0
+    },
+    network: {
+      total: netRx + netTx,
+      rx: netRx,
+      tx: netTx
+    },
+    traffic24h: {
+      rx: traffic24hRx,
+      tx: traffic24hTx,
+      total: traffic24hRx + traffic24hTx
+    },
+    servers: allServers
+  };
+
+  // --- Add Geo Information to Servers ---
+  const geoServers = await Promise.all(overview.servers.map(async (server) => {
+    const realInstance = server.originalInstance || prometheusService.resolveToken(server.instance);
+    const cleanIp = realInstance.split(':')[0];
+    
+    let geoData = null;
+    try {
+      const [rows] = await db.query('SELECT * FROM server_locations WHERE ip = ?', [cleanIp]);
+      if (rows.length > 0) {
+        geoData = rows[0];
+      } else {
+        geoService.getLocation(cleanIp).catch(() => {});
+      }
+    } catch (e) {}
+
+    const { originalInstance, ...safeServer } = server;
+    if (geoData) {
+      return {
+        ...safeServer,
+        country: geoData.country,
+        countryName: geoData.country_name,
+        city: geoData.city,
+        lat: geoData.latitude,
+        lng: geoData.longitude
+      };
+    }
+    return safeServer;
+  }));
+
+  overview.servers = geoServers;
+  return overview;
+}
+
 // Get all aggregated metrics from all Prometheus sources
 app.get('/api/metrics/overview', async (req, res) => {
  try {
-    const [sources] = await db.query('SELECT * FROM prometheus_sources');
-    if (sources.length === 0) {
-      return res.json({
-        totalServers: 0,
-        cpu: { used: 0, total: 0, percent: 0 },
-        memory: { used: 0, total: 0, percent: 0 },
-        disk: { used: 0, total: 0, percent: 0 },
-        network: { total: 0, rx: 0, tx: 0 },
-        traffic24h: { rx: 0, tx: 0, total: 0 },
-        servers: []
-      });
-    }
-
-    const allMetrics = await Promise.all(sources.map(async (source) => {
-      const cacheKey = `source_metrics:${source.url}:${source.name}`;
-      const cached = await cache.get(cacheKey);
-      if (cached) return cached;
-
-      try {
-        const metrics = await prometheusService.getOverviewMetrics(source.url, source.name);
-        await cache.set(cacheKey, metrics, 15); // Cache for 15s
-        return metrics;
-      } catch (err) {
-        console.error(`Error fetching metrics from ${source.name}:`, err.message);
-        return null;
-      }
-    }));
-
-    const validMetrics = allMetrics.filter(m => m !== null);
-
-    // Aggregate across all sources
-    let totalServers = 0;
-    let activeServers = 0;
-    let cpuUsed = 0, cpuTotal = 0;
-    let memUsed = 0, memTotal = 0;
-    let diskUsed = 0, diskTotal = 0;
-    let netRx = 0, netTx = 0;
-    let traffic24hRx = 0, traffic24hTx = 0;
-    let allServers = [];
-
-    for (const m of validMetrics) {
-      totalServers += m.totalServers;
-      activeServers += m.activeServers || m.totalServers; // Default if missing
-      cpuUsed += m.cpu.used;
-      cpuTotal += m.cpu.total;
-      memUsed += m.memory.used;
-      memTotal += m.memory.total;
-      diskUsed += m.disk.used;
-      diskTotal += m.disk.total;
-      netRx += m.network.rx;
-      netTx += m.network.tx;
-      traffic24hRx += m.traffic24h.rx;
-      traffic24hTx += m.traffic24h.tx;
-      allServers = allServers.concat(m.servers);
-    }
-
-
-
-    const overview = {
-      totalServers,
-      activeServers,
-      cpu: {
-        used: cpuUsed,
-        total: cpuTotal,
-        percent: cpuTotal > 0 ? (cpuUsed / cpuTotal * 100) : 0
-      },
-      memory: {
-        used: memUsed,
-        total: memTotal,
-        percent: memTotal > 0 ? (memUsed / memTotal * 100) : 0
-      },
-      disk: {
-        used: diskUsed,
-        total: diskTotal,
-        percent: diskTotal > 0 ? (diskUsed / diskTotal * 100) : 0
-      },
-      network: {
-        total: netRx + netTx,
-        rx: netRx,
-        tx: netTx
-      },
-      traffic24h: {
-        rx: traffic24hRx,
-        tx: traffic24hTx,
-        total: traffic24hRx + traffic24hTx
-      },
-      servers: allServers
-    };
-
-    // --- Add Geo Information to Servers ---
-    const geoServers = await Promise.all(overview.servers.map(async (server) => {
-      // Use originalInstance if available for correct location lookup
-      const realInstance = server.originalInstance || prometheusService.resolveToken(server.instance);
-      const cleanIp = realInstance.split(':')[0];
-      
-      let geoData = null;
-      
-      // Try to get from DB cache only (fast)
-      try {
-        const [rows] = await db.query('SELECT * FROM server_locations WHERE ip = ?', [cleanIp]);
-        if (rows.length > 0) {
-          geoData = rows[0];
-        } else {
-          // Trigger background resolution for future requests
-          geoService.getLocation(cleanIp).catch(() => {});
-        }
-      } catch (e) {
-        // DB error, skip geo for now
-      }
-
-      // Prepare the server object without sensitive originalInstance
-      const { originalInstance, ...safeServer } = server;
-      
-      if (geoData) {
-        return {
-          ...safeServer,
-          country: geoData.country,
-          countryName: geoData.country_name,
-          city: geoData.city,
-          lat: geoData.latitude,
-          lng: geoData.longitude
-        };
-      }
-      return safeServer;
-    }));
-
-    overview.servers = geoServers;
+    const overview = await getOverview();
    res.json(overview);
  } catch (err) {
    console.error('Error fetching overview metrics:', err);
@@ -820,11 +821,38 @@ app.get('*', (req, res, next) => {
 });


+// ==================== WebSocket Server ====================
+
+const server = http.createServer(app);
+const wss = new WebSocket.Server({ server });
+
+function broadcast(data) {
+  const message = JSON.stringify(data);
+  wss.clients.forEach(client => {
+    if (client.readyState === WebSocket.OPEN) {
+      client.send(message);
+    }
+  });
+}
+
+// Broadcast loop
+async function broadcastMetrics() {
+  try {
+    const overview = await getOverview();
+    broadcast({ type: 'overview', data: overview });
+  } catch (err) {
+    // console.error('WS Broadcast error:', err.message);
+  }
+}
+
 // Check and fix database integrity on startup
 checkAndFixDatabase();

-app.listen(PORT, HOST, () => {
-  console.log(`\n  🚀 Data Visualization Display Wall`);
+const REFRESH_INT = parseInt(process.env.REFRESH_INTERVAL) || 5000;
+setInterval(broadcastMetrics, REFRESH_INT);
+
+server.listen(PORT, HOST, () => {
+  console.log(`\n  🚀 Data Visualization Display Wall (WebSocket Enabled)`);
  console.log(`  📊 Server running at http://${HOST === '0.0.0.0' ? 'localhost' : HOST}:${PORT}`);
  console.log(`  ⚙️  Configure Prometheus sources at http://${HOST === '0.0.0.0' ? 'localhost' : HOST}:${PORT}/settings\n`);
 });