Spaces:

duqing2026
/

nodejs-performance-project

Sleeping

App Files Files Community

3v324v23 commited on Mar 11

Commit

2324f78

1 Parent(s): 89253be

feat: Upgrade to interactive Web UI with SSE streaming

Browse files

Files changed (2) hide show

README.md +1 -0
index.js +153 -75

README.md CHANGED Viewed

@@ -19,6 +19,7 @@ short_description: 演示 Node.js 大文件流式读写、XML/JSON 处理及性
 ## 功能特性
 - **流式架构**：核心模块均采用流式处理，适用于高并发和大数据量场景。
 - **性能分析**：内置简单的性能监控工具，可直观看到各操作耗时。
 - **模块化设计**：功能拆分为独立模块，易于扩展和维护。

 ## 功能特性
+- **交互式 Web 界面**：通过 Web 页面点击按钮运行演示，实时查看日志输出。
 - **流式架构**：核心模块均采用流式处理，适用于高并发和大数据量场景。
 - **性能分析**：内置简单的性能监控工具，可直观看到各操作耗时。
 - **模块化设计**：功能拆分为独立模块，易于扩展和维护。

index.js CHANGED Viewed

@@ -1,12 +1,11 @@
 const express = require('express');
 const path = require('path');
 const fs = require('fs');
 const LargeFileHandler = require('./src/largeFile');
 const xmlJsonHandler = require('./src/xmlJson');
 const performanceMonitor = require('./src/performance');
-const { exec } = require('child_process');
 const app = express();
 const PORT = 7860;
@@ -21,23 +20,8 @@ const LARGE_FILE_PATH = path.join(DATA_DIR, 'large_data.csv');
 const XML_FILE_PATH = path.join(DATA_DIR, 'data.xml');
 const LARGE_JSON_PATH = path.join(DATA_DIR, 'large_data.json');
