HTML5 + discord.js 事件監聽器

Question

我想要的是：

我正在努力做到這一點，以便在我的 discord 中添加或刪除員工時，它會在我擁有的網站上進行更新。 我試過用 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 。 然后，您可以設置您的 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 機器人。 只是 go 到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>

這樣，您就大功告成了。