comparison-app.js

// 导入 Firebase SDK
import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js';
import { 
    getFirestore, 
    collection, 
    doc,
    setDoc,
    getDoc,
    getDocs,
    onSnapshot,
    deleteDoc,
    query,
    limit,
    serverTimestamp 
} from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js';
import { 
    getDatabase, 
    ref, 
    set, 
    get, 
    onValue,
    off,
    remove,
    serverTimestamp as rtdbServerTimestamp
} from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-database.js';

// Firebase 配置
const firebaseConfig = {
    apiKey: "AIzaSyCgPr_TvDPATRqUTdSwJ_ZmsWyq5_SzB-M",
    authDomain: "taptap-ugc.firebaseapp.com",
    databaseURL: "https://taptap-ugc-default-rtdb.asia-southeast1.firebasedatabase.app",
    projectId: "taptap-ugc",
    storageBucket: "taptap-ugc.firebasestorage.app",
    messagingSenderId: "519191676565",
    appId: "1:519191676565:web:7f8bea75462d53c995fd9c",
    measurementId: "G-QF5PSQG1NH"
};

// 初始化 Firebase
const app = initializeApp(firebaseConfig);
const firestore = getFirestore(app);
const realtimeDb = getDatabase(app);

// 测试结果存储
let testResults = {
    firestore: [],
    realtime: []
};

// DOM 元素
const elements = {
    startTest: document.getElementById('startTest'),
    clearResults: document.getElementById('clearResults'),
    testSize: document.getElementById('testSize'),
    testRounds: document.getElementById('testRounds'),
    firestoreStatus: document.getElementById('firestoreStatus'),
    realtimeStatus: document.getElementById('realtimeStatus'),
    firestoreProgress: document.getElementById('firestoreProgress'),
    realtimeProgress: document.getElementById('realtimeProgress'),
    firestoreResults: document.getElementById('firestoreResults'),
    realtimeResults: document.getElementById('realtimeResults'),
    comparisonChart: document.getElementById('comparisonChart'),
    summaryResults: document.getElementById('summaryResults'),
    startRealtimeTest: document.getElementById('startRealtimeTest'),
    stopRealtimeTest: document.getElementById('stopRealtimeTest'),
    firestoreRealtimeCount: document.getElementById('firestoreRealtimeCount'),
    realtimeDbCount: document.getElementById('realtimeDbCount'),
    firestoreRealtimeTime: document.getElementById('firestoreRealtimeTime'),
    realtimeDbTime: document.getElementById('realtimeDbTime')
};

// 更新连接状态
function updateStatus(database, isConnected) {
    const statusEl = database === 'firestore' ? elements.firestoreStatus : elements.realtimeStatus;
    const indicator = statusEl.querySelector('.status-indicator');
    const text = statusEl.querySelector('.status-text');
    
    if (isConnected) {
        indicator.classList.add('connected');
        indicator.classList.remove('disconnected');
        text.textContent = '已连接';
    } else {
        indicator.classList.remove('connected');
        indicator.classList.add('disconnected');
        text.textContent = '未连接';
    }
}

// Firestore 测试函数
async function testFirestore(dataSize, round) {
    const results = {
        writeLatencies: [],
        readLatencies: [],
        batchReadLatency: 0,
        deleteLatencies: []
    };
    
    const testCollection = collection(firestore, 'performanceTest');
    const docIds = [];
    
    // 批量写入测试
    updateProgress('firestore', `第 ${round} 轮：写入 ${dataSize} 条数据...`);
    for (let i = 0; i < dataSize; i++) {
        const docId = `test_${Date.now()}_${i}`;
        docIds.push(docId);
        const docRef = doc(testCollection, docId);
        
        const startTime = performance.now();
        await setDoc(docRef, {
            timestamp: serverTimestamp(),
            value: Math.random(),
            index: i,
            testRound: round
        });
        const endTime = performance.now();
        results.writeLatencies.push(endTime - startTime);
    }
    
    // 批量读取测试
    updateProgress('firestore', `第 ${round} 轮：读取 ${dataSize} 条数据...`);
    for (const docId of docIds) {
        const docRef = doc(testCollection, docId);
        const startTime = performance.now();
        await getDoc(docRef);
        const endTime = performance.now();
        results.readLatencies.push(endTime - startTime);
    }
    
    // 查询测试
    updateProgress('firestore', `第 ${round} 轮：批量查询测试...`);
    const q = query(testCollection, limit(dataSize));
    const startBatch = performance.now();
    await getDocs(q);
    const endBatch = performance.now();
    results.batchReadLatency = endBatch - startBatch;
    
    // 清理数据
    updateProgress('firestore', `第 ${round} 轮：清理数据...`);
    for (const docId of docIds) {
        const docRef = doc(testCollection, docId);
        const startTime = performance.now();
        await deleteDoc(docRef);
        const endTime = performance.now();
        results.deleteLatencies.push(endTime - startTime);
    }
    
    return results;
}

