app.js

// 导入 Firebase SDK
import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js';
import { 
    getFirestore, 
    collection, 
    addDoc, 
    onSnapshot, 
    orderBy, 
    query,
    serverTimestamp,
    doc,
    setDoc,
    getDoc,
    getDocs,
    deleteDoc,
    limit
} from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js';

// Firebase 配置
// 请替换为你自己的 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 db = getFirestore(app);

// DOM 元素
const messageForm = document.getElementById('messageForm');
const messageInput = document.getElementById('messageInput');
const messagesList = document.getElementById('messagesList');
const statusText = document.getElementById('statusText');
const statusIndicator = document.querySelector('.status-indicator');

// 消息集合引用
const messagesCollection = collection(db, 'messages');

// 设置连接状态
function setConnectionStatus(isConnected) {
    if (isConnected) {
        statusText.textContent = '已连接';
        statusIndicator.classList.add('connected');
        statusIndicator.classList.remove('disconnected');
    } else {
        statusText.textContent = '连接断开';
        statusIndicator.classList.remove('connected');
        statusIndicator.classList.add('disconnected');
    }
}

// 监听消息集合的实时更新
const q = query(messagesCollection, orderBy('timestamp', 'desc'));
let isFirstLoad = true;

const unsubscribe = onSnapshot(q, 
    (querySnapshot) => {
        // 成功获取数据，更新连接状态
        setConnectionStatus(true);
        
        // 清空消息列表
        messagesList.innerHTML = '';
        
        if (querySnapshot.empty) {
            messagesList.innerHTML = '<p class="empty-message">暂无消息</p>';
            return;
        }
        
        // 渲染消息
        querySnapshot.forEach((doc) => {
            const message = doc.data();
            const messageElement = createMessageElement(message, doc.id);
            messagesList.appendChild(messageElement);
        });
        
        console.log(`收到 ${querySnapshot.size} 条消息`);
        
        if (isFirstLoad) {
            isFirstLoad = false;
            console.log('Firebase 连接成功！');
        }
    }, 
    (error) => {
        // 错误处理
        console.error('监听消息时出错:', error);
        setConnectionStatus(false);
        
        if (error.code === 'permission-denied') {
            messagesList.innerHTML = `
                <div class="error">
                    <h3>权限错误</h3>
                    <p>Firestore 安全规则阻止了访问。请按以下步骤操作：</p>
                    <ol>
                        <li>访问 <a href="https://console.firebase.google.com/project/taptap-ugc/firestore/rules" target="_blank">Firebase Console</a></li>
                        <li>将规则改为：<br>
                            <code>allow read, write: if true;</code>
                        </li>
                        <li>点击"发布"按钮</li>
                        <li>刷新此页面</li>
                    </ol>
                </div>
            `;
        } else {
            messagesList.innerHTML = `<p class="error">错误: ${error.message}</p>`;
        }
    }
);

// 创建消息元素
function createMessageElement(message, id) {
    const messageDiv = document.createElement('div');
    messageDiv.className = 'message';
    messageDiv.dataset.id = id;
    
    const contentDiv = document.createElement('div');
    contentDiv.className = 'message-content';
    contentDiv.textContent = message.content || '(空消息)';
    
    const timeDiv = document.createElement('div');
    timeDiv.className = 'message-time';
    const timestamp = message.timestamp?.toDate() || new Date();
    timeDiv.textContent = formatTime(timestamp);
    
    messageDiv.appendChild(contentDiv);
    messageDiv.appendChild(timeDiv);
    
    // 添加动画效果
    messageDiv.style.opacity = '0';
    messageDiv.style.transform = 'translateY(-10px)';
    setTimeout(() => {
        messageDiv.style.opacity = '1';
        messageDiv.style.transform = 'translateY(0)';
    }, 10);
    
    return messageDiv;
}

// 格式化时间
function formatTime(date) {
    const now = new Date();
    const diff = now - date;
    
    if (diff < 60000) { // 小于1分钟
        return '刚刚';
    } else if (diff < 3600000) { // 小于1小时
        return `${Math.floor(diff / 60000)} 分钟前`;
    } else if (diff < 86400000) { // 小于1天
        return `${Math.floor(diff / 3600000)} 小时前`;
    } else {
        return date.toLocaleString('zh-CN');
    }
}

