HTML5 + discord.js Event Listener

Question

What I Want:

I am trying to make it so when a member is added or removed from staff in my discord it will update it on the website I have. I've tried doing this with node.js, but then I can't use document attributes and etc. Basically I am wondering if this is possible.

Code 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}
${member name}`
        }
    }
}

Code HTML:

        
            
                
                    
                    Staff
                    
                
                
                    
                    Founder
                    
                
                
                    
                    killrebeest#1001
                    
                
                
                    
                    Owner
                    
                
                
                    
                    fluffy#9459
                    
                
                
                    
                    Head of Board of Directors
                    
                
                
                    
                    
                    
                
                
                    
                    Board of Directors
                    
                
                
                    
                
                
                    
                    Head Administration
                    
                
                
                    
                
                
                    
                    Senior Administration
                    
                
                
                    
                
                
                

                    
                    Administration
                    
                
                
                    
                
                
                    
                    Head Moderation
                    
                
                
                    
                
                
                    
                    Moderation
                    
                
                
                    
                
                
                    
                    Trial Moderation

Summary:

Basically I mainly want to know if this is possible, which I think it most definitly should be. If it is possible, how can the be done, or is there any references that you can answer with to help me solve this issue.

Thanks,
killrebeest

user_18132030 · Answer

You can just connect your node.js with your client. I would recommend using EJS. First, you install express, ejs and discord.js by doing npm i express ejs discord.js. Then, you can set up your 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:

Our staff

  <% staff.forEach(user => { %> 
    <%= user %>
  <% }); %>

You need to register a Discord bot. Just go to https://discord.com/developers/applications, create an application, create a bot for said application, enable GUILD_MEMBERS intent and copy the token. You can then invite the bot to your server. From there, you can code the part with 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

You also need to change up the ejs a little bit (I decided to add some styling so it doesn't look completely horrible).

views/index.ejs:



  
    
    
    
    Our staff
  
  
    Our staff
    
      <% staff.forEach(user => { %>
      
      
        
        <%= user[1] %>
      
      <% }); %>

And with that, you're pretty much done.

HTML5 + discord.js Event Listener

1 Answers