// Realtime Database 测试函数
async function testRealtimeDatabase(dataSize, round) {
    const results = {
        writeLatencies: [],
        readLatencies: [],
        batchReadLatency: 0,
        deleteLatencies: []
    };
    
    const testRef = ref(realtimeDb, 'performanceTest');
    const keys = [];
    
    // 批量写入测试
    updateProgress('realtime', `第 ${round} 轮：写入 ${dataSize} 条数据...`);
    for (let i = 0; i < dataSize; i++) {
        const key = `test_${Date.now()}_${i}`;
        keys.push(key);
        const dataRef = ref(realtimeDb, `performanceTest/${key}`);
        
        const startTime = performance.now();
        await set(dataRef, {
            timestamp: rtdbServerTimestamp(),
            value: Math.random(),
            index: i,
            testRound: round
        });
        const endTime = performance.now();
        results.writeLatencies.push(endTime - startTime);
    }
    
    // 批量读取测试
    updateProgress('realtime', `第 ${round} 轮：读取 ${dataSize} 条数据...`);
    for (const key of keys) {
        const dataRef = ref(realtimeDb, `performanceTest/${key}`);
        const startTime = performance.now();
        await get(dataRef);
        const endTime = performance.now();
        results.readLatencies.push(endTime - startTime);
    }
    
    // 批量查询测试
    updateProgress('realtime', `第 ${round} 轮：批量查询测试...`);
    const startBatch = performance.now();
    await get(testRef);
    const endBatch = performance.now();
    results.batchReadLatency = endBatch - startBatch;
    
    // 清理数据
    updateProgress('realtime', `第 ${round} 轮：清理数据...`);
    for (const key of keys) {
        const dataRef = ref(realtimeDb, `performanceTest/${key}`);
        const startTime = performance.now();
        await remove(dataRef);
        const endTime = performance.now();
        results.deleteLatencies.push(endTime - startTime);
    }
    
    return results;
}

// 更新进度
function updateProgress(database, message) {
    const progressEl = database === 'firestore' ? elements.firestoreProgress : elements.realtimeProgress;
    progressEl.textContent = message;
}

// 计算平均值
function average(arr) {
    return arr.reduce((a, b) => a + b, 0) / arr.length;
}

// 显示测试结果
function displayResults(database, results) {
    const resultsEl = database === 'firestore' ? elements.firestoreResults : elements.realtimeResults;
    
    const avgWrite = average(results.writeLatencies);
    const avgRead = average(results.readLatencies);
    const avgDelete = average(results.deleteLatencies);
    
    const html = `
        <div class="result-item">
            <h4>平均延迟</h4>
            <ul>
                <li>写入: <strong>${avgWrite.toFixed(2)} ms</strong></li>
                <li>读取: <strong>${avgRead.toFixed(2)} ms</strong></li>
                <li>批量查询: <strong>${results.batchReadLatency.toFixed(2)} ms</strong></li>
                <li>删除: <strong>${avgDelete.toFixed(2)} ms</strong></li>
            </ul>
        </div>
    `;
    
    resultsEl.innerHTML = html;
    return { avgWrite, avgRead, avgDelete, batchRead: results.batchReadLatency };
}

