博客显示实时在线人数

　　给博客添加了一个实时在线人数统计，这样在我对着博客发呆的时候，看到有人进来可以不那么孤独。我选择的方案是通过 Firebase 服务。

步骤 1: 创建 Firebase 项目

步骤 2: 添加 Firebase 应用

　　复制 Firebase 配置信息，这些信息将在后面的步骤中使用。

步骤 3: 创建 Realtime Database 数据库

步骤 4: 修改数据库规则允许匿名用户访问


{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

　　注意这里放开了数据库权限，理论上任何人都可以修改写入删除数据，但是这仅仅是一个在线人数统计服务，安全性要求不高，所以请单独创建本项目，不要和其他生产环境的项目混在一起。

步骤 5: 开启匿名用户验证权限

　　项目首页选择 Authentication，在登录方法里启用匿名登录。

步骤 6: 初始化 Firebase

　　在你的 HTML 文件中，添加 Firebase SDK 和初始化代码。


<!doctype html>
<html>
<head>
  <!-- Firebase App (the core Firebase SDK) -->
  <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
  <!-- Firebase Authentication -->
  <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js"></script>
  <!-- Firebase Realtime Database -->
  <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-database.js"></script>
</head>
<body>
  <div>
    实时在线人数: <span id="userCount"></span>人
  </div>

  <script>
    // Your web app's Firebase configuration
    var firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_AUTH_DOMAIN",
      databaseURL: "YOUR_DATABASE_URL",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_STORAGE_BUCKET",
      messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
      appId: "YOUR_APP_ID"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);

    // 获取在线用户数引用
    var onlineRef = firebase.database().ref('online');

    // 匿名登录
    firebase.auth().signInAnonymously().catch(function(error) {
      console.error('Anonymous sign-in failed:', error);
    });

    // 监听认证状态变化
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        // 用户已登录
        var uid = user.uid;
        var userRef = onlineRef.child(uid);
        userRef.set(true);
        userRef.onDisconnect().remove();

        // 监听数据变化
        onlineRef.on('value', function(snapshot) {
          console.log(snapshot.val()); // 打印获取到的数据
          document.getElementById('userCount').innerText = snapshot.numChildren();
        });
      } else {
        // 用户未登录
        console.log('User is not signed in.');
      }
    });
  </script>
</body>
</html>

　　以上就基本完成了实时在线人数的显示，可以根据自己的主题把显示代码放入你想要的位置。缺点就是没有安全性，如果想更加安全可以采用后端验证的方式，由于我没有服务器，再加上我觉得这个项目也不那么需要安全性，就这样解决了。

　　又出现了一个新的问题，由于 Firebase 依托 GoogleAPI服务，虽然并没有完全被墙，但是访问极不稳定。有空在寻找替代方案吧

　　更换了一个方案，采用了一个折中的办法，缺点是实时变化速度没那么快了，优点是，墙内可用

The End

奕奕’s Blog