javascript - HTML5 + discord.js 事件监听器

标签 javascript html node.js discord discord.js

我想要什么:

我正在努力做到这一点,以便当在我的不和谐中添加或从员工中删除成员时,它会在我的网站上更新它。我尝试过使用 node.js 执行此操作,但随后我无法使用文档属性等。基本上我想知道这是否可能。

JS代码:

const headBoardOfDirectors = document.querySelector('#hbod-role');
const boardOfDirectors = document.querySelector('#bod-role');
const headAdmin = document.querySelector('#ha-role');
const seniorAdmin = document.querySelector('#sa-role');
const admin = document.querySelector('#a-role');
const headModerator = document.querySelector('#hm-role');
const moderator = document.querySelector('#m-role');
const trialModerator = document.querySelector('#tm-role');

// Below is just an example of what I am talking about.

staff = [
    bunch of staff roles here
]

if (some member role add or remove event) {
    if (role added or removed is staff) {
        if (role name is Head Board of Directors) {
            headBoardOfDirectors.innerHTML = `${headBoardOfDirectors.innerHTML}\n${member name}`
        }
    }
}

HTML 代码:

        <div id="staff">
            <table>
                <tr>
                    <th class="main"></th>
                    <th class="main">Staff</th>
                    <th class="main"></th>
                </tr>
                <tr>
                    <th></th>
                    <th>Founder</th>
                    <th></th>
                </tr>
                <tr>
                    <td></td>
                    <td>killrebeest#1001</td>
                    <td></td>
                </tr>
                <tr>
                    <th></th>
                    <th>Owner</th>
                    <th></th>
                </tr>
                <tr>
                    <td></td>
                    <td>fluffy#9459</td>
                    <td></td>
                </tr>
                <tr>
                    <th></th>
                    <th>Head of Board of Directors</th>
                    <th></th>
                </tr>
                <tr>
                    <td></td>
                    <td id="hbod-role"></td>
                    <td></td>
                </tr>
                <tr>
                    <th></th>
                    <th>Board of Directors</th>
                    <th></th>
                </tr>
                <tr id="bod-role">
                    
                </tr>
                <tr>
                    <th></th>
                    <th>Head Administration</th>
                    <th></th>
                </tr>
                <tr id="ha-role">
                    
                </tr>
                <tr>
                    <th></th>
                    <th>Senior Administration</th>
                    <th></th>
                </tr>
                <tr id="sa-role">
                    
                </tr>
                <tr>
                <tr>
                    <th></th>
                    <th>Administration</th>
                    <th></th>
                </tr>
                <tr id="a-role">
                    
                </tr>
                <tr>
                    <th></th>
                    <th>Head Moderation</th>
                    <th></th>
                </tr>
                <tr id="hm-role">
                    
                </tr>
                <tr>
                    <th></th>
                    <th>Moderation</th>
                    <th></th>
                </tr>
                <tr id="m-role">
                    
                </tr>
                <tr>
                    <th></th>
                    <th>Trial Moderation</th>
                    <th></th>
                </tr>
                <tr id="tm-role">
                    
                </tr>
            </table>
        </div>

摘要:

基本上我主要想知道这是否可能,我认为这绝对应该是。如果可以的话,该怎么做,或者有什么引用资料可以帮助我解决这个问题。

谢谢,
杀死猛兽

最佳答案

您只需将您的node.js 与您的客户端连接即可。我建议使用 EJS。首先,通过执行 npm iexpress ejsdiscord.js 安装express、ejs 和discord.js。然后,您可以设置您的 ejs。

index.js:

const express = require("express");
const app = express(); // setting up express

let staff = [ "john doe#1234", "jane doe#4321", "some other name#0001" ]; // example staff members

app.set("view engine", "ejs"); // using ejs

app.get("/", (req, res) => { res.render("index", { staff }); }); // rendering the ejs file

app.listen(80); // listening at port 80 (http://localhost)

views/index.ejs:

<h1>Our staff</h1>
<ul>
  <% staff.forEach(user => { %> <!-- for each staff member, list it -->
    <li><%= user %></li>
  <% }); %>
</ul>

您需要注册一个 Discord 机器人。只需前往 https://discord.com/developers/applications ,创建一个应用程序,为该应用程序创建一个机器人,启用 GUILD_MEMBERS 意图并复制 token 。然后您可以邀请机器人访问您的服务器。从那里,您可以使用discord.js 对该部分进行编码。

index.js

const express = require("express");
const app = express(); // setting up express

const { Client, Intents } = require("discord.js");
const client = new Client({
  intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MEMBERS],
}); // intents stuff

const token = "replace with your own bot token";
const serverId = "replace with the id of your server"; // you can get the ids by enabling developer mode (user settings > advanced) and then right clicking on the server or the role
const staffRoleId = "replace with id of the staff role";

app.set("view engine", "ejs"); // using ejs

app.get("/", async (req, res) => {
  const server = await (
    await client.guilds.fetch()
  ) // get all servers
    .find((v) => v.id == serverId) // find your server
    .fetch(); // get the server object

  const staff = (await server.members.fetch()) // get all members
    .filter((v) => v.roles.cache.filter((r) => r.id == staffRoleId).size > 0) // filter out the ones without admin role
    .map((v) => {
      return [v.displayAvatarURL({ format: "png", size: 128 }), v.user.tag];
    }); // avatars and names instead of objects
  res.render("index", { staff });
}); // rendering the ejs file

app.listen(80); // listening at port 80 (http://localhost)

client.login(token); // login

您还需要稍微更改一下 ejs(我决定添加一些样式,这样它看起来就不那么可怕了)。

views/index.ejs:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Our staff</title>
  </head>
  <body
    style="
      margin: 0;
      font-size: 200%;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    "
  >
    <h1 style="margin: 0; padding: 10px; padding-bottom: 0">Our staff</h1>
    <ul>
      <% staff.forEach(user => { %>
      <!-- for each staff member, list it -->
      <li>
        <img
          src="<%= user[0] %>"
          alt="<%= user[1] %>"
          style="border-radius: 50%; width: 32px; height: 32px"
        />
        <%= user[1] %>
      </li>
      <% }); %>
    </ul>
  </body>
</html>

这样,你就差不多完成了。

关于javascript - HTML5 + discord.js 事件监听器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71043684/

相关文章:

javascript - 按 id 更新不会更改 Mongoose 中的字段

node.js - 将 Bing Web 搜索 API 与 QnA 聊天机器人集成

javascript - Uncaught ReferenceError : exports is not defined in filed generated by Typescript

javascript - 为特定部分重建 css 并在需要时应用 jquery

php - WordPress Subscribe2 插件在发送电子邮件时转义博客名称中的字符

php - 两个词之间的空格和链接问题

node.js - 在另一个js文件中使用对象

javascript - 我是否适本地使用了 Javascript 回调(面向对象的风格)?

javascript - for of 循环,等到值被定义

javascript - 使用空值构建数组