利用Discord API在网站上展示服务器数据：可行性与实践指南

// 后端示例：使用Node.js (假设你已经安装了axios: npm install axios)
const axios = require('axios');

/**
 * 从Discord API获取指定服务器的在线成员，并筛选出特定角色的成员。
 * @param {string} guildId - Discord服务器的ID。
 * @param {string} roleId - 要筛选的角色ID。
 * @param {string} botToken - 你的Discord Bot Token。
 * @returns {Array} 包含符合条件的成员信息的数组。
 */
async function getOnlineMembersWithRole(guildId, roleId, botToken) {
    try {
        // Discord API最多一次性返回1000个成员，如果服务器成员更多，需要分页处理
        const response = await axios.get(`https://discord.com/api/v10/guilds/${guildId}/members?limit=1000`, {
            headers: {
                'Authorization': `Bot ${botToken}` // 使用Bot Token进行认证
            }
        });

        const members = response.data;
        const onlineMembersWithRole = members.filter(member =>
            member.presence?.status === 'online' && // 检查成员是否在线
            member.roles.includes(roleId) // 检查成员是否拥有特定角色
        );

        // 返回精简的成员信息，例如ID、用户名、头像
        return onlineMembersWithRole.map(member => ({
            id: member.user.id,
            username: member.user.username,
            avatar: member.user.avatar
        }));
    } catch (error) {
        console.error("获取服务器成员时发生错误:", error.response ? error.response.data : error.message);
        return [];
    }
}

// 示例用法 (在你的后端路由中调用):
// const MY_GUILD_ID = 'YOUR_DISCORD_SERVER_ID';
// const TARGET_ROLE_ID = 'YOUR_TARGET_ROLE_ID';
// const MY_BOT_TOKEN = process.env.DISCORD_BOT_TOKEN; // 从环境变量安全获取

// async function handleGetMembers(req, res) {
//     const members = await getOnlineMembersWithRole(MY_GUILD_ID, TARGET_ROLE_ID, MY_BOT_TOKEN);
//     res.json(members);
// }

// 注意：在实际应用中，MY_BOT_TOKEN 绝不应该直接硬编码在代码中，应通过环境变量等安全方式管理。

// 前端示例：React组件中调用你的后端API
import React, { useState, useEffect } from 'react';

function DiscordMembersDisplay() {
    const [members, setMembers] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchMembers = async () => {
            try {
                // 假设你的后端API在 /api/discord-members 路径
                const response = await fetch('/api/discord-members');
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const data = await response.json();
                setMembers(data);
            } catch (err) {
                setError(err.message);
            } finally {
                setLoading(false);
            }
        };

        fetchMembers();
    }, []);

    if (loading) return <p>加载中...</p>;
    if (error) return <p>加载成员失败: {error}</p>;

    return (
        <div>
            <h2>在线且拥有特定角色的成员:</h2>
            {members.length === 0 ? (
                <p>暂无符合条件的成员在线。</p>
            ) : (
                <ul>
                    {members.map(member => (
                        <li key={member.id}>
                            <img
                                src={`https://cdn.discordapp.com/avatars/${member.id}/${member.avatar}.png?size=32`}
                                alt={`${member.username}'s avatar`}
                                style={{ width: '24px', height: '24px', borderRadius: '50%', marginRight: '8px' }}
                            />
                            {member.username}
                        </li>
                    ))}
                </ul>
            )}
        </div>
    );
}

export default DiscordMembersDisplay;