server-test-app.js

// 导入 Firebase SDK
import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.13.0/firebase-app.js';
import { getFunctions, httpsCallable, connectFunctionsEmulator } from 'https://www.gstatic.com/firebasejs/10.13.0/firebase-functions.js';
import { 
    getFirestore, 
    collection, 
    doc,
    setDoc,
    getDoc,
    deleteDoc,
    query,
    limit,
    getDocs,
    serverTimestamp 
} from 'https://www.gstatic.com/firebasejs/10.13.0/firebase-firestore.js';
import { getDatabase, ref, set, get, remove, serverTimestamp as rtdbServerTimestamp, query as rtdbQuery, limitToFirst as rtdbLimitToFirst } from 'https://www.gstatic.com/firebasejs/10.13.0/firebase-database.js';

// Firebase 配置
const firebaseConfig = {
    apiKey: "AIzaSyCMT4t0NMSjXgI9clqALB6uguqY76ul8Iw",
    authDomain: "taptap-ugc.firebaseapp.com",
    databaseURL: "https://taptap-ugc-default-rtdb.asia-southeast1.firebasedatabase.app",
    projectId: "taptap-ugc",
    storageBucket: "taptap-ugc.appspot.com",
    messagingSenderId: "519191676565",
    appId: "1:519191676565:web:YOUR_APP_ID",
    measurementId: "G-YOUR_MEASUREMENT_ID"
};

// 初始化 Firebase
const app = initializeApp(firebaseConfig);
const functions = getFunctions(app, 'asia-southeast1');
const firestore = getFirestore(app);
const database = getDatabase(app);

// Cloud Functions 引用
const testFirestoreLatency = httpsCallable(functions, 'testFirestoreLatency');
const testRealtimeLatency = httpsCallable(functions, 'testRealtimeLatency');
const testRedisLatency = httpsCallable(functions, 'testRedisLatency');
const compareLatency = httpsCallable(functions, 'compareLatency');
const testRealtimePerformance = httpsCallable(functions, 'testRealtimePerformance');

// DOM 元素
const elements = {
    // 服务器测试控件
    serverTestSize: document.getElementById('serverTestSize'),
    serverTestRounds: document.getElementById('serverTestRounds'),
    enableRedisTest: document.getElementById('enableRedisTest'),
    runServerTest: document.getElementById('runServerTest'),
    serverTestProgress: document.getElementById('serverTestProgress'),
    serverResults: document.getElementById('serverResults'),
    firestoreServerMetrics: document.getElementById('firestoreServerMetrics'),
    realtimeServerMetrics: document.getElementById('realtimeServerMetrics'),
    redisServerMetrics: document.getElementById('redisServerMetrics'),
    serverComparison: document.getElementById('serverComparison'),
    
    // 实时测试控件
    realtimeDuration: document.getElementById('realtimeDuration'),
    updateInterval: document.getElementById('updateInterval'),
    runRealtimeTest: document.getElementById('runRealtimeTest'),
    realtimeResults: document.getElementById('realtimeResults'),
    firestoreRealtimeMetric: document.getElementById('firestoreRealtimeMetric'),
    realtimeDbMetric: document.getElementById('realtimeDbMetric'),
    redisRealtimeMetric: document.getElementById('redisRealtimeMetric'),
    
    // 客户端对比测试控件
    clientTestSizeInput: document.getElementById('clientTestSize'),
    runClientComparisonTestButton: document.getElementById('runClientComparisonTest'),
    clientTestProgressDiv: document.getElementById('clientTestProgress'),
    clientComparisonResultsDiv: document.getElementById('clientComparisonResults'),
    clientFirestoreMetricsDiv: document.getElementById('clientFirestoreMetrics'),
    clientRealtimeMetricsDiv: document.getElementById('clientRealtimeMetrics'),
    clientOverallComparisonDiv: document.getElementById('clientOverallComparison'),
    
    // 日志
    testLog: document.getElementById('testLog')
};

// 日志函数
function log(message, type = 'info') {
    const time = new Date().toLocaleTimeString('zh-CN');
    const logEntry = document.createElement('div');
    logEntry.className = `log-entry log-${type}`;
    logEntry.innerHTML = `<span class="log-time">[${time}]</span> ${message}`;
    elements.testLog.appendChild(logEntry);
    elements.testLog.scrollTop = elements.testLog.scrollHeight;
}