// 绘制对比图表
function drawComparisonChart(firestoreData, realtimeData) {
    const categories = ['写入', '读取', '批量查询', '删除'];
    const firestoreValues = [
        firestoreData.avgWrite,
        firestoreData.avgRead,
        firestoreData.batchRead,
        firestoreData.avgDelete
    ];
    const realtimeValues = [
        realtimeData.avgWrite,
        realtimeData.avgRead,
        realtimeData.batchRead,
        realtimeData.avgDelete
    ];
    
    // 简单的条形图
    let maxValue = Math.max(...firestoreValues, ...realtimeValues);
    let html = '<div class="chart">';
    
    categories.forEach((category, index) => {
        const firestorePercent = (firestoreValues[index] / maxValue) * 100;
        const realtimePercent = (realtimeValues[index] / maxValue) * 100;
        
        html += `
            <div class="chart-group">
                <div class="chart-label">${category}</div>
                <div class="chart-bars">
                    <div class="bar-row">
                        <span class="bar-label">Firestore</span>
                        <div class="bar firestore-bar" style="width: ${firestorePercent}%"></div>
                        <span class="bar-value">${firestoreValues[index].toFixed(2)} ms</span>
                    </div>
                    <div class="bar-row">
                        <span class="bar-label">Realtime DB</span>
                        <div class="bar realtime-bar" style="width: ${realtimePercent}%"></div>
                        <span class="bar-value">${realtimeValues[index].toFixed(2)} ms</span>
                    </div>
                </div>
            </div>
        `;
    });
    
    html += '</div>';
    elements.comparisonChart.innerHTML = html;
    
    // 显示总结
    const summary = `
        <h3>测试总结</h3>
        <p>基于 ${elements.testSize.value} 条数据，${elements.testRounds.value} 轮测试的平均结果：</p>
        <ul>
            <li>写入性能：${firestoreData.avgWrite < realtimeData.avgWrite ? 'Firestore' : 'Realtime Database'} 更快 (相差 ${Math.abs(firestoreData.avgWrite - realtimeData.avgWrite).toFixed(2)} ms)</li>
            <li>读取性能：${firestoreData.avgRead < realtimeData.avgRead ? 'Firestore' : 'Realtime Database'} 更快 (相差 ${Math.abs(firestoreData.avgRead - realtimeData.avgRead).toFixed(2)} ms)</li>
            <li>批量查询：${firestoreData.batchRead < realtimeData.batchRead ? 'Firestore' : 'Realtime Database'} 更快 (相差 ${Math.abs(firestoreData.batchRead - realtimeData.batchRead).toFixed(2)} ms)</li>
        </ul>
    `;
    elements.summaryResults.innerHTML = summary;
}

// 主测试函数
async function runPerformanceTest() {
    const dataSize = parseInt(elements.testSize.value);
    const rounds = parseInt(elements.testRounds.value);
    
    elements.startTest.disabled = true;
    testResults = { firestore: [], realtime: [] };
    
    // 清空之前的结果
    elements.firestoreResults.innerHTML = '';
    elements.realtimeResults.innerHTML = '';
    elements.comparisonChart.innerHTML = '';
    elements.summaryResults.innerHTML = '';
    
    updateStatus('firestore', true);
    updateStatus('realtime', true);
    
    let allFirestoreResults = {
        writeLatencies: [],
        readLatencies: [],
        batchReadLatency: 0,
        deleteLatencies: []
    };
    
    let allRealtimeResults = {
        writeLatencies: [],
        readLatencies: [],
        batchReadLatency: 0,
        deleteLatencies: []
    };
    
    // 执行多轮测试
    for (let round = 1; round <= rounds; round++) {
        // 并行测试两个数据库
        const [firestoreResult, realtimeResult] = await Promise.all([
            testFirestore(dataSize, round),
            testRealtimeDatabase(dataSize, round)
        ]);
        
        // 累积结果
        allFirestoreResults.writeLatencies.push(...firestoreResult.writeLatencies);
        allFirestoreResults.readLatencies.push(...firestoreResult.readLatencies);
        allFirestoreResults.batchReadLatency += firestoreResult.batchReadLatency;
        allFirestoreResults.deleteLatencies.push(...firestoreResult.deleteLatencies);
        
        allRealtimeResults.writeLatencies.push(...realtimeResult.writeLatencies);
        allRealtimeResults.readLatencies.push(...realtimeResult.readLatencies);
        allRealtimeResults.batchReadLatency += realtimeResult.batchReadLatency;
        allRealtimeResults.deleteLatencies.push(...realtimeResult.deleteLatencies);
    }
    
    // 计算平均批量读取时间
    allFirestoreResults.batchReadLatency /= rounds;
    allRealtimeResults.batchReadLatency /= rounds;
    
    // 显示结果
    const firestoreAvg = displayResults('firestore', allFirestoreResults);
    const realtimeAvg = displayResults('realtime', allRealtimeResults);
    
    // 绘制对比图表
    drawComparisonChart(firestoreAvg, realtimeAvg);
    
    updateProgress('firestore', '测试完成');
    updateProgress('realtime', '测试完成');
    
    elements.startTest.disabled = false;
}