// 处理表单提交
messageForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const content = messageInput.value.trim();
    if (!content) return;
    
    // 禁用表单
    messageInput.disabled = true;
    messageForm.querySelector('button').disabled = true;
    
    try {
        // 添加新消息到 Firestore
        await addDoc(messagesCollection, {
            content: content,
            timestamp: serverTimestamp(),
            createdAt: new Date().toISOString()
        });
        
        // 清空输入框
        messageInput.value = '';
        console.log('消息发送成功');
    } catch (error) {
        console.error('发送消息时出错:', error);
        alert('发送失败: ' + error.message);
    } finally {
        // 重新启用表单
        messageInput.disabled = false;
        messageForm.querySelector('button').disabled = false;
        messageInput.focus();
    }
});

// 页面卸载时取消订阅
window.addEventListener('beforeunload', () => {
    unsubscribe();
});

// 初始化完成
console.log('Firebase onSnapshot 测试应用已初始化');

// 延迟测试功能
async function testFirestoreLatency() {
    const testCollection = collection(db, 'testLatency');
    const testDoc = 'testDoc_' + Date.now();
    const docRef = doc(testCollection, testDoc);
    
    const results = {
        writeLatency: 0,
        readLatency: 0,
        batchReadLatency: 0,
        deleteLatency: 0,
        timestamp: new Date().toISOString()
    };
    
    try {
        // 测试写入延迟
        const writeStart = performance.now();
        await setDoc(docRef, {
            timestamp: serverTimestamp(),
            value: Math.random(),
            testTime: new Date().toISOString()
        });
        const writeEnd = performance.now();
        results.writeLatency = (writeEnd - writeStart).toFixed(2);
        console.log(`写入延迟: ${results.writeLatency} ms`);
        
        // 测试读取延迟
        const readStart = performance.now();
        const docSnap = await getDoc(docRef);
        const readEnd = performance.now();
        results.readLatency = (readEnd - readStart).toFixed(2);
        console.log(`读取延迟: ${results.readLatency} ms`);
        
        if (docSnap.exists()) {
            console.log('文档数据:', docSnap.data());
        }
        
        // 测试批量读取延迟（最多10个文档）
        const batchStart = performance.now();
        const q = query(testCollection, limit(10));
        const querySnapshot = await getDocs(q);
        const batchEnd = performance.now();
        results.batchReadLatency = (batchEnd - batchStart).toFixed(2);
        results.batchSize = querySnapshot.size;
        console.log(`批量读取 ${querySnapshot.size} 个文档延迟: ${results.batchReadLatency} ms`);
        
        // 清理：删除测试文档
        const deleteStart = performance.now();
        await deleteDoc(docRef);
        const deleteEnd = performance.now();
        results.deleteLatency = (deleteEnd - deleteStart).toFixed(2);
        console.log(`删除延迟: ${results.deleteLatency} ms`);
        
        return results;
    } catch (error) {
        console.error('延迟测试出错:', error);
        throw error;
    }
}

// 添加测试按钮到界面
const testButton = document.createElement('button');
testButton.textContent = '测试 Firestore 延迟';
testButton.style.marginTop = '10px';
testButton.onclick = async () => {
    testButton.disabled = true;
    testButton.textContent = '测试中...';
    
    try {
        const results = await testFirestoreLatency();
        
        // 显示结果
        const resultDiv = document.createElement('div');
        resultDiv.className = 'latency-results';
        resultDiv.innerHTML = `
            <h3>延迟测试结果</h3>
            <ul>
                <li>写入延迟: <strong>${results.writeLatency} ms</strong></li>
                <li>读取延迟: <strong>${results.readLatency} ms</strong></li>
                <li>批量读取延迟: <strong>${results.batchReadLatency} ms</strong> (${results.batchSize} 个文档)</li>
                <li>删除延迟: <strong>${results.deleteLatency} ms</strong></li>
                <li>测试时间: ${new Date(results.timestamp).toLocaleString('zh-CN')}</li>
            </ul>
        `;
        
        // 如果已有结果，替换它
        const existingResults = document.querySelector('.latency-results');
        if (existingResults) {
            existingResults.replaceWith(resultDiv);
        } else {
            document.querySelector('.status').parentElement.appendChild(resultDiv);
        }
    } catch (error) {
        alert('测试失败: ' + error.message);
    } finally {
        testButton.disabled = false;
        testButton.textContent = '测试 Firestore 延迟';
    }
};

// 将按钮添加到状态区域
document.querySelector('.status').parentElement.appendChild(testButton);