// 格式化延迟显示
function formatLatency(ms) {
    return `${ms.toFixed(2)} ms`;
}

// 服务器端性能测试
async function runServerPerformanceTest() {
    const testSize = parseInt(elements.serverTestSize.value);
    const rounds = parseInt(elements.serverTestRounds.value);
    const enableRedis = elements.enableRedisTest.checked;
    
    elements.runServerTest.disabled = true;
    elements.serverTestProgress.style.display = 'block';
    elements.serverResults.style.display = 'none';
    
    log('开始服务器端性能测试...', 'info');
    log(`测试参数: ${testSize} 条数据, ${rounds} 轮测试`, 'info');
    
    try {
        // 调用对比测试函数，并传递 Redis 开关状态
        const result = await compareLatency({ 
            testSize, 
            rounds, 
            includeDetails: false,
            enableRedis
        });
        
        const data = result.data;
        log('服务器端测试完成', 'success');
        
        // 显示 Firestore 结果
        elements.firestoreServerMetrics.innerHTML = `
            <div class="metric">
                <span class="metric-label">平均写入:</span>
                <span class="metric-value">${formatLatency(data.firestore.totalStats.avgWrite)}</span>
            </div>
            <div class="metric">
                <span class="metric-label">平均读取:</span>
                <span class="metric-value">${formatLatency(data.firestore.totalStats.avgRead)}</span>
            </div>
            <div class="metric">
                <span class="metric-label">平均删除:</span>
                <span class="metric-value">${formatLatency(data.firestore.totalStats.avgDelete)}</span>
            </div>
            <div class="metric">
                <span class="metric-label">总耗时:</span>
                <span class="metric-value">${formatLatency(data.firestore.totalStats.avgTotalTime)}</span>
            </div>
        `;
        
        // 显示 Realtime Database 结果
        elements.realtimeServerMetrics.innerHTML = `
            <div class="metric">
                <span class="metric-label">平均写入:</span>
                <span class="metric-value">${formatLatency(data.realtime.totalStats.avgWrite)}</span>
            </div>
            <div class="metric">
                <span class="metric-label">平均读取:</span>
                <span class="metric-value">${formatLatency(data.realtime.totalStats.avgRead)}</span>
            </div>
            <div class="metric">
                <span class="metric-label">平均删除:</span>
                <span class="metric-value">${formatLatency(data.realtime.totalStats.avgDelete)}</span>
            </div>
            <div class="metric">
                <span class="metric-label">总耗时:</span>
                <span class="metric-value">${formatLatency(data.realtime.totalStats.avgTotalTime)}</span>
            </div>
        `;
        
        // 显示 Redis 结果 - 根据开关状态和返回数据决定是否显示
        const redisCard = document.querySelector('.result-card.redis');
        if (enableRedis && data.redis && data.redis.totalStats) {
            elements.redisServerMetrics.innerHTML = `
                <div class="metric">
                    <span class="metric-label">平均写入:</span>
                    <span class="metric-value">${formatLatency(data.redis.totalStats.avgWrite)}</span>
                </div>
                <div class="metric">
                    <span class="metric-label">平均读取:</span>
                    <span class="metric-value">${formatLatency(data.redis.totalStats.avgRead)}</span>
                </div>
                <div class="metric">
                    <span class="metric-label">平均删除:</span>
                    <span class="metric-value">${formatLatency(data.redis.totalStats.avgDelete)}</span>
                </div>
                <div class="metric">
                    <span class="metric-label">总耗时:</span>
                    <span class="metric-value">${formatLatency(data.redis.totalStats.avgTotalTime)}</span>
                </div>
            `;
            redisCard.style.display = 'block';
        } else {
            elements.redisServerMetrics.innerHTML = '<p>Redis 测试已禁用或无数据</p>';
            if (redisCard) redisCard.style.display = enableRedis ? 'block' : 'none';
        }
        
        // 显示对比分析 - 根据 Redis 是否启用调整
        const comparison = data.comparison;
        elements.serverComparison.innerHTML = `
            <h4>性能对比分析</h4>
            <div class="comparison-item">
                <strong>写入性能:</strong> 
                ${comparison.writeSpeed.fastest.toUpperCase()} 最快
                <ul class="ranking-list">
                    ${comparison.writeSpeed.rankings.map((r, i) => 
                        (enableRedis || r.name !== 'redis') ? `<li>${i + 1}. ${r.name}: ${formatLatency(r.time)}</li>` : ''
                    ).join('')}
                </ul>
            </div>
            <div class="comparison-item">
                <strong>读取性能:</strong> 
                ${comparison.readSpeed.fastest.toUpperCase()} 最快
                <ul class="ranking-list">
                    ${comparison.readSpeed.rankings.map((r, i) => 
                        (enableRedis || r.name !== 'redis') ? `<li>${i + 1}. ${r.name}: ${formatLatency(r.time)}</li>` : ''
                    ).join('')}
                </ul>
            </div>
            <div class="comparison-item">
                <strong>删除性能:</strong> 
                ${comparison.deleteSpeed.fastest.toUpperCase()} 最快
                <ul class="ranking-list">
                    ${comparison.deleteSpeed.rankings.map((r, i) => 
                        (enableRedis || r.name !== 'redis') ? `<li>${i + 1}. ${r.name}: ${formatLatency(r.time)}</li>` : ''
                    ).join('')}
                </ul>
            </div>
            <div class="comparison-item">
                <strong>总体性能:</strong> 
                ${comparison.overallSpeed.fastest.toUpperCase()} 最快
                <ul class="ranking-list">
                    ${comparison.overallSpeed.rankings.map((r, i) => 
                        (enableRedis || r.name !== 'redis') ? `<li>${i + 1}. ${r.name}: ${formatLatency(r.time)}</li>` : ''
                    ).join('')}
                </ul>
            </div>
            <div class="metadata">
                测试区域: ${data.metadata.region} | 
                测试时间: ${new Date(data.metadata.timestamp).toLocaleString('zh-CN')}
            </div>
        `;
        
        elements.serverResults.style.display = 'block';
    } catch (error) {
        log(`服务器测试失败: ${error.message}`, 'error');
        console.error('Server test error:', error);
    } finally {
        elements.runServerTest.disabled = false;
        elements.serverTestProgress.style.display = 'none';
    }
}

