How to use discord.js in HTML-CodePudding

I'm trying to make a discord.js dashboard, but I can't actually use the discord.js library and connect it with the client

Here is my javascript code (The project is node.js using express to send an HTML file)

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');
});

And my HTML code

<!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>

I want the test button to send a message in a channel (All I need is a function that can be executed in node.js). What would be in the "onclick"?

CodePudding user response：

If your Express server can access your discord.js Client object, you can send an HTTP request from the browser to Express, which can send your bot's information back.

In your HTML file:

<!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>

In your Express file:

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');
});

Make sure that your discord.js Client is available somewhere in your file. This can be an import from your index.js file, or any file that has your Client instance and exports it using module.exports.