网站展示Discord服务器实时统计数据失败：API地址及代码排查

我来帮你搞定这个问题！你的代码主要存在几个关键问题：对API返回的数据结构理解有误、字段名不匹配，还有Discord Widget API本身的功能限制，下面一步步给你修正：

问题拆解 #

1. 数据结构误用：Discord Widget API返回的是单个对象，不是数组，你不需要用data[0]来访问属性。
2. 字段名不匹配：你写的membercount、onlineusers等字段，和API实际返回的字段名完全不一样。
3. API功能限制：公开的Widget API不提供服务器Boost数量，要获取这个数据得用Discord Bot API（需要创建机器人并授权到你的服务器）。
4. 语法小错误：你的代码里updatePage函数未定义，还有函数闭合不完整的问题。

修正后的完整代码 #

HTML（先移除硬编码的固定数字） #

<div class="right-info">
  <ul>
    <li>
      <i class="fa fa-user"></i>成员：<div id="membercount"></div>
    </li>
    <li>
      <i class="fa fa-user"></i>在线：<div id="onlineusers"></div>
    </li>
    <li>
      <i class="fa-solid fa-gear"></i>语音聊天：<div id="vcusers"></div>
    </li>
    <li>
      <i class="fa-solid fa-gift"></i>服务器Boost：<div id="serverboosts"></div>
    </li>
  </ul>
</div>

JavaScript（修复Fetch逻辑与数据处理） #

// 定义获取服务器统计数据的函数
function fetchDiscordStats() {
  // 替换成你的Discord服务器ID
  const guildId = "1038123472007737375";
  
  fetch(`https://discord.com/api/guilds/${guildId}/widget.json`)
    .then(response => {
      if (!response.ok) throw new Error("无法连接到Discord服务器");
      return response.json();
    })
    .then(data => {
      console.log("获取到的Discord数据：", data);
      
      // 填充总成员数
      document.getElementById('membercount').textContent = data.member_count;
      
      // 填充在线用户数
      document.getElementById('onlineusers').textContent = data.presence_count;
      
      // 计算语音频道在线人数：遍历所有语音频道（type=2），累加成员数
      let vcTotal = 0;
      data.channels.forEach(channel => {
        if (channel.type === 2) { // 2是Discord语音频道的类型标识
          vcTotal += channel.members.length;
        }
      });
      document.getElementById('vcusers').textContent = vcTotal;
      
      // 注意：Widget API不返回Boost数，这里先提示，或参考下方Bot API方案
      // 如果要获取Boost数，需要用Discord Bot API（示例代码仅作参考）：
      // fetch(`https://discord.com/api/guilds/${guildId}`, {
      //   headers: { "Authorization": "Bot 你的机器人Token" }
      // }).then(res => res.json()).then(guildData => {
      //   document.getElementById('serverboosts').textContent = guildData.premium_subscription_count;
      // });
      document.getElementById('serverboosts').textContent = "需Bot API获取";
    })
    .catch(error => {
      console.error("数据获取失败：", error);
      // 出错时显示友好提示
      document.getElementById('membercount').textContent = "加载失败";
      document.getElementById('onlineusers').textContent = "加载失败";
      document.getElementById('vcusers').textContent = "加载失败";
      document.getElementById('serverboosts').textContent = "加载失败";
    });
}

// 页面加载时先获取一次数据
fetchDiscordStats();

// 设置定时器每5分钟更新一次（不要太频繁，避免触发Discord API频率限制）
setInterval(fetchDiscordStats, 300000); // 300000毫秒 = 5分钟

重要补充说明 #

• 服务器Boost数获取方式：公开Widget API没有这个字段，必须通过Bot API实现。你需要在Discord开发者门户创建机器人，邀请它到你的服务器（需要guilds.read权限），然后用机器人Token调用GET /guilds/{guildId}接口，返回的premium_subscription_count就是Boost数量。
• API调用频率：不要设置1秒一次的高频定时器，Discord有请求频率限制，5-10分钟更新一次完全足够。
• 服务器Widget设置：确保你的Discord服务器已经开启了Widget功能（服务器设置 → 集成 → 服务器Widget → 启用），否则API会返回权限错误。

内容的提问来源于stack exchange，提问作者EliaA