// 实时性能测试
async function runRealtimePerformanceTest() {
    const duration = parseInt(elements.realtimeDuration.value);
    const updateInterval = parseInt(elements.updateInterval.value);
    
    elements.runRealtimeTest.disabled = true;
    elements.realtimeResults.style.display = 'none';
    
    log('开始实时更新性能测试...', 'info');
    log(`测试参数: ${duration/1000} 秒, 每 ${updateInterval}ms 更新一次`, 'info');
    
    try {
        const result = await testRealtimePerformance({ duration, updateInterval });
        const data = result.data;
        
        log('实时测试完成', 'success');
        
        // 显示结果
        elements.firestoreRealtimeMetric.textContent = formatLatency(data.firestore.avgLatency);
        elements.realtimeDbMetric.textContent = formatLatency(data.realtime.avgLatency);
        if (data.redis && data.redis.avgLatency !== undefined) {
            elements.redisRealtimeMetric.textContent = formatLatency(data.redis.avgLatency);
        } else {
            elements.redisRealtimeMetric.textContent = 'N/A';
        }
        
        elements.realtimeResults.style.display = 'block';
        
        // 记录详细信息
        log(`Firestore 更新次数: ${data.firestore.updates}`, 'info');
        log(`Realtime DB 更新次数: ${data.realtime.updates}`, 'info');
        if (data.redis) {
            log(`Redis 更新次数: ${data.redis.updates}`, 'info');
        }
        
        // 找出最快的数据库
        const latencies = [
            { name: 'Firestore', value: data.firestore.avgLatency },
            { name: 'Realtime Database', value: data.realtime.avgLatency }
        ];
        
        if (data.redis && data.redis.avgLatency !== undefined) {
            latencies.push({ name: 'Redis', value: data.redis.avgLatency });
        }
        
        const fastest = latencies.reduce((min, curr) => 
            curr.value < min.value ? curr : min
        );
        
        log(`${fastest.name} 的实时更新最快 (${formatLatency(fastest.value)})`, 'success');
        
    } catch (error) {
        log(`实时测试失败: ${error.message}`, 'error');
        console.error('Realtime test error:', error);
    } finally {
        elements.runRealtimeTest.disabled = false;
    }
}

