Advanced Godot | Creating a Peer to Peer Chat System

hey guys this is mitch with findpoint cgi and today we're going to create a peer-to-peer chat system now this is a second part of a multi-part series where i take you through the process of creating a login and chat system with firebase so today we're going to be covering creating the interface we're going to set up the host and then we're going to be setting up a client that sends messages using rpc and finally we're going to be disconnecting from that instance and cleaning up after our connection so that's what i have in store for you guys so let's go ahead and get started okay so the first thing that we're gonna need to do is we are going to need to create a user interface right so it can show up on the user well interface and then we're going to right click here we're going to add in a child node then we're going to go ahead and add in a button and we will pull this button i don't know throw it somewhere here i guess and then we're going to duplicate that button and we're going to pull that down a tiny bit so this will be our host button this will be our joining button and then we're going to duplicate it again for a third button we're going to pull it down here we're gonna make that our leaving button so we'll say leave we'll call this leave we'll click on this one we'll call this one join room and i'll copy that and we'll paste that in here join room and then we'll call this one host room and we'll put a space whoops put a space right there all right now we're going to need a line edit and we'll add that in and align that it's going to allow us to input the ip address that we're connecting to so that way we can test our chat box and our chat system now i'm going to right click add in a panel all right and this panel is just so that we can see some stark change in color between like so we can see the text in the background right because we don't want our our text just to be a transparent thing right you want a panel of some description and of course you can always theme it by going in here and adding in a theme and changing the color and making it you know how you guys want so you could custom style see it to be whatever you would like and if you want me to go through the process of changing the styles and really theming this and making it look really nice let me know and i'll make a quick tutorial on that but for right now we'll just make it nice and you know black and standard and then what we're going to do is we're going to add in an input box then what we're going to do is we're going to add in a line edit again and we are going to put that underneath our panel here and then we're going to click on our line edit go up to our layout click on that and then go to bottom wide and what that's going to do is it's going to snap it to the bottom of our chat box here so that way no matter how big we make our panel it will follow that little box here and that way if somebody wanted to change the size of this panel let's say you're making an mmo right and you want them to be able to change their size of their chat box it's going to stick with their chat box here and we can you know kind of go through and make it a little bit higher and a little bit smaller right so that way it's just a tiny bit has a little bit of padding on either side things like that you can you can go ahead and make those changes and adjustments yourselves but that's what i'm gonna do for mine because it'll be nice that way now i'm gonna right click on my panel here add in a text edit right here and i'm going to make this full wrecked so it goes the entire size of the screen and then i'm going to pull this up so that way when you look at your control or you look at your panel here and you adjust your panel size you'll notice that they stay the exact same distance apart and they work with each other see i mean if you make it really small you'll notice that that this one doesn't quite match up and that's okay you know uh that has a minimum size that we have to have but now it will stay scalable is what i'm trying to say so now we have that we're ready to start our coding and start our hooking up of things so the first thing we're going to do is we're going to right click our control we're going to attach a script and we're going to call it chat manager or we could say chat box manager perhaps we'll go ahead and hit enter so now first thing we need to do is we need to right click our room or not right click our room i'm sorry click on our room go to node button up and we'll double click on that we'll connect it same thing with join room double click button up connect leaving double click button up and go ahead and connect that and that's going to go ahead and throw all of our little functions in here so that way when we click on these buttons they actually do something and now we're going to get to coding so the first thing that we're going to need to do is we're going to need to create our host for this so we need to actually host our information so we're going to say it's funk host underscore chat we're going to put our print our little um colon there and then we're going to say var host is equal to networked multiplier e net dot new all right and then we're going to say host dot create server and we need to give it a port id so let's go with something like i don't know 2 000 or we could say 200 or 500 or something like that the host number or the port number doesn't matter as long as you don't do um some of the restricted parts like 8080 8081 you know i think there's like there's a couple of them let me actually open up if you go onto wikipedia here you can actually see some of the common ports and you can see like zero one five seven nine so like all of these things if it says reserved here you don't want to use it if it doesn't say reserved then you can usually get away with it but if it says reserved don't use it in general if you see it on this list try to avoid using it but you know you can in theory use it um but that's just something to keep in mind so that way you're not uh taking up a port that somebody might need so for instance like odds are a user might not have you know microsoft sql server on their machine right when they're when they're uh playing your game but if you can avoid the port you might as well just avoid the port right like here you know windows live messaging right i mean odds are they're not gonna have that on their machine but it's a good idea just to avoid it anyway so i would definitely take a look at this i'll leave a link in the description so you guys can check it out but in general if it's on this list just try to avoid using it it's just easier so now we're going to do is we're going to say get underscore tree dot set network set underscore network underscore peer host and what that's going to do is it's going to get your tree and it's going to go grab your network peer object which is a godot object and it's going to go and set that as your network peer as as the host so it'll say hey um this thing is going to be the host if that makes sense and then we're going to create a function called join room because we need to be able to join that room right and we're going to say var ip because we need to get their ip address we're going to say that's equal to dollar sign the line edit now i don't like that name for line edit so let's go ahead and change that to ip address and then let's go ahead and change this line edit to chat input and let's go ahead here and go chat box all right that'll just make things easier for us to understand what's going on here so we'll go dollar sign i p address dot text and we'll say var host is equal to networked multiplayer and we're going to make it an e-net dot new and then we're going to say host dot create client and we need to give it an ip address so i p and then port of 2 000. now generally speaking these are things that you would probably get from a server but in this case we're just going to get it you know locally so we can go ahead and test our stuff and then get underscore tree and then we're going to say set underscore network underscore peer we're going to say host so basically what we've done is the exact same thing right here versus here the only difference is we're saying hey network peer go ahead and take this and create a server and we're saying hey network peer go ahead and here and create a client and connect to this server that's all we're doing that's all we've got to do so now our two computer our two systems are gonna go talk to each other at this point so now we need to be able to send data back and forth right we need to be able to have that conversation and and uh we've produced the handshake right we've said hey we've we've got connection now we need to transfer data from each other so what we're gonna do is we're gonna say funk send underscore message and we're gonna say var message is equal to dollar sign panel chat input here dot text and then we're gonna say var id is equal to get underscore tree dot get network unique id so what this is gonna do is it's gonna say hey go and fetch me a unique id and this is important because everything here has conversations via an id right so if you don't have a unique id you won't know which message is coming from who so you want to make sure that when you send that message out it's always unique if that makes sense so think of it kind of like uh your social security number if you're an american or or whatever you guys have like a driver's license number right it's a unique number that identifies that person or that uh chat instance or that chat uh user instance right and then what we need to do is we need to do an r p c and then receive underscore message comma id comma message so rpc is a tool called remote so rpc is remote procedure call and basically what you're saying is hey go and call this method out on the network hey editor mitch here uh just to let you guys know i don't cover this but inside of here once you're done sending that message you're gonna wanna say dollar sign chat input dot text is equal to empty and the reason why is because if you don't set it to empty then their message doesn't disappear when they send that message so make sure you just do that i know i don't have it in the tutorial but just make sure you do that or else you're not going to get a message that's going to be reset when you're done all right thanks guys so now that we've got this rpc message going out we're going to need to be able to receive that rpc message right because we're trying to remote procedure call something so we're trying to call a remote function out on the host right so we'll go funk receive underscore message now if you look at what our rpc says it says id and message so we need to put it pass in id comma message and then we need to say dollar sign panel chat box right dot text plus equals because we're trying to add a message to that right to our chat box and we're going to say str id so that way we can know who sent the message and we're going to say plus quote colon space plus our message and that should do it for us all right now we need to on host room button up we need to host our chat and then on join button up we need to join our chat all right now if everything's set up correctly we should at least have something that runs so let's see what happens if we do that so looking at our code we don't have a way to send a message if we hit play so if we type 127.0.0.1 which is our loopback address in every computer it's the same it's just 127.0.0.1 that means i'm talking to myself not out to the internet and i click host and then i start typing like hello you'll notice that if i hit enter nothing really happens that's because we're not calling our send message here so we need to do is we need to come in here and have a input so underscore input and then we're going to pass in our event right then we'll say if our event is a input key then if event dot press and event dot scan code is equal equal to key underscore enter i'm going to go ahead and assume that you want me to send a message and i missed my c that's why i wasn't sitting here wondering why i'm not getting um auto completions because i'm missing my c all right so now if i play this so you'll notice that when we hit our enter key nothing seems to happen still right and if we look at our console we don't have any issues here right there's nothing throwing a fit you do have some firebase stuff but again that's because i'm using my firebase project but you'll notice that nothing seems to be wrong here right well the reason why is because we don't have sync in front of our receive message whoops i need to actually spell sync right and what that should do is it should register this with our network unique our uh remote procedure call system so if we refresh that and we're going to go ahead and go 127.0.0.1 and we're going to host a room and we're going to type test enter and you'll see that it shows up which is good so we've got our first step but now we need to test if people can join our room so we're going to need to do is we're going to open up a whole nother instance of godot unfortunately and this is my firebase login menu so firebase login menu and we'll go ahead and run that unfortunately testing multiplayer is kind of complicated inside it could do a little bit if anybody knows a better way of doing this let me know and throw it in the comments below and let me know because i would love to know so now if i go ahead and hit play on this i have two instances of this open okay and then i can go 127.0.0.1 and we will join the room and we will type hello from other person i can't spell to save my life and you'll see look at that it pulled that data right here but you notice that we have a slight problem here it looks like our little um text is getting appended to the end and the reason why is because if we come over here make sure i have the right one i do okay oh just go ahead resave um you'll notice here that we're not doing a new line here right so we're not saying slash n so if we hit plus quote slash n what that's gonna do if i refresh all of this so let me go ahead and close this open up this it's gonna yell at you reload it let's make sure that it's correct so it's got the slash n it does so let's go ahead and refresh and reload that page and go ahead and hit play on this one and we are going to try to host a room and join a room so one two seven 0.0.1 host a room and then we're going to go 127.0.0.1 join a room and then we're going to say test and then we're going to say hello from host and you can see now we have our text showing up so that's how hard it is to create a chat box it's really easy and it takes a few minutes to kind of whip it together now the question is how can we make this a little bit more exciting a little bit more interesting and a little bit more useful right the first thing that we're going to need to do is we're going to need to close these so we're gonna need to create a couple events here so we're gonna do is we're gonna say get underscore tree oops get underscore tree open and close and then dot connect and we're going to connect a couple events here so we're going to say hey when we connect to the server let's go ahead and fire off a hey i connected to the server right so we get some feedback so we're going to say connected to server comma self right because we want to pass that to our self and then we're going to say hey we entered our room right and then we're going to want to control c control v a couple of those and we're going to say hey how about when we connect to appear right so network underscore peer underscore connected and then we're gonna say hey so appear is connected right so we're gonna say a new user has entered right so new user connected and then we're gonna say hey somebody disconnected right network underscore peer underscore disconnected and we're going to say hey user disconnected and then finally we're going to have our server disconnection because we want to notify the user that hey their server just got disconnected right so we'll say server disconnected okay so now that we got our events here we're going to go in here we're going to say funk entered room underscore room colon and we're gonna say uh dollar sign chat box if it'll let me oh i'm missing my parens here so let me get those in dollar sign chat box dot text plus equals quote [Music] entered room and we're going to go with the slash n there and now we're going to copy that we are going to enter a few times that way we don't have to recreate all this code and we're just gonna copy paste copy paste and copy paste all right this one we're going to say servers disconnected [Music] this one we're going to pass in an id and same thing with this one we'll do that for both of them and we will say id plus has entered the room all right and then we will say id plus has left the room right and actually i'm gonna say entered the room and we'll put a capital e there and that should allow us to do a basic hey users connected users disconnected things like that so let's go ahead and refresh this let's see if it worked for us so we're going to do that and i'm going to bring up my second godot instance we'll reload it and then we will do a click whoops wrong one which gudo instance am i in this one it's hard to keep track there's so many of them all right um so now we've got two instances of this open so we're going to say 127.0.0.1 and we're going to host [Music] and then we're going to say 127. oops 127.00 and we're going to join open we've got ourselves a little crash here so let's see what's going on invalid operator plus oh i need to cast these of strings that's why all right let's do that str all right refresh cool and then we'll click on this one and it'll tell us to reload our stuff so we're going to reload and refresh all right now we've got two of these running so 127.0.0.1 host 12127.0.0.1 join and you will see that it tells you hey uh number one has entered the room and you have also entered the room and it'll notify them that they have entered the room so that's a good way of showing and like telling people hey this stuff actually operates properly right and if you leave [Music] you'll see that nothing happens now why is that well that's because we are not checking if a host leaves the room this leave button does nothing right well we need to go ahead and tell um the server that we're going to disconnect right so we need to go ahead and do get underscore tree dot set underscore network underscore here is equal to null so it's going to go ahead and just set that to null and get rid of that connection so we'll save we'll refresh we'll click on our here let me close all of these to make sure that everything's cleared now we'll play and then we'll open up our second instance of godot and we'll refresh that all right now if we go 127.0.0.1 and we host a room and we do 127.0.0.1 and we whoops that's 7.1 join our room you'll see that we have a connection here so that's all connected and then if one of us leaves it'll say hey that person has left the room and it's that simple all right guys that's all i have for you today and we talked about creating hosts uh setting up connections sending messages with remote procedure calls or rpc calls or i guess they're just called rpcs and we disconnected from our instances and cleaned up a little bit after our process here or after our chat um and as always you know if you like this video go ahead and hit that like button hey you know if you dislike this video hit that dislike button because i make this content for you guys and i want to make sure that i make content that you guys enjoy so you know if you guys have any suggestions or things you want me to cover in the future let me know in the comments below but anyway guys that's all i have for you guys today so thank you so much for watching and i'll see y'all next time [Music] [Applause] [Music] thanks you

Channel: FinePointCGI

Views: 1,133

Keywords: godot, how to make a multiplayer game, godot multiplayer tutorial, godot tutorial, godot multiplayer server, godot multiplayer, godot engine, godot beginner tutorial, godot dedicated server, how to make a game, godot mmo, how to make a multiplayer server to client connection in godot, how to create a server with godot, godot network, godot server, godot networking, godot game dev, godot multiplayer syncing, peer to peer, Advanced Godot | Creating a Peer to Peer Chat System

Id: KspsyDS-jJU

Length: 27min 14sec (1634 seconds)

Published: Mon May 03 2021