-// Custom logger to capture output
-class StringLogger {
-    constructor() {
-        this.logs = [];
-    }
-    log(...args) {
-        const msg = args.map(arg => (typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg))).join(' ');
-        this.logs.push(msg);
-    }
-    error(...args) {
-        const msg = args.map(arg => (typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg))).join(' ');
-        this.logs.push(`ERROR: ${msg}`);
-    }
-    getOutput() {
-        return this.logs.join('\n');
-    }
-}
 async function runDemo() {
     console.log('=== Node.js 性能优化与大文件处理演示 ===\n');
@@ -47,7 +31,7 @@ async function runDemo() {
         console.log('--- 1. 大文件流式处理 ---');
         const largeFileHandler = new LargeFileHandler(LARGE_FILE_PATH);
-        // Generate 100k lines (reduced for demo speed on web request)
         const lineCount = 100000;
         console.log(`正在生成测试数据 (${lineCount} 行)...`);
         await largeFileHandler.generateTestFile(lineCount);
@@ -58,7 +42,7 @@ async function runDemo() {
         console.log('\n--- 2. XML 处理 ---');
         // Generate XML
-        const xmlContent = xmlJsonHandler.generateXml(1000); // Reduced size
         fs.writeFileSync(XML_FILE_PATH, xmlContent);
         console.log(`XML 文件已保存: ${XML_FILE_PATH}`);
@@ -69,7 +53,7 @@ async function runDemo() {
         console.log('\n--- 3. JSON 大文件流式处理 ---');
         // Generate large JSON
         console.log('正在生成 JSON 数据...');
-        await xmlJsonHandler.generateLargeJson(LARGE_JSON_PATH, 10000); // Reduced size
         // Stream parse JSON
         console.log('开始流式解析 JSON...');
@@ -89,83 +73,177 @@ async function runDemo() {
     }
 }
-app.get('/', async (req, res) => {
-    const logger = new StringLogger();
-    // Check if running
     if (global.isDemoRunning) {
-        return res.send('Demo is already running, please wait...');
     }
     global.isDemoRunning = true;
-    // Override console methods to capture output
     const originalConsoleLog = console.log;
     const originalConsoleError = console.error;
     console.log = (...args) => {
-        logger.log(...args);
         originalConsoleLog.apply(console, args);
     };
     console.error = (...args) => {
-        logger.error(...args);
         originalConsoleError.apply(console, args);
     };
     try {
         await runDemo();
     } catch (e) {
-        console.error('Unhandled error in demo:', e);
     } finally {
-        // Restore console methods
         console.log = originalConsoleLog;
         console.error = originalConsoleError;
         global.isDemoRunning = false;
     }
-    const output = logger.getOutput();
-    res.send(`
-        <html>
-            <head>
-                <title>Node.js Performance Demo</title>
-                <style>
-                    body { font-family: monospace; background: #f0f0f0; padding: 20px; }
-                    pre { background: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); white-space: pre-wrap; }
-                    h1 { color: #333; }
-                    .btn { display: inline-block; padding: 10px 20px; background: #007bff; color: white; text-decoration: none; border-radius: 5px; margin-top: 20px; }
-                </style>
-            </head>
-            <body>
-                <h1>Node.js Performance Demo Output</h1>
-                <pre>${output}</pre>
-                <p>Refresh to run again.</p>
-                <a href="/system-info" class="btn">View System Info (child_process demo)</a>
-            </body>
-        </html>
-    `);
 });
-app.get('/system-info', (req, res) => {
     exec('uname -a && echo "\\nDisk Usage:" && df -h | head -n 5', (error, stdout, stderr) => {
-        const output = error ? `Error: ${error.message}` : stdout;
-        res.send(`
-            <html>
-                <head>
-                    <title>System Info</title>
-                    <style>
-                        body { font-family: monospace; background: #f0f0f0; padding: 20px; }
-                        pre { background: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); white-space: pre-wrap; }
-                        h1 { color: #333; }
-                        .btn { display: inline-block; padding: 10px 20px; background: #007bff; color: white; text-decoration: none; border-radius: 5px; margin-top: 20px; }
-                    </style>
-                </head>
-                <body>
-                    <h1>System Info (via child_process)</h1>
-                    <pre>${output}</pre>
-                    <a href="/" class="btn">Back to Demo</a>
-                </body>
-            </html>
-        `);
     });
 });

 const express = require('express');
 const path = require('path');
 const fs = require('fs');
+const { exec } = require('child_process');
 const LargeFileHandler = require('./src/largeFile');
 const xmlJsonHandler = require('./src/xmlJson');
 const performanceMonitor = require('./src/performance');
 const app = express();
 const PORT = 7860;
 const XML_FILE_PATH = path.join(DATA_DIR, 'data.xml');
 const LARGE_JSON_PATH = path.join(DATA_DIR, 'large_data.json');
+// Global lock to prevent concurrent demos
+global.isDemoRunning = false;
 async function runDemo() {
     console.log('=== Node.js 性能优化与大文件处理演示 ===\n');
         console.log('--- 1. 大文件流式处理 ---');
         const largeFileHandler = new LargeFileHandler(LARGE_FILE_PATH);
+        // Generate 100k lines
         const lineCount = 100000;
         console.log(`正在生成测试数据 (${lineCount} 行)...`);
         await largeFileHandler.generateTestFile(lineCount);
         console.log('\n--- 2. XML 处理 ---');
         // Generate XML
+        const xmlContent = xmlJsonHandler.generateXml(1000);
         fs.writeFileSync(XML_FILE_PATH, xmlContent);
         console.log(`XML 文件已保存: ${XML_FILE_PATH}`);
         console.log('\n--- 3. JSON 大文件流式处理 ---');
         // Generate large JSON
         console.log('正在生成 JSON 数据...');
+        await xmlJsonHandler.generateLargeJson(LARGE_JSON_PATH, 10000);
         // Stream parse JSON
         console.log('开始流式解析 JSON...');
     }
 }
+// Serve the main page
+app.get('/', (req, res) => {
+    res.send(`
+        <!DOCTYPE html>
+        <html>
+            <head>
+                <title>Node.js Performance Demo</title>
+                <meta charset="utf-8">
+                <style>
+                    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #f0f2f5; padding: 40px; color: #333; }
+                    .container { max-width: 900px; margin: 0 auto; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+                    h1 { color: #2c3e50; margin-bottom: 20px; border-bottom: 2px solid #eee; padding-bottom: 10px; }
+                    .controls { margin-bottom: 20px; display: flex; gap: 10px; }
+                    button { padding: 10px 20px; font-size: 16px; cursor: pointer; background: #007bff; color: white; border: none; border-radius: 5px; transition: background 0.3s; }
+                    button:hover { background: #0056b3; }
+                    button:disabled { background: #ccc; cursor: not-allowed; }
+                    #output { background: #1e1e1e; color: #d4d4d4; padding: 20px; border-radius: 5px; font-family: "Menlo", "Monaco", "Courier New", monospace; height: 500px; overflow-y: auto; white-space: pre-wrap; font-size: 14px; line-height: 1.5; border: 1px solid #333; }
+                    .status { margin-top: 10px; font-style: italic; color: #666; }
+                </style>
+            </head>
+            <body>
+                <div class="container">
+                    <h1>Node.js Performance Demo</h1>
+                    <div class="controls">
+                        <button id="runBtn" onclick="runDemo()">▶ 运行性能演示</button>
+                        <button onclick="getSystemInfo()" style="background: #28a745;">🖥 获取系统信息</button>
+                        <button onclick="clearOutput()" style="background: #6c757d;">🗑 清空输出</button>
+                    </div>
+                    <div id="output">等待操作...</div>
+                    <div id="status" class="status"></div>
+                </div>
+                <script>
+                    const outputDiv = document.getElementById('output');
+                    const statusDiv = document.getElementById('status');
+                    const runBtn = document.getElementById('runBtn');
+                    function log(msg, isError = false) {
+                        if (outputDiv.innerHTML === '等待操作...') {
+                            outputDiv.innerHTML = '';
+                        }
+                        const span = document.createElement('div');
+                        span.textContent = msg;
+                        if (isError) span.style.color = '#ff6b6b';
+                        outputDiv.appendChild(span);
+                        outputDiv.scrollTop = outputDiv.scrollHeight;
+                    }
+                    function clearOutput() {
+                        outputDiv.innerHTML = '等待操作...';
+                        statusDiv.textContent = '';
+                    }
+                    function runDemo() {
+                        if (runBtn.disabled) return;
+                        runBtn.disabled = true;
+                        statusDiv.textContent = '正在运行演示...';
+                        outputDiv.innerHTML = ''; // Clear previous output
+                        const eventSource = new EventSource('/api/run-demo');
+                        eventSource.onmessage = function(event) {
+                            try {
+                                const data = JSON.parse(event.data);
+                                if (data.type === 'log') {
+                                    log(data.message);
+                                } else if (data.type === 'error') {
+                                    log(data.message, true);
+                                } else if (data.type === 'end') {
+                                    eventSource.close();
+                                    runBtn.disabled = false;
+                                    statusDiv.textContent = '演示完成';
+                                }
+                            } catch (e) {
+                                console.error('Error parsing SSE data', e);
+                            }
+                        };
+                        eventSource.onerror = function(err) {
+                            console.error('EventSource failed:', err);
+                            eventSource.close();
+                            runBtn.disabled = false;
+                            statusDiv.textContent = '连接中断';
+                            log('Error: Connection to server lost.', true);
+                        };
+                    }
+                    async function getSystemInfo() {
+                        statusDiv.textContent = '正在获取系统信息...';
+                        try {
+                            const res = await fetch('/api/system-info');
+                            const text = await res.text();
+                            log('\\n=== 系统信息 ===');
+                            log(text);
+                            statusDiv.textContent = '获取成功';
+                        } catch (e) {
+                            log('Error fetching system info: ' + e.message, true);
+                        }
+                    }
+                </script>
+            </body>
+        </html>
+    `);
+});
+// SSE Endpoint for running the demo
+app.get('/api/run-demo', async (req, res) => {
     if (global.isDemoRunning) {
+        res.writeHead(200, {
+            'Content-Type': 'text/event-stream',
+            'Cache-Control': 'no-cache',
+            'Connection': 'keep-alive'
+        });
+        res.write(`data: ${JSON.stringify({ type: 'error', message: 'Demo is already running. Please wait.' })}\n\n`);
+        res.write(`data: ${JSON.stringify({ type: 'end' })}\n\n`);
+        return res.end();
     }
+    res.writeHead(200, {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        'Connection': 'keep-alive'
+    });
     global.isDemoRunning = true;
+    // Helper to send SSE messages
+    const send = (type, message) => {
+        res.write(`data: ${JSON.stringify({ type, message })}\n\n`);
+    };
+    // Override console methods
     const originalConsoleLog = console.log;
     const originalConsoleError = console.error;
     console.log = (...args) => {
+        const msg = args.map(arg => (typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg))).join(' ');
+        send('log', msg);
         originalConsoleLog.apply(console, args);
     };
     console.error = (...args) => {
+        const msg = args.map(arg => (typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg))).join(' ');
+        send('error', msg);
         originalConsoleError.apply(console, args);
     };
     try {
         await runDemo();
     } catch (e) {
+        console.error('Unhandled error:', e);
     } finally {
+        // Restore console
         console.log = originalConsoleLog;
         console.error = originalConsoleError;
         global.isDemoRunning = false;
+        send('end', 'Done');
+        res.end();
     }
 });
+// API for system info
+app.get('/api/system-info', (req, res) => {
     exec('uname -a && echo "\\nDisk Usage:" && df -h | head -n 5', (error, stdout, stderr) => {
+        if (error) {
+            res.status(500).send(`Error: ${error.message}`);
+            return;
+        }
+        res.send(stdout);
     });
 });