基于Firebase构建聊天框的前端实现代码（中文注释版）

嗨，这是已经完成中文本地化的Firebase Auth + Realtime Database聊天框前端实现代码，所有英文提示、注释都换成了中文，核心技术逻辑完全保留：

核心功能清单 #

• 支持邮箱密码登录/注册、谷歌第三方登录
• 强制要求邮箱验证，新用户需管理员审核通过才能进入聊天
• 内置3秒防垃圾消息冷却机制
• 管理员专属：用户列表加载功能
• 实时消息同步、在线用户状态监听
• 预留收音机播放控制元素（未实现完整逻辑）

完整代码实现 #

// DOM元素获取
const authBox = document.getElementById("auth-box");
const chatWrapper = document.getElementById("chat-wrapper");
const userEmailSpan = document.getElementById("user-email");
const userRoleSpan = document.getElementById("user-role");
const adminBox = document.getElementById("adminbox");
const userList = document.getElementById("user-list");
const messagesDiv = document.getElementById("messages");
const msgInput = document.getElementById("msg-input");
const sendBtn = document.getElementById("send-btn");
const loginBtn = document.getElementById("login-btn");
const registerBtn = document.getElementById("register-btn");
const googleBtn = document.getElementById("google-btn");
const forgotBtn = document.getElementById("forgot-btn");
const authError = document.getElementById("auth-error");
const playRadioBtn = document.getElementById("play-radio");
const radioPlayer = document.getElementById("radio-player");

// 防垃圾消息机制
let lastMessageTime = 0;
const MESSAGE_COOLDOWN_MS = 3000; // 3秒冷却时间

// -------------------------------
// 认证状态监听器
// -------------------------------
auth.onAuthStateChanged(async (user) => {
  if (!user) {
    showAuth();
    return;
  }
  // 要求邮箱已验证
  if (!user.emailVerified) {
    auth.signOut();
    alert("登录前请先验证您的邮箱。");
    return;
  }
  // 加载用户角色与审核状态
  const userRef = db.ref("users/" + user.uid);
  const snapshot = await userRef.once("value");
  const data = snapshot.val() || {};
  const role = data.role || "pending"; // 默认待审核
  const approved = data.approved || false;

  userEmailSpan.textContent = user.email;
  userRoleSpan.textContent = role;

  if (!approved) {
    auth.signOut();
    alert("您的账户正在等待审核，请等待管理员批准。");
    return;
  }

  if (role === "admin") {
    adminBox.classList.remove("hidden");
    loadUsersForAdmin();
  } else {
    adminBox.classList.add("hidden");
  }

  showChat();
  listenMessages();
  setupOnlineUsers(user);
});

// -------------------------------
// 界面显示控制
// -------------------------------
function showAuth() {
  authBox.classList.remove("hidden");
  chatWrapper.classList.add("hidden");
}
function showChat() {
  authBox.classList.add("hidden");
  chatWrapper.classList.remove("hidden");
}

// -------------------------------
// 登录/注册/谷歌登录功能
// -------------------------------
loginBtn.addEventListener("click", async () => {
  const email = document.getElementById("email").value;
  const pass = document.getElementById("password").value;
  try {
    await auth.signInWithEmailAndPassword(email, pass);
  } catch (err) {
    authError.textContent = err.message;
  }
});

registerBtn.addEventListener("click", async () => {
  const email = document.getElementById("email").value;
  const pass = document.getElementById("password").value;
  try {
    const cred = await auth.createUserWithEmailAndPassword(email, pass);
    await cred.user.sendEmailVerification();
    // 保存用户信息
    await db.ref("users/" + cred.user.uid).set({
      email: email,
      role: "pending",
      approved: false
    });
    alert("验证邮件已发送，请查收您的收件箱。");
    auth.signOut();
  } catch (err) {
    authError.textContent = err.message;
  }
});

googleBtn.addEventListener("click", async () => {
  const provider = new firebase.auth.GoogleAuthProvider();
  try {
    const cred = await auth.signInWithPopup(provider);
    // 若为新用户则创建待审核记录
    const userRef = db.ref("users/" + cred.user.uid);
    const snapshot = await userRef.once("value");
    if (!snapshot.exists()) {
      await userRef.set({
        email: cred.user.email,
        role: "pending",
        approved: false
      });
    }
  } catch (err) {
    authError.textContent = err.message;
  }
});

forgotBtn.addEventListener("click", async () => {
  const email = document.getElementById("email").value;
  if (!email) return alert("请先输入您的邮箱。");
  try {
    await auth.sendPasswordResetEmail(email);
    alert("密码重置邮件已发送。");
  } catch (err) {
    authError.textContent = err.message;
  }
});

// -------------------------------
// 发送消息功能
// -------------------------------
sendBtn.addEventListener("click", sendMessage);
function sendMessage() {
  const user = auth.currentUser;
  if (!user) return;

  const now = Date.now();
  if (now - lastMessageTime < MESSAGE_COOLDOWN_MS) {
    alert("请慢一点，禁止发送垃圾消息！");
    return;
  }

  const text = msgInput.value.trim();
  if (!text) return;

  lastMessageTime = now;
  db.ref("messages").push({
    uid: user.uid,
    email: user.email,
    text: text,
    timestamp: now
  });
  msgInput.value = "";
}

// -------------------------------
// 监听消息更新
// -------------------------------
function listenMessages() {
  db.ref("messages").off();
  db.ref("messages").on("value", (snap) => {
    const msgs = snap.val() || {};
    messagesDiv.innerHTML = "";
    Object.keys(msgs).forEach(key => {
      const m = msgs[key];
      const row = document.createElement("div");
      row.className = "msg-row";
      row.innerHTML = `
        <b>${m.email}</b>: ${m.text}
        <span class="time">${new Date(m.timestamp).toLocaleTimeString()}</span>
      `;
      // 管理员删除功能（代码片段未完成）
      const role = userRoleSpan.textContent;
      if (role === "admin") {
        const del = document.create
      }
    });
  });
}

补充说明 #

代码中管理员删除消息的功能片段未完成，你可以补充以下逻辑完善：

// 补充管理员删除按钮示例代码
const delBtn = document.createElement("button");
delBtn.textContent = "删除";
delBtn.className = "delete-btn";
delBtn.addEventListener("click", async () => {
  await db.ref(`messages/${key}`).remove();
});
row.appendChild(delBtn);

内容的提问来源于stack exchange，提问作者Wildstyle-Radio