// --- 客户端性能对比测试逻辑 ---

function clientAverage(arr) {
    if (!arr || arr.length === 0) return 0;
    return arr.reduce((a, b) => a + b, 0) / arr.length;
}

async function runClientSingleFirestoreTest() {
    const results = {
        writeLatencies: [], readLatencies: [], queryLatency: 0, deleteLatencies: [], totalTime: 0,
        stats: {} 
    };
    const testCollectionRef = collection(firestore, 'clientCompareLatencyFs');
    const docId = `test_${Date.now()}`;
    const docRef = doc(testCollectionRef, docId);
    const totalStart = performance.now();

    try {
        // Write
        const writeStart = performance.now();
        await setDoc(docRef, { timestamp: serverTimestamp(), value: Math.random(), testTime: new Date().toISOString() });
        results.writeLatencies.push(performance.now() - writeStart);

        // Read
        const readStart = performance.now();
        await getDoc(docRef);
        results.readLatencies.push(performance.now() - readStart);

        // Query (simulated by reading again, as client-side query for one doc isn't a typical batch query)
        const queryStart = performance.now();
        await getDoc(docRef);
        results.queryLatency = performance.now() - queryStart;

        // Delete
        const deleteStart = performance.now();
        await deleteDoc(docRef);
        results.deleteLatencies.push(performance.now() - deleteStart);

    } catch (e) {
        log(`Client Firestore Test Error: ${e.message}`, 'error');
        throw e; // Propagate error
    }
    results.totalTime = performance.now() - totalStart;
    results.stats = {
        avgWrite: clientAverage(results.writeLatencies),
        avgRead: clientAverage(results.readLatencies),
        avgDelete: clientAverage(results.deleteLatencies),
        // min/max can be added if multiple iterations are done, for now it's single op
    };
    return results;
}

async function runClientSingleRealtimeDBTest() {
    const results = {
        writeLatencies: [], readLatencies: [], queryLatency: 0, deleteLatencies: [], totalTime: 0,
        stats: {}
    };
    const testPath = `clientCompareLatencyRtdb/test_${Date.now()}`;
    const dbRef = ref(database, testPath);
    const totalStart = performance.now();

    try {
        // Write
        const writeStart = performance.now();
        await set(dbRef, { timestamp: rtdbServerTimestamp(), value: Math.random(), testTime: new Date().toISOString() });
        results.writeLatencies.push(performance.now() - writeStart);

        // Read
        const readStart = performance.now();
        await get(dbRef);
        results.readLatencies.push(performance.now() - readStart);

        // Query (simulated by reading again)
        const queryStart = performance.now();
        await get(dbRef);
        results.queryLatency = performance.now() - queryStart;

        // Delete
        const deleteStart = performance.now();
        await remove(dbRef);
        results.deleteLatencies.push(performance.now() - deleteStart);

    } catch (e) {
        log(`Client RealtimeDB Test Error: ${e.message}`, 'error');
        throw e;
    }
    results.totalTime = performance.now() - totalStart;
    results.stats = {
        avgWrite: clientAverage(results.writeLatencies),
        avgRead: clientAverage(results.readLatencies),
        avgDelete: clientAverage(results.deleteLatencies),
    };
    return results;
}

function displayClientMetrics(metricsDiv, stats, totalTime) {
    if (!stats) {
        metricsDiv.innerHTML = '<p>测试失败或无数据。</p>';
        return;
    }
    metricsDiv.innerHTML = `
        <div class="metric"><span class="metric-label">平均写入:</span><span class="metric-value">${formatLatency(stats.avgWrite || 0)}</span></div>
        <div class="metric"><span class="metric-label">平均读取:</span><span class="metric-value">${formatLatency(stats.avgRead || 0)}</span></div>
        <div class="metric"><span class="metric-label">查询耗时:</span><span class="metric-value">${formatLatency(stats.queryLatency || 0)}</span></div>
        <div class="metric"><span class="metric-label">平均删除:</span><span class="metric-value">${formatLatency(stats.avgDelete || 0)}</span></div>
        <hr>
        <div class="metric"><span class="metric-label">总耗时:</span><span class="metric-value">${formatLatency(totalTime || 0)}</span></div>
    `;
}

