Как использовать discord.js в HTML

Я пытаюсь создать панель управления discord.js, но не могу использовать библиотеку discord.js и подключить ее к клиенту.

Вот мой код javascript (проект node.js использует экспресс для отправки файла 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.info('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"?

Если я правильно понимаю, о чем вы спрашиваете, вам нужно будет отправить HTTP-запрос на ваш сервер Express через маршрут, затем сервер Express вызовет ваш код Node/Discord, если только Discord не предлагает API для интерфейсных клиентов, которых вы можешь использовать.

— 16.03.2022 22:02

Это правильно. Но я хочу, чтобы это было на экспресс-стороне, потому что там хранятся мои данные (клиент, база данных и т. д.)

— 16.03.2022 22:05

javascript html node.js discord.js

16.03.2022 21:38

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если ваш сервер Express может получить доступ к вашему объекту клиента discord.js, вы можете отправить HTTP-запрос из браузера в Express, который может отправить информацию вашего бота обратно.

В вашем 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>

В вашем экспресс-файле:

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.info('server started');
});

Убедитесь, что ваш клиент discord.js доступен где-то в вашем файле. Это может быть импорт из вашего файла index.js или любого файла, который содержит экземпляр вашего клиента и экспортируется с помощью module.exports.

Я понимаю, как это будет работать. Позвольте мне быстро проверить это.

— 17.03.2022 00:12

Я вижу несколько проблем с вашим кодом, но я исправил их сам и отметил это как правильный ответ.

— 17.03.2022 00:16

16.03.2022 23:41