HTML5 + discord.js 事件监听器

Question

我想要什么：

我正在努力做到这一点，因此当在我的不和谐中从员工中添加或删除成员时，它会在我拥有的网站上更新它。我试过用 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>

总结：

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

谢谢，
杀羚羊

Answer 1

您可以将您的 node.js 与您的客户端连接起来。我建议使用 EJS。首先，通过npm i express ejs discord.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 意图并复制令牌。然后，您可以邀请机器人到您的服务器。从那里，您可以使用 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>

这样，你就大功告成了。