async function runClientComparisonTests() {
    log('开始客户端性能对比测试 (Firestore & RealtimeDB)...', 'info');
    elements.runClientComparisonTestButton.disabled = true;
    elements.clientTestProgressDiv.style.display = 'block';
    elements.clientComparisonResultsDiv.style.display = 'none';

    let firestoreResult, realtimeResult;
    const allResults = {};

    try {
        log('客户端 Firestore 测试中...', 'info');
        firestoreResult = await runClientSingleFirestoreTest();
        allResults.firestore = { totalStats: firestoreResult.stats, totalTime: firestoreResult.totalTime };
        displayClientMetrics(elements.clientFirestoreMetricsDiv, firestoreResult.stats, firestoreResult.totalTime);
        log('客户端 Firestore 测试完成', 'success');
    } catch (e) {
        log(`客户端 Firestore 测试失败: ${e.message}`, 'error');
        elements.clientFirestoreMetricsDiv.innerHTML = '<p>测试失败</p>';
        allResults.firestore = { totalStats: {avgWrite: Infinity, avgRead: Infinity, avgDelete: Infinity, queryLatency: Infinity}, totalTime: Infinity }; 
    }

    try {
        log('客户端 RealtimeDB 测试中...', 'info');
        realtimeResult = await runClientSingleRealtimeDBTest();
        allResults.realtime = { totalStats: realtimeResult.stats, totalTime: realtimeResult.totalTime };
        displayClientMetrics(elements.clientRealtimeMetricsDiv, realtimeResult.stats, realtimeResult.totalTime);
        log('客户端 RealtimeDB 测试完成', 'success');
    } catch (e) {
        log(`客户端 RealtimeDB 测试失败: ${e.message}`, 'error');
        elements.clientRealtimeMetricsDiv.innerHTML = '<p>测试失败</p>';
        allResults.realtime = { totalStats: {avgWrite: Infinity, avgRead: Infinity, avgDelete: Infinity, queryLatency: Infinity}, totalTime: Infinity };
    }

    let comparisonText = '<h4>客户端性能对比 (Firestore vs RealtimeDB)</h4>';
    const contenders = [];
    if (allResults.firestore && allResults.firestore.totalTime !== Infinity) contenders.push({ name: 'Firestore', time: allResults.firestore.totalTime });
    if (allResults.realtime && allResults.realtime.totalTime !== Infinity) contenders.push({ name: 'Realtime DB', time: allResults.realtime.totalTime });

    if (contenders.length > 0) {
        contenders.sort((a, b) => a.time - b.time);
        if (contenders.length > 1) {
            comparisonText += `<p><strong>总体最快:</strong> ${contenders[0].name} (${formatLatency(contenders[0].time)})</p><ul>`;
            contenders.forEach((c, i) => {
                comparisonText += `<li>${i + 1}. ${c.name}: ${formatLatency(c.time)}</li>`;
            });
            comparisonText += '</ul>';
        } else if (contenders.length === 1) {
            comparisonText += `<p>${contenders[0].name} 测试完成: ${formatLatency(contenders[0].time)}</p>`;
        }
    } else {
        comparisonText += '<p>未能完成足够的测试以进行比较。</p>';
    }
    elements.clientOverallComparisonDiv.innerHTML = comparisonText;

    elements.clientComparisonResultsDiv.style.display = 'block';
    elements.clientTestProgressDiv.style.display = 'none';
    elements.runClientComparisonTestButton.disabled = false;
}

// 事件监听器
elements.runServerTest.addEventListener('click', runServerPerformanceTest);
elements.runRealtimeTest.addEventListener('click', runRealtimePerformanceTest);
elements.runClientComparisonTestButton.addEventListener('click', runClientComparisonTests);

log('Firebase 客户端/服务器端测试应用已初始化', 'success');
log('Cloud Functions 已部署成功！现在可以运行测试了', 'success');