如何将discord.js获取的Discord服务器成员数同步到React前端

首先明确结论：不能直接导出变量到React前端使用 #

原因有两个核心问题：

• 你的discord.js代码运行在Node.js服务端环境，依赖Node原生API、服务端文件系统能力，浏览器环境没有这些底层支持，直接导入前端打包会直接报错无法运行
• 代码中包含敏感的DISCORD_TOKEN，如果打包进前端代码会直接暴露给所有访问页面的用户，别人拿到这个令牌可以完全操控你的Discord机器人，风险极高

正确方案：搭建轻量后端接口提供数据 #

你确实需要用Express这类后端框架做一层数据中转，实现步骤非常简单：

1. 先安装所需依赖
   npm install express cors
2. 改造你的bot.js代码，新增Express接口服务

const { Client, Intents } = require('discord.js');
const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 3001; // 和React默认的3000端口区分

// 配置跨域，仅开发环境允许所有来源，部署时请替换为你的前端域名
app.use(cors());

// 顶层变量存储成员数，方便接口返回
let currentMemberCount = 0;

const myIntents = new Intents();
myIntents.add(Intents.FLAGS.GUILD_PRESENCES, Intents.FLAGS.GUILD_MEMBERS);
const client = new Client({ intents: myIntents });

client.login(process.env.DISCORD_TOKEN);
client.on('ready', () => {
    console.log(`${client.user.username} 已启动`)
    const guildId = "832452520211251260"
    
    const guild = client.guilds.cache.get(guildId);
    if (!guild) return console.log(`找不到ID为 "${guildId}" 的服务器`);

    guild.members
    .fetch()
    .then((members) => {
      // 直接用size属性获取总数，不需要循环计数
      currentMemberCount = members.size;
      console.log(`服务器成员数: ${currentMemberCount}`)
    });
});

// 新增接口返回成员数
app.get('/api/guild-members', (req, res) => {
  res.json({ count: currentMemberCount });
});

// 启动后端服务
app.listen(PORT, () => {
  console.log(`接口服务已运行在端口${PORT}`);
});

3. React前端发送请求获取数据即可，示例组件代码：

import { useEffect, useState } from 'react';

function GuildMemberCounter() {
  const [count, setCount] = useState(0);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('http://localhost:3001/api/guild-members')
      .then(res => res.json())
      .then(data => {
        setCount(data.count);
        setLoading(false);
      })
      .catch(err => {
        console.error('获取成员数失败:', err);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>加载中...</div>;
  return <div>当前服务器成员数：{count}</div>;
}

export default GuildMemberCounter;

注意事项 #

• 生产部署时请修改CORS配置，仅允许你的前端域名访问接口，避免接口被恶意调用
• DISCORD_TOKEN必须存储在服务端的环境变量中，绝对不要提交到代码仓库或者暴露到前端
• 如果需要实时更新成员数，可以在服务端加定时任务，每隔10-30分钟重新拉取一次服务器成员数更新currentMemberCount变量即可

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