// 实时监听测试
let firestoreUnsubscribe = null;
let realtimeUnsubscribe = null;
let firestoreUpdateCount = 0;
let realtimeUpdateCount = 0;
let realtimeTestInterval = null;

async function startRealtimeTest() {
    elements.startRealtimeTest.disabled = true;
    elements.stopRealtimeTest.disabled = false;
    
    firestoreUpdateCount = 0;
    realtimeUpdateCount = 0;
    
    // Firestore 实时监听
    const firestoreTestDoc = doc(firestore, 'realtimeTest', 'testDoc');
    let firestoreFirstUpdate = true;
    firestoreUnsubscribe = onSnapshot(firestoreTestDoc, (doc) => {
        if (!firestoreFirstUpdate) {
            firestoreUpdateCount++;
            elements.firestoreRealtimeCount.textContent = firestoreUpdateCount;
            elements.firestoreRealtimeTime.textContent = new Date().toLocaleTimeString('zh-CN');
        }
        firestoreFirstUpdate = false;
    });
    
    // Realtime Database 实时监听
    const realtimeTestRef = ref(realtimeDb, 'realtimeTest/testDoc');
    let realtimeFirstUpdate = true;
    realtimeUnsubscribe = onValue(realtimeTestRef, (snapshot) => {
        if (!realtimeFirstUpdate) {
            realtimeUpdateCount++;
            elements.realtimeDbCount.textContent = realtimeUpdateCount;
            elements.realtimeDbTime.textContent = new Date().toLocaleTimeString('zh-CN');
        }
        realtimeFirstUpdate = false;
    });
    
    // 定期更新数据以触发监听
    realtimeTestInterval = setInterval(async () => {
        const testData = {
            timestamp: Date.now(),
            value: Math.random()
        };
        
        // 同时更新两个数据库
        await Promise.all([
            setDoc(firestoreTestDoc, testData),
            set(realtimeTestRef, testData)
        ]);
    }, 2000); // 每2秒更新一次
}

function stopRealtimeTest() {
    elements.startRealtimeTest.disabled = false;
    elements.stopRealtimeTest.disabled = true;
    
    // 取消监听
    if (firestoreUnsubscribe) {
        firestoreUnsubscribe();
        firestoreUnsubscribe = null;
    }
    
    if (realtimeUnsubscribe) {
        off(ref(realtimeDb, 'realtimeTest/testDoc'));
        realtimeUnsubscribe = null;
    }
    
    // 停止定期更新
    if (realtimeTestInterval) {
        clearInterval(realtimeTestInterval);
        realtimeTestInterval = null;
    }
}

// 事件监听器
elements.startTest.addEventListener('click', runPerformanceTest);
elements.clearResults.addEventListener('click', () => {
    elements.firestoreResults.innerHTML = '';
    elements.realtimeResults.innerHTML = '';
    elements.comparisonChart.innerHTML = '';
    elements.summaryResults.innerHTML = '';
    elements.firestoreProgress.textContent = '';
    elements.realtimeProgress.textContent = '';
});
elements.startRealtimeTest.addEventListener('click', startRealtimeTest);
elements.stopRealtimeTest.addEventListener('click', stopRealtimeTest);

// 初始化状态
updateStatus('firestore', false);
updateStatus('realtime', false);

console.log('Firebase 数据库对比测试应用已初始化');