以下是我如何为 GitHub 自述文件创建实时 Discord 徽章的方法🌠

🎯 Discord 直播成员计数徽章

大家好，我又带着新项目回来了。这次，我制作了一个实时显示的Discord徽章，可以显示成员总数。

在这篇博客中，我将与大家分享：

我为什么要建造这个？
为什么要在 GitHub 自述文件中添加动态 Discord 徽章？
逐步指南，教您如何将此徽章添加到 GitHub README 文件中，包括如何自定义它。
我如何处理 Discord 实时数据，添加 Redis 缓存，管理速率限制，并使其速度更快。

那么，开始吧。3… 2… 1… 🌱

我为什么要建造这个？

我想就此讲个很短的故事。我所在的公司想让我在他们的 GitHub README 文件中添加一个动态的 Discord 徽章，用来显示成员总数。

我尝试在网上搜索。经过一番搜索，我发现 Discord 已经提供了一个“服务器小部件 JSON API”。为此，你需要进入 Discord 服务器设置 > 互动，然后启用该小部件，就能找到 API 链接和服务器 ID 了。

您可以使用此服务器 ID 创建徽章，如下所示：

[![demo](https://img.shields.io/discord/YOUR_SERVER_ID?logo=discord)](https://discord.gg/INVITE_CODE)

但问题是，它只会显示在线会员人数，而不是所有会员人数。

我尝试搜索了很多关于“如何显示所有成员数量”的信息，但没有找到任何结果。

于是，我决定自己做一个。这非常简单。当我为公司制作的时候，我意识到可能还有其他人也想要这个徽章，所以我就把它公开出来，供大家使用。

我不知道市面上是否已经有类似的徽章。我找了很多，但都很失望，所以决定自己做一个。如果您知道任何类似的徽章，或者知道任何可以实时更新的动态 Discord 徽章显示方法，请在评论区告诉我。

为什么要修改`Discord Live Members Count Badge`GitHub Readme 文件？

许多开源项目和社区希望在 GitHub README 文件中展示其 Discord 服务器的发展情况，原因如下：

社区规模越大，建立的信任度就越高。因此，展示您的 Discord 成员总数不仅可以推广您的产品，还能增强潜在用户的信任。
实时指标使你的 README 文件更具动态性，给人一种项目活跃且维护良好的感觉。
吸引贡献者和合作者。不断壮大的社区表明用户参与度高，这可以吸引更多开发者。
帮助社区管理员追踪增长情况。徽章可以让用户无需登录 Discord 即可快速查看服务器统计数据。
鼓励更多用户加入。看到带有大量数字的徽章会引发“害怕错过”（FOMO）心理，从而提高 Discord 的加入率。
提升项目可信度。就像星标和点赞数一样，社区规模也成为了一种社会认同指标。
便于比较类似项目。潜在用户可以通过直观的数据快速评估社区支持度。

最重要的一点是，“偷窥你的对手、敌人，甚至是朋友的 Discord 社群成员”。我不知道你们怎么样，反正我会这么做。你只需要他们的服务器 ID。继续阅读这篇博客，我会告诉你具体操作方法。（我并不提倡这种行为。这很不好。不过，我不在乎。😂）

分步指南：如何`Discord Live Members Count Badge`在 GitHub README 文件中添加内容

让我们在 5 分钟内帮你设置好 Discord 徽章！

步骤 1：将其添加`Live Count Bot`到您的服务器

首先，你需要邀请我的机器人加入你的Discord服务器：

🤖 点击这里添加机器人

该机器人仅需极少的权限：

查看频道（以访问您的服务器）
管理频道（用于成员计数）

步骤 2：启用服务器小部件

这至关重要——如果没有这一步，你的徽章将无法正常工作！

右键单击服务器名称 →服务器设置
导航至“互动” → “服务器小部件”
启用“启用服务器小部件”选项
复制您的服务器 ID（您之后会用到它！）

仍然遇到困难？请参阅此处的文档。

如果你不是 Discord 服务器的核心成员怎么办？上述选项仅对服务器所有者、管理员和版主（有时）可见。但如果你既不是他们也不是，却仍然想要添加此徽章呢？还记得我之前提到的“抢先预览”功能吗？我们会在这里应用它。

如果您不是核心会员，但仍想添加此徽章或想抢先预览，请按照以下步骤操作：

打开用户设置
导航至高级
启用“开发者模式”选项
现在，右键单击任意服务器，即可看到“复制服务器 ID”选项。

注意： 该服务器必须有在线成员计数。

步骤 3. 自定义您的徽章

让我们尽量快速简便地完成这件事。

复制此模板，在相应位置添加您的服务器 ID 和邀请链接（可选，但很重要），然后将其粘贴到您的 GitHub Readme 中。

[![discord members](https://discord-live-members-count-badge.vercel.app/api/discord-members?guildId=YOUR_SERVER_ID_HERE)](https://discord.gg/YOUR_NEVER_EXPIRY_INVITE_CODE_HERE)

它会显示 Discord 成员总数（包括机器人）。

我创建了多个端点，请点击此处查看：

您可以通过此链接查看端点：

Discord成员：

  https://discord-live-members-count-badge.vercel.app/api/discord-members?guildId=YOUR_SERVER_ID_HERE

2. Discord 机器人：

  https://discord-live-members-count-badge.vercel.app/api/discord-bots?guildId=YOUR_SERVER_ID_HERE

3. Discord 总计：

  https://discord-live-members-count-badge.vercel.app/api/discord-total?guildId=YOUR_SERVER_ID_HERE

但是，您想进行更多自定义吗？
没问题，我添加了三个额外的参数，让您可以更灵活地进行自定义。

颜色（可选）- 十六进制颜色值#（默认值：7289DA）
标签（可选）- 自定义文本标签（默认值：因端点而异）
缩放比例（可选）- 尺寸倍数，范围从 0.5 到 10.0（默认值：1）

您可以将它们用作：
徽章代码：

[![discord members](https://discord-live-members-count-badge.vercel.app/api/discord-members?guildId=YOUR_SERVER_ID&color=27ae60&label=Users&scale=2)](https://discord.gg/your-invite)

终点：

https://discord-live-members-count-badge.vercel.app/api/discord-members?guildId=YOUR_SERVER_ID&color=27ae60&label=Users&scale=2

输出：

其他端点也一样。顺便说一句，粉色是我最喜欢的颜色。我也不知道自己为什么会做一个绿色的徽章。也许是魔鬼让我这么做的吧。

你可能会感到沮丧，因为你需要多次更改颜色和缩放比例才能获得最佳效果。每次都需要等待页面重新加载或按下快捷键enter。

为了再次成为你的英雄，我还搭建了这个网站。

Discord徽章

在你的 GitHub README 文件中添加美观的、实时显示的 Discord 成员数量徽章。

discord-live-members-count-badge.vercel.app

界面简洁明了。但有两点需要注意：

1.徽章生成器

很简单，添加您的服务器 ID 和邀请链接。点击“生成”，您的徽章就会生成。直接复制粘贴到 readme 文件中即可。

2. 互动游乐场

不想手动自定义徽章？我搭建了一个交互式平台，你可以在这里：

🎨 从预设颜色中选择或使用自定义十六进制代码
📝 编辑标签并实时预览
📏使用可视化滑块调整缩放比例
📋 复制可直接使用的Markdown 代码

🚀 试试游乐场

我是如何建造它的？

在本节中，我将尝试解释我是如何构建这个Web应用程序的。

第一步：创建 Discord 机器人

前往Discord 开发者门户
创建新应用程序
前往机器人部分
创建一个机器人并复制令牌
请使用以下权限邀请机器人加入您的服务器：
- 查看频道
- 管理频道

在特权网关意图中，Presence Intent必须Server Members Intent启用。

机器人权限：
在这种情况下，机器人只需要最少的权限：

查看频道（1024）
管理频道（16）

总权限整数：1040

步骤 2. 路由和 API

`discord-members`API

它使用 Discord 的端点获取大致的成员数量/guilds/{guildId}?with_counts=true。

const r = await axios.get(`https://discord.com/api/v10/guilds/${guildId}?with_counts=true`, {
  headers: { Authorization: `Bot ${process.env.DISCORD_BOT_TOKEN}` },
});

*由于 API 调用具有近似性和快速性，因此该路由中未实现缓存。

`discord-bots`API

它会统计公会中使用该fetchAllMembers()工具的机器人数量。

const members = await fetchAllMembers(guildId);
const botCount = members.filter((m) => m.user.bot).length;

要点：

调用 Discord 的/guilds/{guildId}/members端点（分页）。
需要成员意图（必须启用特权意图）。
使用以下方式过滤机器人用户m.user.bot。
使用缓存来减少重复的繁重调用。（在 utils 类中）

`discord-total`API

它结合了机器人用户和人类用户的数量。

const members = await fetchAllMembers(guildId);
const botCount = members.filter((m) => m.user.bot).length;
const humanCount = members.length - botCount;

要点：

逻辑和获取方式与……相同discord-bots。
显示类似这样的综合信息22 users, 5 bots。

`fetchAllMembers`公用事业

使用 Discord 的 API 分页浏览公会的所有成员。

while (keepFetching) {
  const res = await axios.get(`https://discord.com/api/v10/guilds/${guildId}/members`, {
    headers: { Authorization: `Bot ${DISCORD_BOT_TOKEN}` },
    params: { limit: 1000, after },
  });
  ...
}

缓存：

首先尝试使用密钥访问 Redis guild:{guildId}:members。

  if (redis) {
    try {
      const cached = await redis.get(cacheKey);
      if (cached) {
        console.log(`[Cache] HIT for ${guildId}`);
        return JSON.parse(cached);
      } else {
        console.log(`[Cache] MISS for ${guildId}`);
      }
    } catch (err) {
      console.warn(`[Cache] Redis error on GET: ${err.message}`);
    }
  }

如果缓存未命中，则从 Discord 获取并缓存结果。
TTL 由环境变量控制CACHE_TTL（默认值为 300 秒）。

速率限制处理：

如果 API 返回 429，则等待retry_after几秒钟，然后重试。
在请求之间添加参数setTimeout以避免达到限制。

if (err.response?.status === 429) {
  const retryAfter = err.response.data?.retry_after || 1;
  await new Promise((r) => setTimeout(r, retryAfter * 1000));
  continue;
}

徽章生成

所有路由都使用以下badge-maker软件包：

let svg = makeBadge({
  label,
  message,
  color,
  style: 'flat',
  logoBase64: `data:image/svg+xml;base64,${discordLogoBase64}`,
});

缩放：可选scale参数，用于调整徽章大小。

if (scale !== 1) {
  svg = svg
    .replace(/<svg([^>]+?)width="(\d+)" height="(\d+)"/, ...)
    .replace(/<svg[^>]*>/, `$1<g transform="scale(${scale})">`)
    .replace(/<\/svg>/, '</g></svg>');
}