如何从HTML触发Node.js+Express中Discord.js的方法？

我正在Replit.com上做一个小项目，学习Node.js和Express，目标是做一个简易输入框，提交后能把内容发布到Discord、Twitter等平台。现在代码能在Replit运行，已经装好必要依赖，也成功连了Discord频道，HTML能调用public目录下app.js里的send函数，但没法调用index.js里Discord.js相关的方法，怎么实现从HTML触发这些后端方法？

目录结构 #

index.js
public/
  index.html
  css/
    app.css
  js/
    app.js

现有代码 #

index.js #

const express = require("express");
const path = require('path');
const app = express();

app.listen(3000, () => {
  console.log("project is running");
})

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', function(req, res) {
    res.redirect('index.html');
});

const { Client, GatewayIntentBits, Intents } = require('discord.js');
const client = new Client({
  intents: [
    GatewayIntentBits.Guilds,
    GatewayIntentBits.GuildMessages,
  ]
})

client.on("ready", () => {
  console.log("Bot is ready.");
  client.channels.cache.get('1056649564532252XXX').send('yo');
});

client.login(process.env.token);

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sample Site</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
    body { padding-top: 50px; }
  </style>
</head>
<body>

  <div class="container">
    <input />
    <button onclick="send()">Send</button>
  </div>

   <script src="js/app.js"></script>

</body>
</html>

app.js #

function send() {
  console.log('sent');
  // this won't work here: client.channels.cache.get('1056649564532252XXX').send('yo');
}

前端（浏览器环境的app.js）无法直接调用后端（Node.js环境的index.js）的Discord客户端代码，两者运行环境完全隔离，必须通过HTTP请求实现前后端通信，具体步骤如下：

1. 在index.js中添加POST接口 #

首先让Express支持解析JSON请求体，然后新增接口接收前端传来的消息，调用Discord的发送方法：

const express = require("express");
const path = require('path');
const app = express();

// 新增：解析JSON格式的请求体
app.use(express.json());

app.listen(3000, () => {
  console.log("project is running");
})

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', function(req, res) {
    res.redirect('index.html');
});

const { Client, GatewayIntentBits } = require('discord.js');
const client = new Client({
  intents: [
    GatewayIntentBits.Guilds,
    GatewayIntentBits.GuildMessages,
  ]
})

// 提前缓存目标频道对象，避免重复查询
const targetChannelId = '1056649564532252XXX';
let targetChannel;

client.on("ready", () => {
  console.log("Bot is ready.");
  targetChannel = client.channels.cache.get(targetChannelId);
  targetChannel.send('yo');
});

// 新增：接收前端请求并发送消息到Discord的接口
app.post('/send-to-discord', async (req, res) => {
  try {
    // 检查Bot是否就绪
    if (!targetChannel) {
      return res.status(500).send('Discord机器人未就绪，请稍后重试');
    }
    // 获取前端传来的消息内容
    const messageContent = req.body.content;
    if (!messageContent) {
      return res.status(400).send('请输入要发送的内容');
    }
    // 发送到Discord频道
    await targetChannel.send(messageContent);
    res.send('消息已成功发送到Discord');
  } catch (error) {
    console.error('发送失败:', error);
    res.status(500).send('消息发送失败，请检查控制台日志');
  }
});

client.login(process.env.token);

2. 修改前端app.js，发送HTTP请求到后端 #

使用浏览器原生的fetch API，把用户输入的内容发送到刚才新增的后端接口：

function send() {
  // 获取输入框的内容
  const inputElement = document.querySelector('input');
  const message = inputElement.value.trim();

  // 校验输入内容
  if (!message) {
    alert('请输入要发送的内容');
    return;
  }

  // 发送POST请求到后端接口
  fetch('/send-to-discord', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ content: message }),
  })
  .then(response => response.text())
  .then(result => {
    console.log(result);
    alert(result);
    inputElement.value = ''; // 发送后清空输入框
  })
  .catch(error => {
    console.error('请求出错:', error);
    alert('发送失败，请检查控制台获取详细信息');
  });
}

3. （可选）优化HTML输入框 #

给输入框添加ID，让获取元素更精准：

<input id="messageInput" />
<button onclick="send()">Send</button>

对应的app.js修改为：

const inputElement = document.getElementById('messageInput');

前端运行在浏览器沙盒环境，无法直接访问后端的Node.js变量和第三方库（比如discord.js），必须通过HTTP请求将数据传递给后端，由后端负责和Discord API交互完成消息发送。这种前后端分离的通信方式是Web开发的标准模式。

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