如何在React网站展示Discord服务器自定义内容？

核心准备工作（必做） #

所有功能都依赖Discord机器人账户和API权限，步骤如下：

• 去Discord开发者平台创建新应用，在「Bot」标签页添加机器人，开启「Privileged Gateway Intents」里的Server Members Intent、Message Content Intent、Voice States Intent（这三个是获取成员、消息、语音状态必需的）。
• 生成机器人Token，绝对不能把Token直接写在前端代码里，必须搭建一个简单后端（比如Node.js），由后端调用Discord API，前端只和你的后端接口交互。
• 生成邀请链接，给机器人分配必要权限：View Channels、Read Message History、Voice States、Server Members，然后把机器人邀请进你的服务器。
• 推荐用discord.js库开发后端机器人，它封装了大部分Discord API操作，比直接写HTTP请求简单很多。

功能1：展示语音频道时长最长的用户 #

Discord API不存储历史语音时长，需要自己统计：

• 后端用discord.js监听voiceStateUpdate事件：当用户加入语音频道时记录当前时间戳，离开时计算时长（离开时间-加入时间），把时长累加存入数据库（比如SQLite、MongoDB）。
• 写一个后端接口，从数据库里读取所有用户的总语音时长，按时长从高到低排序后返回。
• 前端React发起请求拿到数据，渲染成排行榜形式（比如头像+昵称+时长）。

功能2：展示频道消息发送量最多的用户 #

同样需要自己统计消息数据：

• 后端用discord.js监听messageCreate事件，每收到一条消息，就给对应用户的消息计数在数据库里+1。
• 如果需要统计历史消息，用channel.messages.fetch()批量抓取旧消息（每次最多100条，循环请求直到没有更多），初始化数据库里的计数。
• 写后端接口，按消息计数排序返回用户列表，前端渲染展示。

功能3：展示特定角色的在线成员 #

这个可以直接通过Discord API实现：

• 后端通过discord.js的guild.members.cache获取服务器所有成员（或者调用GET /guilds/{guildId}/members API）。
• 过滤条件：
  1. 成员拥有目标角色ID（member.roles.cache.has(角色ID)）
  2. 成员处于在线状态（member.presence.status为online/idle/dnd，根据你的需求定义「在线」）
• 把过滤后的成员数据（头像、昵称、状态）通过后端接口返回给前端，React渲染展示。

Discord Widget能否替代功能3？ #

• Discord Widget只能展示整个服务器的在线成员列表，无法筛选特定角色，官方提供的自定义选项只有尺寸、主题、是否显示成员数量，没有角色过滤功能。
• 所以不能替代你需要的第三个功能，还是得自己通过API实现。

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