如何在 HTML 中使用 discord.js

Question

我正在尝试制作一个 discord.js 仪表板，但我实际上无法使用 discord.js 库并将其与客户端连接

这是我的 javascript 代码（该项目是 node.js 使用 express 发送 HTML 文件）

const express = require('express');
const bodyparser = require('body-parser')
const app = express();
const path = require('path');
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname + '/home.html'))
});

app.use(bodyparser.text())
app.listen(3000, () => {
  console.log('server started');
});

还有我的HTML代码

<!DOCTYPE html>

<html>
  <head>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@1,200&display=swap');
      #title {
        font-family: 'Prompt', sans-serif;
        text-align: center;
      }
    </style>
    
  </head>
  <body>
    <h1 id="title">Bot Dashboard</h1>
    <p id="join">Join our discord!</p>
    <iframe src="Removed Widget URL" width="350" height="200" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
<button id="sendtest" onclick="">Send a test</button>
  </body>
</html>

我想要测试按钮在频道中发送消息（我只需要一个可以在node.js中执行的功能）。 “onclick”中的内容是什么？

Answer 1

如果您的 Express 服务器可以访问您的 discord.js 客户端对象，您可以从浏览器向 Express 发送 HTTP 请求，后者可以将您的机器人信息发回。

在您的 HTML 文件中：

<!DOCTYPE html>

<html>
  <head>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@1,200&display=swap');
      #title {
        font-family: 'Prompt', sans-serif;
        text-align: center;
      }
    </style>
    <script>
    const buttonText = document.getElementById("buttontext");

    function botTest() {
        fetch("https://localhost:3000/test")
            .then(() => response.json())
            .then((data) => buttonText.innerText = `The bot's tag is ${data.tag}`);
    }
    </script>
  </head>
  <body>
    <h1 id="title">Bot Dashboard</h1>
    <p id="join">Join our discord!</p>
    <iframe src="Removed Widget URL" width="350" height="200" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
    <button onclick="botTest()">Send a test</button>
    <p id="buttontext">Click the button!</p>
  </body>
</html>

在您的 Express 文件中：

const express = require('express');
const bodyparser = require('body-parser')
const app = express();
const path = require('path');
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname + '/home.html'))
});

app.get('/test', (req, res) => {
  // make sure your discord.js client is available somewhere in this file
  res.json({
    tag: client.user.tag
  });
});

app.use(bodyparser.text())
app.listen(3000, () => {
  console.log('server started');
});

确保您的 discord.js 客户端在文件中的某处可用。这可以是从您的 index.js 文件或任何具有您的 Client 实例并使用 module.exports.

导出它的文件的导入

如何在 HTML 中使用 discord.js

How to use discord.js in HTML

html

javascript

node.js

discord.js