Command Handler | How to Code a Discord Bot! | Discord.JS v13 Tutorial #2

everybody welcome back to our discord.js tutorial series today i'm going to be showing you how to make a command handler and we can start writing commands in our code uh the reason why i'm doing a command handler first which a command handler it all does is separate your commands into files different files the reason why i'm doing that is so that we don't have commands that are made in once uh one sort of command thing and then we're writing a command handler which we have all rs well all the wrestler commands in um and then it's going to be a big mess i actually will i'll show you how to make just a simple command in in just this event here so let's start with that so we can do all we can do is get the arguments of our message content so what argument says is uh if we go back to our discord here let's say we have our prefix uh we're writing a command here we have a prefix i'm going to say uh ping and then we could write test here so ping space test ping is our first argument and test is our second argument that's what arguments are so we're going to get our args and to do that all you have to do is do const args equals message dot content that's sub string i'm going to substring it uh we're going to just we're going to substring with our config.prefix and with our config.prefix or else we have to do length config.prefix.length and then we're going to do dot split and we're going to forward slash space plus forward slash and that's called a regular expression and that just means any space that's also followed by other spaces so as many spaces you want so you have uh ping and you can just write a ton of spaces here and test ping is still going to be the first argument uh just just ping and then test is still going to be the second argument and it'll just get rid of all the spaces so and before this we actually need to need to make sure that the message starts with the prefix so if no message dot content dot starts with config.prefix then we're going to do is return return is a keyword that will stop a function and if you put anything after it will give um the result of the function what you just put so let's say i have a function here function add whoops function add let's put x y they're both going to be numbers uh let's put return x plus y then if i run the function add and i put 5 4 in 5 it's going to return nine right so if i put it's going to return nine if we didn't have this if we just put return there all it would do is return what's called the void which is just nothing so that's just how you give the result of a function so let's say we have const added numbers equals add put 9 and 5 there we've got 14 added numbers is going to be equal to 14 if we put x plus y in there so added numbers is going to be equal to 14. and if i just put some what's called this is called js doc we could put number number x y is a number and let's get rid of that returns a number you can go to add you can hover over it you can see x is a number y is a number and a row will return a number you can see here added numbers is now a number and if we log out our added numbers then you can see 14 is logged because 9 plus 5 is 14. so that's the basics of functions and returning stuff there you can watch a javascript tutorial i highly recommend you do that you watch like a couple hour long javascript tutorials so you learn what some of the stuff is because if you're brand new to coding a lot of this stuff is going to be very confusing to you and it's really good to learn how to use javascript before you use discord.js so now that we know that our prefix um now that we know that our message content starts with our prefix and we have our args then let's just start with a switch so this is how we make our first command switch args and we can open this up here and with a switch every switch uh all you have to do is put a case and then we could put what this is so switch args it's going to be the first r uh which will be zero args of zero case let's put hello and you put a pull in there on your next line click break and in between your case and your break statement what we're going to do is put all of our code for our hello command so let's just do message dot reply hello so now if you run this you can see our bias online if we run exclamation mark hello you can see it responds with hello there we go that's our first basic text command and we can add more commands if we want let's say pace uh say and we could do message.reply message.content or actually args dot slice uh one and let me break um so arg that slice what that does is just um it returns uh it it returns the the array that we have which which is which is our rx array but we only get the all the elements after the first one so we get uh our command is our first argument here we get our second all the way up to the rest of the arguments and we reply that we're just going to join with a space so that's an actual string so we do this again we do say it's going to it's going to reply that it you can't send an empty message message content must be a non-empty string but if we do it again but we put more arguments in there say hello world it will say hello world so there we go that's our basic command and uh now i'll show you how to actually make a command handler so you can start using files as our command so let's get rid of our switch here and let's go ahead and go back up to this code and the first thing we're going to do is over in our source folder and make a new folder all commands um the icon doesn't show there because i don't have my icons imported i have custom icons for that stuff i'll get that imported in the next video but we've got all this stuff in here we're going to need one more import here and that's going to be um a package called fs which is file system so this is how we're going to interact with all the files in here so const fs equals require fs and with fs we can first just um read our directory of commands here so to do that you can do fs.read der sync i'm going to pass in dot slash source commands because with uh fs it starts at the root over here um which was where our package that json is it doesn't start in the source file file where our index is um it actually starts up here that really confused me when i was really um when i started uh coding in uh js uh this gave me a lot of trouble so dot slash source slash commands and then it gives us an array of strings which have our file names so we're going to filter them by file as our parameter arrow function file dot ends with dot js and then we can go for each file so this is what's called a for each loop through our array so that we go through each file in here and we can do something with that file so with this we're going to do const uh command equals require i'm going to do back ticks here so you can put an object in there dot slash commands slash dollar sign curly brackets i'm going to put file then we're going to do what we also have to do is uh client dot commands equals new discord discord.collection so we have a commands variable inside our client that we can then do client.comman.set that set and we're going to do a command dot name as the command so it's going to set the name of the command to the command and that's the basics of our command handler that's how we load all of our commands in there and we can just do a console.log of command command dot name loaded and a simple thing i'm going to do is i'm actually going to make another folder here i'm going to call it structures and in this folder we're going to make a client dot js and we're also going to make a command.js and with this instead of doing this we're going to say const client equals new client i'm going to do const client or the capital c is equal to require dot slash structures slash client and so now our client will be a new client that we make ourselves over here so we're going to make uh class client extends discord dot client put curly brackets there we're going to import discord so accounts discord equals required discord.js and you can see our client here it extends our discord.client we're going to make a constructor and we'll just put in our options and we're just going to super super options and actually in our case we don't really need to so we can do we can get rid of our intense line here and we can get rid of this and we can go we can do in here is put in our intents intense and we're going to do up here const intense equals new discord intense that and so it's going to make a new client super super just means the thing we extended we're going to make a new one of that so many new clients it's going and our client is going to extend that but in our client here all we're going to are going to do is put this dot commands equals new discord dot collection and i'm going to put a little bit of js doc here and do um slash asterix asterix you do an enter and you get this you can type in at type i'm going to do discord dot collection and then we're going to do uh less inside and greater than side and we're going to do string command with command with a capital c because now we're going to import our command class from our command file so consequential required dot slash command.js and in our command.js what we're going to do is do class and also we need to export this so at the bottom of our module or of our client thing we'll do module dot exports equals client to the capital c and there you go we're exporting our client class so class command and we're going to open that up we'll do constructor again we're going to pass in a name uh let's actually do an options and we're going to do this.name equals options.name this dot description those options that description this dot um let's put our run is equal to options.run and let's also do more js dock up here so options is going to be a type command options and then up here i'm going to do type death command options in our typedef we're going to do more curly brackets and this will be name string description string and our run will be a run function and our run function is actually let's just do a function of message just that's actually yeah let's do run function run function and up here before our class we're going to import discord and then i'm going to make function run function and we're going to put our message args and client in the in our run function and i'm going to put jsdoc on our run function and put discord.message that's our message our args are going to be a string array and our client is going to be a client which we can import from our file up here so accounts client equals that and this is that and also we're going to put a pipe science that's uh if you do uh shift back or shift and then backslash which is above the enter key then you get this which is called the pipe and then we put discord.interaction uh there should be like it might just be interaction and uh that's because we're also gonna be doing interactions with this but we have a run function here our message is a discord message or interaction or augs of the string array and our clients as a client and now we have our class command and we're just going to export it in our modules equals command and uh yeah i just enrolled my formatter up there but there we go we have our command class exported we have our client class exported and all it does is have a command collection um with our commands in there so now if we go over here we don't even need the discord import on this file anymore because all of it's handled in our client class so consequential new client there and now if you look here client.command.set and let's also do just on this we're going to type command imported from our structures and import that up there so type command so our command will be of type command and now we can see our name as uh our type of string instead of a type of any now if you do client commands dot set you can see that set as all of this stuff in here this is a description of a collection it will have our string our command i'm going to set a key of string a value of command the string will be our name of the command and then we'll have the actual command in there so yeah that's that's about it i'm just adding intellisense to this i'm very sorry if this is all confusing but if you just follow everything i do then you'll see in a little bit when we start making our files how easy it is to make that so now we can actually start making a command file so to do that let's go to our commands make a new file right click new file and let's start off with let's say just a ping command a ping is the latency between the client and discord and so the way we can measure that is um let's first just import our command class so cons const command whoa equal require oh acquire dots dot dot slash structures slash command and then we're going to do module dot exports equals new command and we're going to pass in our options which you can see is our command options so if we open up curly braces you type in name you can see it auto completes there so our name will be a string this will be of type ping uh our description this is optional but you can put uh shows the ping of the bot then we can put our run function and a little something that we can do here is type in async and then run and you can do that so what does async mean async is short for asynchronous and what that does is let's say we have two console.log statements here instead of running line by line so it'll run this one and then it will run this one it's going to attempt to run both of these at the same time and um whatever one completes first is whatever one that completes first so what also also what we can do is this with this is resolve promises with a sync await async awaits is a little something where we can await for a thing to happen and temporarily turn these this async function into uh just a normal sync function and then when that's done we can keep running the rest of the code so let's say we have let's make a new promise here so const promise equals new promise and a promise is going to have an executor which is just a function that contains two parameters which are also functions so let's put resolve and reject in our parameters here do an arrow function and let's just do uh let's just do resolve uh test so now we've got our promise here you can see our promise is of type promise but if we do const thing equals promise thing is still going to be a promise and it's not going to be what we actually resolved here which is test but if we do a weight promise then our thing will be um not a promise it'll be what actually we resolve so resolve test this will actually be test instead of promise test so that's a little bit about async await um we're going to be using this for all of our commands and in our run function here i'm going to type in message i type in args i'm going to type in client you can see here our message is a message or an interaction our args is a string array and our client is a client so we can actually type in message and we just put a dot here we have all of our stuff for our message we go to args we have all of our stuff for our args whoops all of our stuff for our args and our clients we have all of our stuff for our client and if we didn't have this command class and all we did was uh export just a simple object which is what these curly braces are in this thing then we wouldn't have all this uh this stuff here it will just say message is any args is any decline as any uh we wouldn't get any intellisense on this and i really like having intellisense and autocompletes for all my stuff so that's why we created these structures you don't have to but i like doing that so in our ping function or we're going to write message.reply i'm going to reply with backtext ping we're going to do uh client.ws.ping and we're going to type in mx so now this rule this will reply with our milliseconds of ping that we have on our client so if we run our bot nodemon-ejs you can see command ping loaded because it loaded our command and bot is online so now if we go over to ping and go over to our server and type in ping exclamation mark ping we get oh yeah that's right what we actually have to do is go back to our index and i'll load our commands into here in our message thing so we're going to do client dot commands the const command equals client dot mans dot find uh we're going to do cmd uh arrow function and then we're going to write uh cmd.name is equal to args zero we'll change this later on to be uh with aliases because we're going to put aliases in our commands later but for now we're just going to do it with the name of the command so const command and if we don't have command if we don't have the command so if no command then we're going to return message.reply that is not a valid command and i can actually if we do backtext here we can replace that with our uh args 0 and now we have this going on here and so if we do command dot run message args client now you can see that when we run our command uh it'll only check if the command exists and then it will run it and so now if we go over here we do ping and there we go it will respond with our ping which is 69 milliseconds for our client there's also something called message ping which is the ping between uh the timestamp of this message and the timestamp of this message and then it'll edit and show you the ping of that i can do that really quickly so i'm going to show you how to do that so i'm going to do const msg is equal to await message.reply and then what we can do is do message dot edit oops msg.edit uh message.reply okay i guess it's something to do with the interaction thing but message.edit and with this we're going to write this and to make a new line we're going to type in slash or backslash n that start that's short for a new line and we're going to do message ping all in then we're going to do uh msg.created timestamp minus message.createdtimestamp ms and now if we do that my formatter is going to format it a little bit weird but that's just because it doesn't overflow on the screen and so now if we do ping again it's going to edit with our message ping of 127 milliseconds so that's our message ping that's our normal ping and there you go that's a very simple command and we can make a new file in here make all the commands we want so let's say we want to make that hello command again hello.js we're going to import our command class slash command we're going to module that exports equal new command do name of hello a description of hello and our run function it's it might if you if you try to do this and then put a parenthesis it's going to do this.run so make sure you get rid of this dot and then we're just going to put in our stuff so now we can do message.reply hello and in my opinion in most about developers opinion having your commands in separate files is much much cleaner than having all of your commands in here and if you have a large bot with like 100 commands this this file is going to get very loaded and it's going to be very unreadable but if you have multiple files here with all your commands in it it's going to be very nice so now let's type hello and we get our hello thing right here so that's it for commands for today and i'll show you more commands and some other stuff in the future with future videos but for now see you guys later goodbye

Channel: Ferotiq

Views: 23,354

Keywords: Discord.js, how, to, make, discord, bot, v13, 13, create, code, client, command, handler

Id: yIbmmBGOAO4

Length: 26min 5sec (1565 seconds)

Published: Sat Jul 31 2021