A Short Introduction to WebRTC With Godot 4! Advanced Godot!

hey guys this is Mitch with finepoint CGI and today we're going to talk about how to do webrtc inside of Godot and we're not going to stop just there we're going to talk about how to build a fully dedicated server how to build a Lobby system for your game including a good and a join system and all that happy Jazz we're going to talk about how to do the signaling and how to do your candidate stuff we're going to talk about relaying data between your server and your client so that way they can create their handshake and get everything going we're going to talk about how webrtc works and we're going to talk about how to do peer-to-peer connections using your webrtc and finally we're going to update our multiplayer tutorial that we did in the previous videos to work with our webrtc so that's what I have in store for you guys today so let's go ahead and get started okay so the first thing that we have to do is we have to talk about what webrtc is and what it's not because there's a lot of misconceptions on how webrtc works now if you just want to see code and you just want to jump right in then go ahead and jump to the next time stamp and that's totally fine but first let's take a quick step back and let's talk about webrtc so what is webrtc well webrtc is a peer-to-peer network connection that allows you to communicate with your players inside of a game peer-to-peer so there's no server involved or at least that's what most people say to be able to start with webrtc you actually need what's called a signaling server now a signaling server is the place where all of your information is held in the beginning so think of it kind of like if this player wants to host a Lobby they need to talk to the signaling server to host that Lobby it is your dedicated server that holds on to your user information it holds on to what lobbies are open how many people are in those lobbies things like that and it's also the thing that does the actual signaling of the data between your different peers so you might be asking okay so how does it happen well when a user like this guy tells this guy hey I want to make a Lobby they create a Lobby and the signaling server keeps track of like a good basically and that guid gets passed back to this guy and if this guy wants to join that Lobby this guy can send this guy that good or that string of information and then they can use that information to join this Lobby now this is all not technically required but I'm going to go with it as if it is required just so you guys can kind of get an idea once that happens and this player says hey I'm ready to start the game it sends out what's called a candidate and that is basically saying hey I'm ready to start playing let's get moving right so it sends out a candidate to the signaling server the signaling server is going to send it to this guy they're going to do what's called an offer which is going to send back here it's going to send this guy and then it's going to give back an answer to your signaling server and the signaling server is going to relay it to this guy and then that's going to create all of the necessary information that they need so that way they can talk to their stunned server or their ice server okay and you might be going okay but what is a an ice server what is a stun server so a stun server's job is to do what's called the NAT connection so what it does is it provides the necessary information between these two guys to create a port opening between your routers so that these guys can have a direct communication once that direct communication is established the signaling servers no longer needed the communication with that is not needed anymore and the stun server is no longer needed so once the system once these two guys have verified that that Nat connection or network address translation connection has been made then these guys have nothing to do with the connection anymore and these guys are peer-to-peer connected now you might be asking okay but what happens if that peer-to-peer connection is not made right what if something breaks along the way well that's where the turn server comes in now in this case in this diagram the turn server is the stun server so it's the same server right it's the same ice server but it doesn't have to be it could be anything it could be a second machine that does it but what it does is it's a machine much like a direct hosted machine that relays the data between these two guys so that's basically how it works is this guy connects up to the signaling server this guy connects up to the signaling server they exchange some data they then tell the stun server here's the IP address here's the port here's all of the information that I need to be able to connect to this guy and then this guy creates a connection between these two and that's basically how webrtc works now if that's confusing trust me it's gonna get worse because we're going to build all this out manually and it's going to be a fun time so with that being said let's go ahead and get started all right so first thing you'll notice is that I have a multiplayer tutorial Source now this is actually all of the source of my previous Basics with Godot multiplayer tutorial which I have a link to in the description so I'm going to be starting from that point now you don't have to have this if you don't want to you can drop in the link in the description below and pull down this project and it'll have the starter project and everything will be ready and good to go but basically all it has is it has a scene like this it has a player like this with a very basic control set so you can you know move around shoot things like that it also already has pre-setup RPC calls and things like that and I can always run through that as the tutorial progresses but I just want to let you guys know that this does exist it already has all been coded because I don't want to run through the whole process of recoding at all and make this tutorial five hours long now some of the big important things to note for your game is under game manager I have a variable called players and that basically is set up under project settings under autoload game manager and that's basically where my players are going to be housed now you don't have to have this if you don't want to this tutorial is to an extent Standalone so you don't have to have this but just know that that exists the other big thing that I have is I do have a scene manager and all my scene manager does is it does a for loop on my players and then instantiates my players into their player spawn points now again if you want that information that's totally fine just go run through my Basics with multiplayer and then we'll go through that now with that being said the first thing that we need to do is we need to add in our webrtc library because you can't just do webrtc inside a cadot without using the Godot webrtc native library now in my case I am Godot 4.1 so I'm going to go in to the release this is the 4.1 release it is right here so you can see if I scroll down they have a webrtc.zip so we'll pull that down real quick we'll click save I'm going to click on the file icon right click extract and extract it now you'll see it's going to get extracted and you'll see right here we have our webrtc now if we open this up you'll see we have a lib we have a webrtc GD extension we have our some licenses here now a lot of people just grab this copy and paste it and unfortunately that's not gonna work so if we take a look at our GD extension file real quick so if I open that up with notepad you can see they have a res webrtc lib webrtc native blah blah blah right so that means that we need to pull this folder here we need to copy that and we need to bring that into our project so let me open up our project grab this drag it in let go and you will see that it worked now the best way to know if it worked is if you don't get any pop-ups or any errors that everything loaded in correctly now the other way that we can test this is if we go to scene new scene we create a new user interface scene we can actually start building out our very basic scene for this now I'm going to separate our code into two sections we're going to have server and we're going to have client now I will right click attach a child node I'm going to add in a node and I'm going to call this client and I'm going to right click attach a script and we'll call it client.gd that's fine if we type web RTC if you see webrtc data Channel and peer connection then you are good to go that means that everything's set up correctly and you are good to get started with the rest of this tutorial if not then something's broken with how you've loaded in your webrtc right here and you may see an issue right here in your output but since mine worked perfectly fine I'm going to go ahead and start coding out my client so the way that a signaling server works is you have to build a dedicated server and you have to build a dedicated client and unfortunately it's not going to be super easy to build we're gonna have to do some packet reading and we're going to have to be able to do some packet parsing so we're going to need to have a message enum so the first thing I'm going to do is I'm going to type enum and I'm going to call it message and we're going to have a couple of enums we'll first start off with getting an ID so we'll say ID and then another one that we would need is like join like having the ability to join something I think would be useful would have if a user connects so we'll say user connected and maybe we could have one for user disconnected right because a user needs to be able to disconnect we probably need one for Lobby information so we'll say Lobby uh we're gonna need one for the candidate so candidate we're gonna need one for the offer and we're gonna need one for an answer outside of that we probably don't need another one although maybe if we want to be able to handle dead user accounts we probably should have a check-in so we'll put that in as well like that now when we're doing our signaling server our signaling server is going to need to be set up with websocket multiplayer peer you could use godot's websocket Pier you could also use their enet multiplayer peer if you want to you could use their multiplayer extensions right you could use their you could probably even use webrtc if you know exactly what you're doing but in my case I'm going to pull the websocket multiplayer peer that's to me is the most flexible version of the multiplayer library that we can use so I'll say VAR peer is equal to web socket multiplayer peer.new so what that's going to do is it's going to create a websocket multiplayer peer instance and if you remember from my networking tutorial I talked about how websocket multiplayer peer is the fundamental basis of your networking so you have to make sure that you have that in so that's great how do we do a connection well we'll make a small function down here called connect to server and we'll put in an IP address and the best way to connect to a server and this is part of the reason why I chose this library is because of how easy it is to do connect and disconnect requests so to connect all you have to do is type peer dot create client and then you have to pass in a URL so in my case I'm going to go with WS colon slash slash 127.0.0.1 and we're going to choose a port of some description so in my case I'm going to go with 8 9 15. now you might be going okay hold on you put IP up here but you actually put in the information yes and the reason why I did that is because this will get changed later to have the proper IP address I just want to make it hard coded for this first little initial test so that way we know that things are working correctly so I'm going to type print I'm going to say started client and I think that will do it I'm going to control s we'll hit enter and we should be ready to at least try to get some kind of action going so to get a connection going we need to actually have a server and you'll notice that I'm going to be bouncing between server and client quite a bit so I'm going to right click add a child node I'm going to add in a node I'm going to call it server and I'm going to right click attach a script server.gd now with server.gd we need to come in and do the same message so let's go into our client let's copy our enum message and we can paste it now if you want to abstract this out to a utilities function that's totally fine I just don't want to deal with the additional utilities.message dot whatever so in my case I'm just going to have both of the enums here even though it's a little bit of extra duplicated code so when we want to start our server we'll make a function for it so func start server and I should probably go with the lowercase s considering it's going to be local and we will put our colon there and we need to do the same thing that we did earlier right we need to create a new multiplayer websocket peer so we'll come up here VAR peer is equal to websocket multiplayer peer dot new and then we can just come down here and start our server so we'll type peer.create server and we have to put a port so we'll do eight nine 15 I believe is what I chose now we'll abstract that into a port up here in about five seconds but we'll want to make sure this works so we'll print quote started server like that easy enough and now we can actually kind of test this so if we come to our control node here we right click add a child node adding a button we can duplicate that button we'll call one start server and one start client like that and then we can call this start client and then start server like that I'm going to grab my start server I'll drag it over to the other side that way I don't get confused so I'll just throw these guys both on the opposite sides of the screen and I'm gonna go to my start client click on node button down I'll double click on that click on my client hit connect and then when we do this we're going to just connect to server like that when we want to start our server oh we have to pass in an IP so we'll put quotes just so that it's empty because we're not going to use it right now we'll go to start server we'll double click on it start server we'll connect that to our server and we will hit connect and then we'll change this to start server like that and now if we've done everything correctly we can just hit play we'll come over here we'll hit start server start a server start client started client easy enough now that's cool but how do we know if we actually successfully connected ourselves right because it really doesn't tell us much well here's where sending packets of information comes in handy so if we go to our client here you can see we have our connect to server start client button we need to create a button to actually just send data to our server so that way we can actually test our stuff so I'm going to right click add a child node adding another button we'll call this send test packet and we'll connect that to our client like that now I'm going to go in here I'm going to drag this guy down so that it's in a proper spot go to my script and it'll say on button button down and we'll say Pier dot put packet and that's how you send data but you'll notice it requires a packed byte array and what that means is that we have to actually change our data into some kind of encoded data okay so let's create some data for us to test so I'll say VAR message is equal to bracket bracket quote and we'll put something like message colon message dot join let's say and we'll come in here we'll pass in something like data colon test I think that that's pretty a pretty easy thing to test here and you'll notice that when I hit s that's because this is running so I'll stop it once we have our data we have to actually modify our data into some kind of binary data so we'll say VAR message bytes is equal to Json Dot stringify our message data so message dot to and you'll see we have different buffers if you remember from my previous tutorial I talked about the difference between ASCII utf-8 utf-16 utf-32 ASCII is great for English words utf's eight is great for English words for the most part utf-16 is great for English and symbols and utf-32 is great for symbols English and basically most languages so in my case I'm going to do utf-8 and then I'm going to pass in message bytes now you might think okay cool so we're going to pass our data across to our server right well yes but our server needs to be able to read this data so how do we read that data well that's where server pulling comes in so we'll come down here to our server and I should probably close all of these guys so let me close everything open up these two we'll come to our server and we'll type Pier dot pull and that's going to pull our server socket if that makes sense so what polling does is pulling basically just says hey make sure that this socket is open and make sure that you are receiving or not receiving data it basically says hey hold the socket open for one second and if any data comes through then get that data now unfortunately that doesn't that's not the only step that we have to do we actually have to get that packet so we have to say if Peer dot get available packet count is greater than zero then we can go ahead and grab that packet so VAR packet is equal to peer.getpacket like that if our packet does not equal null then we can actually start parsing our data now we need to convert our data from a byte array to a string so we can say VAR data string is equal to packet dot get string from and we have to choose the exact same encoding so in our case we did utf-8 so we'll do utf-8 in this case and then we need to pull back our data and parse it so VAR data is equal to Json dot parse string data string and that'll pass back our data so then we'll just print that out so print data now I know this might be a little confusing so let's take a step through this so first things first we're we're pulling up here and pulling our peer is basically pulling our socket you could just call the socket if you want to that's up to you um I called it peer because it's a websocket multiplayer peer so that's why I called it that it's up to you guys but first we're pulling our peer data so we're actually pulling to see if we get data we're checking to see if we have received data if we have we're going to get that data and then we're going to verify that it's not empty that so somebody didn't send us garbage data then we're going to come through and we're going to get our string from utf-8 so we're going to pull our data from our byte array which if you remember a byte array is basically just how data gets pushed through the network we're going to change our data from byte array to a string and then we're going to parse that into an object and that's basically how this works now same thing on the client end we have our button where we have our data we're going to make it into a byte array and then we're going to send that data so if I hit play and I start my server I start my client and then I hit send you'll notice nothing happens matter of fact we're getting an error so what's going on with that but you can see it says here condition get connection status connected is true returning error unconfigured uh put packet well that's not ideal right and that happens whenever we want to send a packet right anytime we want to send a packet it bricks on us why is that well that's because our packet peer is closed when you create your packet peer and then you create your client only stays open for one second so to keep that stuff open you need to actually pull your peer so peer dot poll and as long as you do that every frame it's going to keep that socket open for basically ever so we'll hit play we'll come over here start server start client send and you will notice that we have received our data so our server has received our clients information now I know that you might be thinking okay but I don't understand we're on the same computer we haven't done anything but we actually have see if I have two versions of this window so if I go to debug run multiple instances run two and I hit play and I hit start server I'll move this guy over here and then I connect to that server and I send you'll see that this guy got that data and this guy sent that data so that's how it works is that we can actually send and receive data to our server doing this method and this is basically going to form the basis of our entire dedicated server system now once we have this we have our basic communication going we now need to basically send data from our server to our client so we're going to do it the exact same way I'm basically going to come in here I'm going to right click add in a child node I'll add in another button right we'll drag this guy out something like this and we'll have us send a test packet as well so we'll connect our button we'll click on server we'll connect you'll see we have another button down here and we can send a packet so we'll just do the exact same thing VAR message is equal to bracket bracket quote message colon message dot ID comma quote data colon test and then all we have to do is just hit peer Dot put packet we have to put a byte array so we'll just say Json dot stringify we'll pass in our message dot two utf-8 puffer and that's basically a really short-handed way of doing this now technically if you really wanted to be super short-handed and extremely obtuse you technically could just do this as well and that's technically valid uh instead of passing in the message but I'm going to do it this way because it's a little bit cleaner than doing it the other way because that's quite dirty but once we have this we can just go to our client and then basically just copy our server code right so I'll just copy this bit of code here I'll just basically grab the whole thing copy and then just hit enter and paste right and then if we hit play we can go start server start client send test packet you'll see that it received that test packet if we click this guy you'll see it received the other test packet and they're slightly different you'll see that's why I did ID versus not ID right so that's cool but if we connect so I have a second guy here right so if I grab my server so let me grab that real quick if I connect this guy so start client I've connected if I hit this you'll notice that I get it twice did you notice that I have two that's because I have two clients connected so what does that mean well if we look at our server that means that this broadcasting our data it's not sending it to one specific peer so what does that mean as you may remember when a user connects to something they get assigned an ID and we need to basically keep track of that ID when we do our peer connection so the nice thing about Godot is that they actually have a function for that if we come up to our ready and we type peer.connect quote peer underscore connected comma and I'll just basically grab this guy and I will paste it we can do the same thing for disconnected so peer disconnected and then disconnected and I could basically just grab this guy scroll down and make a function for it so I'll come in here bunk peer connected I'll pass in their ID and then we can just hit pass and we can do the same thing for disconnected Funk peer underscore peer disconnected ID and then pass now what this is going to do is there's going now what this is going to do is it's going to be a signal so these guys are going to run anytime a player connects or disconnects so what can we do with that well if we come up here we can just say VAR users is equal to brackets and that's going to allow us to keep track of our users and then we can come down here and when a peer connects we can say print peer connected colon plus Str ID and then we can just say users brackets ID is equal to and then we can put in information about that user in my case I'm going to say ID colon ID and that should be it for right now we're going to probably do additional stuff a little bit later but for right now I think that's going to be the simplest and then all we have to do is just send a message back to the peers with their information so how do we do that well we have this right here right so we can basically just say peer dot send put packet and then we could pass in our packet byte array right just like we did here so actually I could basically just copy this and paste it right well not quite right a our message needs to be changed to user ID right like this to send that data and this would work but it's going to send it to everybody it's not just going to send it to just the player that I care about so what do we have to do to get it so that we can send that data back to our player so the easiest way to do it is to get your peer so we can say peer dot get peer and we have to pass in an ID in our case we'll say ID dot put packet and then we can pass in our Json string to utf-8 so we'll pass that in and that should allow us to send that data directly back to our player so how do we know if we've sent that data back directly to the player well if I hit comma here I'm going to hit quote message with a lowercase M that's probably going to mess me up quite a bit today but we'll see and then I'll hit colon message dot ID we'll put our packet we'll hit Ctrl s we'll go to our client and then we'll receive that data and I will say if data Dot message is equal to message dot ID then I know that this data is my ID packet okay so what I'll do is I'll come up here and I'll set my VAR ID equal to zero and I'll come up here or I'll come down here and I'll say ID is equal to data Dot and I believe I used the words ID you see right here so we'll come in here we'll say data dot ID and then we'll print my ID is plus Str ID we'll hit play start server start client you'll see that when I click Start client it did a peer connected so we ran through connected here we created an object with that user ID we sent back that ID to that specific peer and it says my ID is this and you'll notice that we only got it once we didn't get it twice which means that our code is working properly we got back the correct peer and we sent their data to them specifically we didn't send it to anyone else in the project as a matter of fact if we refresh this you'll see I have two of them if I start my server I start my client and I start my client you'll see that I have peer connected started client peer connected and they have two different IDs as a matter of fact if we drop a break point right here in our server and we take a look we go to our users well you'll notice our dictionary is zero that's probably because it needs to be in session one so uh Pro tip if you don't know anything about godot's braking system there's two sessions here because I have two windows open so you can see I have window 1 and window 2 which are not opening up because I have them in break mode but I have two sessions you'll see here the user is zero and the reason why is because the server is not running but if I go to session one you'll notice that I have two users right here and they both correspond with my actual players our user registration system is basically done now granted if you wanted to have something a bit more crazy like user authentication and stuff like that you can definitely basically use this and just expand on it right create a database store the user credentials things like that but we're basically done with this so what's next for a server right well usually you have something like a Lobby or something like multiple rooms or multiple games going on so what can we do to build that out well if we go to our server and we scroll up the first thing we're going to need is a VAR Lobby like that and I would definitely suggest making a Lobby object so how can you make a Lobby object well if we come up here file new script and just type Lobby or capital L Lobby I usually like to do capitals for my scripts we can come in here and have all sorts of information first things first I'm going to say class underscore name is Lobby and then we'll start building out our lobby object so what are some things that a Lobby needs to know well I need to know who the host is so host ID right I'll make that equal to an integer uh we need to know what players are in it so of our players I'll make that a dictionary will initialize that dictionary as well and I think I should probably capital h capital P because I want to have some kind of naming convention so it's going to get used outside of the thing then I want to keep track of that outside of that what else do we need well we need a way to initialize it so we'll say funk underscore initialize right and what are we expecting the player to have well when it gets initialized we're gonna need to tell it who the host is so we'll pass it an ID and I'll pass in host ID is equal to ID right we need the ability to add a player so funk add player and we'll pass it on ID and I imagine that if we're adding a player we're going to want to do players bracket bracket ID is equal to and we can pass in whatever information we want right there now what information do we want to pass in when we add a player well I imagine we're going to want to add in an ID we're going to add wanna add in possibly a name and we'll probably want maybe their index if they have one but I think that should be held by the actual server itself now you might be asking what an index is used for and don't worry we'll get to that in a little bit so we'll say Name colon name comma ID colon ID and then we'll say index colon and I'm just going to do players dot size plus one and then we'll just return players ID like that that's pretty much everything that we're going to need to do for our lobby now we could extend a node or we if we want to just extend a base Godot object we could do a ref counted and that'll basically extend without having all that extra node stuff so it doesn't have to exist inside of godot's world so I'll do that just because it's going to create a smaller object now if we go back to our server how do we actually create a Lobby well that's something that we have to build ourselves so what we'll do is we'll create a function I don't know somewhere down here by start server I imagine so I'll just create one right here and we'll say funk join Lobby like that we'll pass in a user ID and a Lobby ID now when we want to join our lobby we're going to be passing in a user ID and a Lobby ID the reason why is because we're joining a lobby but what if somebody doesn't have a Lobby yet what if they don't know what the lobby ID is right because they haven't joined one yet and they're ready to start playing a game well that's where creating a Lobby makes sense so we need to actually do that we can't have a Lobby without having one already existing right so we'll say if Lobby ID is equal to empty then we know that we have to create one so we'll pass Lobby ID is equal to and we need to generate a string and since Godot doesn't really have a good generation system we actually have to build that out ourselves so I'm going to come in here and type bunk Generate random string and I'm going to say VAR result is equal to empty for I in range of 32 so I'm going to make it a 32-bit character because I can't imagine that we'd have over a couple million lobbies so we'll do 32 if you needed a bigger Lobby number right if you're having collisions or something you could uh expand that into like a 64 or 128 bit string but really 32 should be totally fine for most people we'll say VAR random index is equal to rant I percent sign and we'll need to randomize our characters that we have now we need to actually generate our random string so we need to actually have a pool of letters and numbers that we can use so I'm going to scroll up to the top I'm going to say VAR characters is equal to quote a b c d e f g h i j k l m n o p q r s t u v w x y z and then I'm going to do Capital versions of that so I'm going to type a b c d e f g and then we can do numbers as well so we can go zero one two three four five six seven eight nine and that should do it now if you want to you could also add in symbols like so if you really wanted to but really let's just stick with this because that should work totally fine now once we have our characters we can scroll down here and we can basically just set up our stuff so we'll say VAR index is equal to Rand I percent sign characters dot length like that and then we can go result plus equals characters and then we could pass in that index whoops indent index like that and then we can return our result and now we can go back here and we can go Lobby ID is equal to result and then we can add our player and then we can add our lobby so we can actually initialize our lobby so Lobby I believe I called it Lobby I just called it Lobby I think I should call this lobbies lobbies that'll probably be easier so lobbies bracket bracket Lobby ID is equal to Lobby dot new like that and you'll notice that it's going to get mad at us and it says Hey too few arguments called for new that's because we did an initialization right here where we require a host ID of some description so we'll come in here and we'll pass in our user ID like that and that's going to create a new Lobby and now all we have to do is ADD our player to that Lobby so if you remember we have a section here where it adds a player right it creates a player and adds it so that means we could say VAR player is equal to lobbies Lobby ID Dot and godot's auto sense is being unhappy with me so I'll say add player and we'll pass in our user ID like that now you might be asking okay hold on so why did we create this and then do this why did we add a user or uh create a lobby with a user ID and then add a player with that UC ID if you look at our lobby we are setting up who our host is and we only want to run that when a Lobby is created when a Lobby gets created we need to say designate somebody as the host so that means that you need to have that information on creation and then we can add them as a regular player so we're designating them as host on creation and then we are adding them as a part of the actual Lobby itself and that's basically how you create a very simple Lobby now we need to send that information back to the player and that's actually pretty easy so first things first we'll say VAR data is equal to bracket bracket quote message bracket or colon message Dot user connected ID colon user ID comma host colon lobbies ID dot host ID and I believe we actually capitalized host ID for naming convention purposes so say host ID comma player colon lobbies ID Dot players now you'll notice that we get IDs not declared that's because it needs to be a Lobby ID because I'm crazy and I forgot and we'll pass in our user ID like that and then we'll just send that data so to send the data we'll do exactly what we did up here where we want to do peer.getpacket ID Json and then pass in that information so data and we'll need to pass in our user ID now you might be thinking man this is kind of cumbersome yes so what we'll do is we'll come in here and we'll make a function for this so Funk send to player and I'm going to pass in user ID comma we'll pass in the data and then all I'm gonna do is basically just take this guy Ctrl X paste and then just do send to player and pass in our user ID comma data and that's just going to make things a little bit cleaner especially since we're going to be sending data a lot so I want to make sure that our stuff gets sent properly across the wire so now we just need to actually join our lobby on our client side so we'll go to our client we'll actually come over here we'll copy this guy and paste it and instead of send test packet we're going to disconnect that we'll change it from send test packet to join Lobby and for us to be able to join a Lobby we're going to need to have some kind of way to tell us what Lobby it's going to be so I'm going to put in a line edit real quick right here and we'll pull this guy over now when we want to join a Lobby if I drag this guy up here like this and I select button I'm going to call this join Lobby we're going to select our node button down and we'll connect that to our client and hit connect now when we want to join a Lobby on our client side it's actually relatively easy all we have to do is come in here and say VAR message equals bracket enter quote ID is equal to our ID comma I believe that's what we called it yup quote message colon message Dot Lobby comma quote Lobby value and we need to get a reference to our line edit so what I'm going to do to make this easier is I'm going to throw this under the client just because it's going to make things a little easier so we'll hit dollar sign line edit dot text and then we can send our data peer dot put packet and we'll pass in our Json Dot stringify and we'll pass in our message.2 UTF 8 buffer and that should just work so now if we hit Ctrl s we hit play we pull this over we start our server start our client we'll hit join Lobby and you'll notice that nothing happens but if we click on output you'll notice that we're getting the data that we expected so what gives right what's going on well much like everything else we need to parse that information if you look at your system here when we throw a break point here we hit join Lobby we actually receive that data it exists we have received it but we haven't handled that packet properly so how do we handle the packet properly well we can just check if our message data.message is equal to message dot Lobby and if it is then we can join Lobby and we can pass in data.id comma data Dot and I believe I used the word Lobby value so we'll hit copy and paste so if I put a break point here I refresh everything I start my server I start my client I click join Lobby you'll see we get a break point here if we hit play you'll see we get breakpoint right here you'll see that our data right here is our ID our lobby value and our message you'll also see that our data string is right here if we step into that we're going to join our lobby our lobby is going to come through and create a new Lobby which in this case I think I made a mistake let me take a look at our lobby ID here our lobby ID is empty so Yep this is going to Brick on us because we did not set up our Generate random string so this needs to be Generate random string so that's my fault so let's refresh this and try it again so we'll start our server start our client join our lobby it'll come through it comes through we'll come in here you'll notice that it's going to attempt to generate a random string we'll put a break point here just to verify that it worked so let's take a look at our results that is correct that's what we're expecting you can see it's a random string and then we can hit enter enter it's going to create a new Lobby like so if we take a look at our lobby that we got back so if we go to our globals here you can see we now have a Lobby in our inspector so you can see right here that is a Lobby object so perfect that's working we can add our player and we have a crash invalid call to function add player so that's not good add player ID name add player did I do something incorrect here on base ref count Lobby expected two arguments oh it expected two arguments ID and name so something that we forgot to pass back from our client is our name so we'll pass that in so quote name we'll just pass something empty for right now I think that that's fine and then that means that when we want to add our player we need to pass in a user ID in this case I'm going to go ahead and pass in a user in this case I think I'm going to pass in our little user data so we'll say user instead and then I'm just going to pass in all of that data instead and then we'll come in here and just do user.id and then user.id comma user dot name like that and then we'll pass in for Lobby ID we'll just do user.lobby ID I believe that's what we used anyway if I take a look at our client it's Lobby value so that's my fault so we'll come back to server Lobby value and it is very mad at us Lobby ID is not declared so we'll do user dot Lobby value we'll copy this guy user.lobby value user.lobby value user.lobby value user.lobby value and we'll do user.id user dot ID user.id data I think that will work so let's try that again we'll make sure we have actually we'll make sure we have a break point there we'll hit start server start client join Lobby it's gonna run through this we'll join our lobby we'll run through we'll generate a random string so user dot Lobby value is now set properly we'll come through here we just created our lobby we'll add in a player so that seems to have worked so if we take a look at our lobby real quick you'll see that we have a lobby with a player in it and the player has an empty name an ID and an index awesome so now if we do this it'll send the data back to our player like that now we don't have anything that's catching that data so we have to go into our client and actually do the exact same thing so you can see how this is passing in a message called user connected so we have to go back to our client and actually hook that up so we'll say if data.message lowercase m is equal to message dot user connected then we need to actually set up that a user got connected so we'll just create a function for connecting up here so we'll just say create peer and we'll pass in data.id at least for right now we'll just pass in the ID and I'll just create a function for that so func create pure and we'll pass in an ID and I'll just pass for right now and the reason why is because this is where we're going to put in our webrtc connection stuff so we'll just scaffold that out a tiny bit and get that going so next what we need to do is we need to set it up so that other players can join that Lobby so if we head over to our server and we take a look at it you can see that we have our join Lobby code right here so what we're doing is we are creating our lobby right and then we're coming in and we're creating some data and we're sending it back to our player now what happens if another user joins a Lobby right so if we actually print out our lobby information so if we come in and say print or actually I think I'll do it up here so if we come up here and just say print user dot Lobby value like that and we refresh this real quick if we create a Lobby so we start our server start our client join Lobby and we hit play and we hit play we hit play you'll see in our output we'll have a good right here now if we copy this guide and I get rid of these break points we might want to keep one just here so the way we have it but if we take our other one which I believe is this guy here we start our clients we connect we paste and we join you'll see we're gonna hit a break point we're going to step in like so you'll see that we're going to skip over this guy we're gonna get added to that Lobby so you'll see that we get added to the lobby properly so we can actually look at our lobby and you can see we've been joined and then we're gonna notify ourselves that we have that data so if we come over here and we throw a break point here we hit play you'll see we've broken right here and you can see the that we are receiving that data now just one peer has actually received that data so if we were to have like a list of people inside of our level here we would just see the one right because we're not handling the players properly in an easy way to tell if we're doing it properly is if we come up here we could actually come in here and add in to our game manager right here dot players and we can just pass in ID is equal to and we'll just put uh actually I don't think it would be ID it'd be data.id and then I believe we would have to if we look at this it'd be dot player so we'll say data dot player and now if we actually test this real quick you'll see we'll start our server start our client join our lobby we'll run through we'll get our output which will be this guy right here we'll copy it we'll paste it start our client join our lobby hit play and then if we go to our client and we drop a breakpoint on our process if we go into our game manager here you'll see that we have a dictionary of one if we go to session one and we do the same thing and we go to our dictionary you'll notice that we have one player you'll also notice that they're different players 2975 and if we look at our other game manager one eight one two now the reason for that is because we're not sending our data to everybody else in the lobby everybody needs to be synchronized and everybody needs to be happy for everything to work properly so we need to actually have it so that everybody synchronizes up so what does that mean how do we approach that well it's actually easier than you might think so if we go to our lobby and we look at our server I'm sorry and we look at our join Lobby here we actually need to basically run through Loop through all of our players and then send that information to everybody so what we'll do is we'll come in here and we'll say 4 p in lobbies and we'll get back our lobby ID so user dot Lobby value Dot players colon and I believe its players will double check real quick it's capital P not lowercase p so we'll grab players 4p in our players so we're basically pulling back all of our players in our lobby and when we do that we'll send our lobby information to everybody so we'll say VAR Lobby info is equal to bracket bracket quote message colon message dot Lobby comma and then we can come in here and pass in any additional information we need so in our case we need our lobby information so Lobby colon lobbies bracket bracket will pull back our user information Lobby value like that and if you want to pass in additional information like player data things like that you can what I will do is I'll just pass in our lobby lobby value and then I will say dot players and I'm going to wrap this in a Json stringify so I'll wrap this like this and I'll say Json dot stringify now you might be asking okay hold on a minute why would you stringify something inside of your object well here's why because this is a list of objects sometimes Godot gets really confused and has problems with transferring data like that so we may or may not need this but a lot of times Godot gets funky so I just Json stringify that it forces that into a string and then it gets stringed into this object here and it can help with making things a little bit simpler for Godot to understand and then we could just send message send to peer and then we have a user ID so it's going to be P comma and then Lobby info like that and that's going to send that Lobby info down to our clients and then we can go to our clients and then we can basically just set that up so I'm going to get rid of my game manager section here I'm going to add in the ability to read the lobby information much like before so if data.message is equal to message dot Lobby then I know I'm getting my Lobby information so I can actually parse that information and get my stuff going I know that my game manager dot players is going to be equal to my data Dot Lobby I believe we called it Lobby that's probably not the best name for it it's probably better to have players probably just because that is what this is It's The Player's information so we should probably do that so we'll pass that in players so I will go data players like that and something to keep in mind is that we're going to need to Json parse that information so we'll type json.parse string and we'll pass this guy in like so and that should just work so now if we come in here we drop a break point right here we hit play start a server start a client join a Lobby it's going to send us our data here if we step over we have a crash invalid get index player on base dictionary so let's see what's going on if we look at our dictionary it's dot players not DOT player so we'll try that again so start server start client join it will parse that data we're going to let that run through and then we're going to grab our second one here we're going to go to our output grab this information right here copy it paste start client join Lobby we'll hit play and then let's see if we synchronized our data so we'll put a breakpoint on our poll real quick and we'll also join right here if we take a look at our game manager you'll see that we have our two players if we look at session two and we go to our game manager you will see that we have our two players perfect that's exactly what we wanted so now our lobby is basically done right we're holding on to our players information we have their ID their index and their name so when we set up the user sending over their name we'll be able to have that information right on hand and this can be useful for sending any type of data you could send pictures things like that you just store it in your lobby and then you're good to go or of course you could start you know differently if you needed to but this is basically the basics of how to get that to work now that we have our lobby stuff figured out we basically need to set up how we're going to transfer our data for webrtc so if you remember at the beginning of the tutorial we talked a lot about how webrtc works right you have this whole signal exchange you have this information exchange and then they basically transfer the data to each other and then they're happy right and then they create that connection so first things first we need to create that pure information to be transferred right so we'll come to our client here and we have this thing called create peer if you remember we we talked about how we were going to do a webrtc connection here and I was going off of our data message ID data message user connected now we don't actually have that set up in our lobby side yet so when a user connects they get back that data if you remember we have we have a loop right here that's going to let us Loop through our players but we're going to need to send our signaling information across the wire as well so since we have to do that we're going to need to actually code that in here so let's go to our client let's get our webrtc see stuff settled and then we'll go from there so first things first we're going to create a peer off that data ID so we'll first check if our ID does not equal our own ID and I believe we called it ID so we'll just say self.id colon and then what we're going to do is we're going to initialize a connection so we'll say VAR peer colon webrtc peer connection is equal to web RTC peerconnection dot new and that's going to create a new webrtc peer connection easy enough now we need to actually initialize that connection so we'll say peer dot initialize and we need to pass in a configuration dictionary so we'll pass in a dictionary and we will add in ice servers colon space bracket bracket brackets and we'll pass in an array of objects and we'll say quote urls colon space and that'll be an array of strings here and what we'll do is we'll say stun colon stun dot l dot google.com colon one nine three o two now what this is is it's a stun server that Google allows people to use for free so if you need to use it for testing and things like that that is what this done server is for now I wouldn't expect to throw a bunch of data at it but you can throw some test data and do some initial stuff like that I would strongly suggest that you set up your own stun server if you can but you can use this temporarily while you're testing and then I'm going to print binding ID Plus Str ID and then I'm also going to notify what my ID is that way I can keep track of what my ID is so that way I actually have um an understanding of what kind of information I'm passing through the wires because I don't want to bind my own ID necessarily so I just want to make sure that everything's copacetic and that we have everything set up now once we have that we're going to go in and actually create our session description so we'll say peer dot session description created dot connect and that is a signal by the way so in the session description is created I am going to connect that to myself Dot and we're going to make a function of some description so I'm going to add an offer created function and then I'm going to pass in my ID and we're going to do a DOT bind and we're going to pass in my own ID like that and then we need to do the exact same thing but this time we have to do it for when our ice candidate is created so I'm going to say Pier dot ice candidatecreated dot connect self Dot ice candidate created and we're gonna bind our ID like that and that means we got to create these functions so we'll come in here and we'll say funk offer created and I'm gonna pass in an ID and we'll pass for right now and then we'll come in here and say funk ice candidate created and we'll pass in our ID there we go I'm gonna make sure these are exactly the same so we'll just copy these guys and paste them just to make sure they're good and happy to to work and then once we bind that information then we can actually add them as a peer so when you add someone as a peer you need to have that webrtc multiplayer peer created right so you have connections and you have peers okay and much like how we have our websocket Pier it's the exact same thing so we'll say VAR RTC peer is equal to webrtc multiplayer peer and we'll make that equal to a webrtc multiplayer peer dot new and that's just going to create that webrtc multiplayer peer and I need to do colon not equals for that but webrtc multiplayer peer is basically your actual peer socket connection so it's how you do your actual connection to other people down here this peer connection describes that connection it basically says this is who this person is this is their information this is how I do the connection so this guy here basically just explains basically just does the connection itself and this guy explains how to do the connection if that makes sense now once we have that then we can just come in here and say RTC Pier dot add peer and we can add our peer comma our ID and what this is is it's basically like adding a dictionary so we're associating this peer with that ID so we're saying that that ID is this person and that way we can keep track of all of our users information when we do our connections and our signaling and then we're going to need to create an offer so we can just go peer dot create offer like that now when you create an offer you don't want to create an offer from the lobby you only want to create an offer from the peers themselves so everyone's kind of connecting to one Central person that's kind of Distributing the connections to everyone else if that makes sense so what we'll do is we'll say if not host self.id and actually I should probably call this host ID now you might be wondering well hold on you don't actually have a host ID you're correct so what we'll do is we'll scroll up here we'll say VAR host ID and we'll make that into an integer like that and then when a user connects to the lobby we actually pull back that information if I remember correctly so we can actually come in here and take a look I'm pretty sure we pull back right here under user ID we pull back what our host is so we'll just come in here and under ID we'll type host ID is equal to data Dot host like that and in theory that should work now unfortunately I can't just say okay guys like we can test this and show it and it's going to work because unfortunately we can't we can't actually do our test without building out the offer created the ice candidate created and all of that happy Jazz so let's just build all of that out so we'll come down here to our offer created and we're going to change our input parameters so I made a mistake on the ice created and the offer created we need to pass in the type comma the data and the ID for offer created and then we have to come in and basically create our local description so first things first we want to make sure and do some error checking to make sure that we actually have that peer right somebody actually exists and is able to be connected to us so we'll say if not RTC peer dot has peer and we'll just pass in our ID just to make sure that if for some reason this function's called and we don't actually have a peer we don't want that to blow up on us right because if you send an offer to somebody who's not up here then it just really can make webrtc confused so we don't want that to happen it can actually make the dough crash so we want to be careful about that and then we need to actually set their local description so we'll say RTC peer dot get peer ID dot connection dot set underscore local underscore description and we'll pass in type comma data now I might be asking what does that mean so think of it like this when you're setting your local description you're setting your own local description so I send my local description so I create one and then I send it to you and that becomes your remote description and then you create your own local description and then in response you're gonna send that to me and then I have a remote description of you so that's the difference between a local description and a remote description a local description is my interpretation of me and how you can connect to me and my remote description of somebody else and that becomes the remote description for everyone else of my system so that way they know how to communicate with me if that makes sense now once we have that we actually need to determine if our type is offer so if type is equal to quote offer and if so then we can send an offer so we'll say send offer like that and we'll pass in an ID comma data and then else we know that our type is an answer so we'll send answer like that and we'll pass in an ID comma data now we don't actually have a send offer and send answer created yet so we actually have to do that so we'll come down here and we'll create our send offer and send answers so funk send offer ID comma data colon will pass for right now and then we'll do the same thing for send answers so funk send answer ID comma data and that's basically how we're going to send our offer and our answer remember an offer is me reaching out to you saying hey here is my information and an answer is you saying hey here is my answer on that information now the nice thing about this is cadot makes it really really easy so I'll just say VAR message is equal to comma ID colon ID quote we're going to get an original Pier so org Pier colon self dot ID quote message colon message dot offer comma quote data is going to be data comma and uh because we're going to be sending our data and we're going to be relaying some data I'm going to want to pass in my Lobby information so I'll just pass in lobby colon and we should probably get some kind of Lobby value now if we check I actually don't have a link to my Lobby information so we'll say VAR Lobby Lobby value and we're going to make that equal to an empty string I believe we pass that data back if we check our server real quick we do pass that data back let me see actually I don't think we do pass that data back so we're going to need to pass that data back so we'll come in here and just hit quote Lobby value and then we'll just pass in user dot Lobby value like that and that'll just pass back that information that way we have it and then if we look under user ID we can go into our client scroll down find it real quick so I believe that's under user ID Lobby value is equal to data dot Lobby value and then we can just come down here and pass in our lobby value like that and then we have to send that data so we'll come in here peer dot put packet Json Dot stringify message dot two utf-8 buffer like that and that'll basically just send our data to our server and then we're basically going to copy this bad boy right here and we're gonna do the exact same thing literally the exact same thing or sending our answer and it's basically going to say instead of message offer it's going to be message answer simple enough now you might think okay so you're good right we're good to go we're happy kinda but first we need to actually create a candidate okay and a candidate is kind of like saying hey I'm making a Ice Connection right I'm making a connection that exists so there's a lot of additional information your ID your uh media stream information your index and your sdp protocol description that you have to send over the wire before you can get started and that's where ice candidate created exists we'll say mid name comma index name comma sdp name comma and finally ID I guess I should probably go with ah I don't like that so sdp name I think that'll work that kind of follows the naming convention and then ID and when we do our ice candidate created we're basically sending a candidate to the rest of our group so we'll say VAR message blah blah blah basically copy and paste this code and say original Pier is my ID message type is candidate and then for our data this is where things get a little bit funky so we need to pass in our mid index and sdp we can do this a lot of different ways but really in my opinion the easiest way is going mid mid name like that copy paste paste paste index sdp like that and that'll give us basically a really easy way to pass that data up so we can create that candidate now we have to handle all of that information it's a lot of information it's going to be a pretty long part of our tutorial so we'll come into our server here and we're going to set up that stuff so that we can forward our data so first things first we need to set up when a peer correct gets connected to our lobby so that way we can actually create the webrtc connection so we'll come in here we're already looping through our players so this should be relatively easy so let's come up here and let's say VAR data and we'll pass in our players information so that way they can actually create their candidate so we'll do quote message message dot user connected comma quote ID I believe we had it under their ideas user.id and then I'm gonna come down here and do send message send to player and I'm going to pass in the P comma data and then we need to do the exact same thing but the exact opposite so we'll grab this information like this copy paste and then instead of ID being user.id we'll just do p and we'll say data 2 and then send to player user.id comma data two so what is this doing so first things first we're sending our data to the first player in our lobby so think about it like this if you're in the lobby and I join the lobby the server is going to send information about both of us to both of us and it's also going to update our lobby information as well so that way we know that everybody's lobbies are up to date could you go in and actually update your lobby information during this packet push technically speaking yes but if you did that then you might get duplicate information so I separated it out just to make things a little bit easier so once we have that that's going to fire our candidate user connected right so now we just need to do all of the rest of it right so we need to do our actual offer creation our candidate and our answer and that's actually going to be really easy so we'll come into our server we'll scroll up to our peer get available packets we'll come up here and basically what we're going to do is we're going to just pass the data so all we're going to do is say if data.message is equal to message dot offer or data.message is equal to message dot answer or data Dot message is equal to message dot candidate then we know that we need to pass that data to the other user and what we're going to do is we're going to send the data across to our other users so basically we'll just say send to player we're going to say data.id comma data and in theory that should just work hopefully so what this is going to do is it's going to relay the information the offer message answer and the candidate just over to the other peer so it's literally just going to pass that data across and let it get handled and what I'm going to do for visibility in our case is I'm going to print Source ID is Str and I'm going to pass in data dot I believe we had when we did it original Pier so we'll grab that original Pier Plus message data is and will pass in data dot I believe we used data so we'll just pass that in so that way we can actually just take a look at it and see what it looks like and now we have to do the exact same thing but on the client side so we'll go to the client side we'll scroll up here and basically we need to come through and parse that information right so what's going on is we can send the data and we can relay it with our server but we need to be able to get the data on our client and then parse that data and actually do stuff with that data and this is where the actual work kind of comes in so first things first if data.message is equal to message dot candidate then we need to actually parse that information so we can say if RTC here dot has peer data Dot and I believe we did original Pierce org Pier then we can say print got candidate colon space Plus data dot source org Pier like that and that's basically just gonna say hey I got a candidate and it's good to go and I'm also going to pull back my ID just so that I know who this is because sometimes debugging can be really painful with uh webrtc so we're going to want to make sure that we know what is going on here and then all we have to do is basically say RTC peer dot get peer and we'll say data.org Pier Dot connection dot add underscore ice underscore candidate like that and then we need to pass in our information and this is where things are going to get painful because if we look at the documentation of Godot here add ice candidate requires our media our index and our name so what that means to us is that we need to pass our mid if you remember mid index and sdp if I remember correctly hopefully this doesn't completely brick on us uh we'll have a a fun time if I'm wrong here so what it'll be is it's going to be data Dot and I believe we called it mid index and sdp so mid data dot index and data dot sdp like that and in theory with a little bit of finger Crossing this should work so say two int just in case because this has to be an integer so just in case it's not we'll make it into an integer and hopefully this will just work now what happens if we get an offer so we'll hook that part up now so if data Dot message is equal to a message dot offer then we have to do the same thing so we have to check if we have that Pier so if we have that Pier then we can say RTC pure dot get peer and we can pass in our data.org Pier dot connection Dot set underscore remote underscore description offer comma dataca dot data like that and then we could do the exact same thing on answer so copy paste and answer like that and change this to answer and now we have all of our offer all of our candidate and all of that stuff set up which is great now we just need to do one last thing before we can actually test this out and that is we need to set up a function that basically sets up our RTC mesh connection and that's going to be under ID so when we know what our ID is going to be we can create a function called connected and it doesn't have to be name connected but I'm going to call it connected just because that's easy for me to remember so we'll copy connected we'll come down here and we'll say funk connected ID and all we're going to do is just RTC peer dot create mesh ID and then we need to uh actually set up our multiplayer peers so multi-player dot multiplayer peer is equal to RTC peer like that now what this part here is doing is basically creating a mesh Network and it's basically saying I want from now on all of my multiplayer to go through this section so all this is doing is it's hooking up the RPC calls inside of Godot so if you've ever used Godot is networking libraries or if you've ever gone through my previous tutorial that at RPC over top of our um function calls that's what this is hooking up it's just hooking all that up and making sure it's all good to go so that's what that's for so that way you guys know so when we get back our ID from our host we're setting up our multiplayer connection and setting up all of our stuff and saying that that we're good to actually start our webrtc server if that makes sense now that is a whole lot of information okay and I know that you guys probably aren't going to fully understand it so don't worry um if you have questions drop them in the comments below and I'll try to answer them as best of my abilities I'll also run through the code once more once we test it all and verify that it works and it'll probably break but we'll find out something that I'm going to do is I'm going to come up here and I'm going to connect a couple of signals inside of my ready so I'm going to type multiplayer dot connected to server dot connect and I'm going to type RTC server connected I'm going to duplicate this a few times I'm going to have one on peer underscore connected and I'm going to say Pier connected and then I'm going to do also peer disconnected like that and then I'm going to save here we go so now I'm going to create those functions real quick and I'm going to say print server connected or I guess it'll be RTC server connected that way you know the difference so RTC server connected I'm going to grab this peer connected ID and I'm going to print RTC pure connected and I'm going to pass in that ID real quick and then we'll do the same thing but for disconnected so I'll just grab this guy paste enter and I will pass in disconnected real quick like this and we'll change this to disconnected now the reason why I added this is so that way we can actually do some testing because unfortunately we can't just say okay we're good to go right like everything's copacetic we're happy okay because unfortunately we can't really test if we're connected to each other via RTC without having some kind of logs so that's what this is for so I just want to make sure that we can see what's going on so now in theory hopefully if everything's been done correctly this should work it probably won't but we will see so we're gonna hit play we're going to start a server start a client and we have a small crash invalid host and base dictionary so great uh we don't have a host ID or a value so let's take a look at our server hit control F uh let's look at message dot ID that's right here so actually we don't we actually don't get back our host ID or anything because we're not joining a Lobby that would be under here so that's my fault so when we do our lobby message is when we want to actually send that data across the wire so let's go through and search for Lobby inside of here so message.lobby and we'll want to pass that data in right here instead so on a past host and Lobby info so we'll pass that in and Lobby info right here there we go instead and it's unhappy because we need a comma right here let's refresh let's try that again so start server start client we've connected we did not get to see what oh I'm sorry we need to hit join Lobby Don't We join Lobby so we've joined our lobby we have our lobby value we'll copy that paste it in here we'll start a client we'll hit join Lobby and we have some crashes invalid index ID on data so let's take a look at our data uh we called it Pier so technically it should be ID to maintain our naming convention I don't know if I like Pier so but we'll do Pier for now for testing purposes so we'll refresh start server start client join Lobby copy that guy paste it in start clients join and we got another crash here so that's always good invalid data on dictionary so let's take a look at our dictionary here this guy doesn't have any data and that's totally fine because we did not expect that mid or original peer peer sdp was going to be in here so I guess what I'll do is I'll step through the code later instead of showing you guys this we'll just do it this way because I don't want to Brick this too much so we'll try it again so we'll copy this guy in here we'll paste it start client join invalid operand string and float in operand so that's because this needs to be Str original Pier which leads me to believe that will probably run into nope I think we'll just run into that here so we'll try this one more time start server start client join we'll copy the lobby value we'll paste it in here start client join and another crash as always non-existent function 2 INT in base float so this is actually a float so actually I think we can get away with just doing that since this is a float so we'll get rid of that two int will do the same thing start our client start our server join our lobby let's try it one more time start client join Lobby invalid index did I pull back the wrong thing very possible let's try this one more time that's probably my fault we'll hit play start server start client join Lobby we'll grab our lobby information we'll come over here paste it start client join Lobby and we've gotten here RTC peer connected so if we hit Str bracket and bracket I'm going to do the same thing over here we've just created our webrtc connection so if we hit start start join we copy this guy paste it start join we have an RTC peer connected right here so what that means to us is that we actually successfully made a connection now there's a whole lot of information here right don't worry the whole purpose of this is just to show you basically how all this works so first things first we created a Lobby right right here and then we created an offer and you can see right here we've got we got a big old IP address right here because this is an IPv6 IP address and then we have our password to our connection we have our Ice Connection we have a fingerprint we have all of the information that we need to create a connection you see we have my IP address right here and then we come in here we go into our lobby we do a candidate connection we get our host information we grab our bundle information right here and then we do a request right here to request our information we do a candidate right here between each other so we both do candidates to each other and then we get our candidates we pass our signaling information we come through here we do an acknowledgment and a candidate and then we do our sdp information exchange and it looks like it's working and I'm doing that with a question mark because I'm not fully sure so what we can do if we go to our 2D scene let's grab send test packet let's connect that button so if you remember we have that right here where we're sending our Json data to our server and verifying that our server is working well instead of doing that what we can do is we can get rid of this and we can just go ping like that now we can come in here and just create a function for pinging so ping like this and we can basically just say print ping from Plus multiplayer dot get remote sender ID and then up here we can basically just go at our PC any pier and we can come in here and say ping dot RPC like that and it's gonna get mad at us invalid operands string and int so we'll just say Str Ike like that and hopefully if we refresh this and we redo our connection so start server start client join Lobby we grab our lobby information we come in here paste start join we do our connection and then we send a test packet you will see that we get our ping information if we send a test packet you'll see that we get our information awesome so now our webrtc stuff is actually working which is amazing right we have our stuff actually working and it's actually doing what we would expect it to do so at this point we do need to set up a dedicated server so we have our server code here but we actually need to set it up to be a dedicated server now if you remember my previous tutorial I talked about how to set up a dedicated server but if you need a reminder if we just go if quote dash dash server in OS dot get command line arguments then all we have to do is just print hosting on Str and we'll pass in a port in our case I believe we're doing 8 9 15 but we'll probably have to just come up here and just go at export VAR host Port like that and I'm just going to set this to 8 9 15 and then I'll just come in here copy it and paste that way we can actually have some kind of Hosting system here and then we can just go with peer.create server Post Port like that and we should be good to go and that's going to allow us to set up a hosted server and now all we really have to do is upload it to digitalocean or to whatever self-hosted system that you guys have so let's go ahead and upload this to digitalocean alright so to get our stuff to work in digitalocean all we really need to do is create a droplet now I already have one created but I'll show you guys the process so you guys can see what it's like so if I click create droplet you'll see that they have different locations so if you are in you know the United States you can use the New York or San Francisco or if you're ever in Europe you can use one of the European ones right so you can basically pick whichever Data Center and region that's applicable to you but once you pick that then you can pick what kind of image you want now in my case I'm doing Ubuntu but if you're a fan of Fedora or Debian or something like that you can do that that's totally fine when they do choose size you can actually pick different optimized systems what I suggest for testing is either do the seven dollar premium AMD or go to regular and then hit over and you'll see that there is a four dollar five twelve megabyte one CPU little guy here you can use this one this one works for 99 of things that you're going to be doing just for testing purposes if you're going to be doing stuff that's a bit more in-depth or a bit more difficult you can actually go up to the six or the 12 and that's totally fine if you scroll down they're going to have additional storage you're not going to need that uh be sure to throw a pass password in because then you can actually create a root password and that is the password that you're going to use anytime you want to install something or adjust something that requires root on your machine and you can come and add these guys in if you want I didn't because I don't need those and then finally you can set up which project it goes to how many you want of them and what the host name is going to be now in my case I already have a droplet it's right here it's called my YouTube droplet and this is the one that I use for my YouTube channel now once I get the service up and running you guys should be able to connect to it and use my server for your own testing and your own playing around but for right now let's go ahead and set our stuff up so first things first if you click on Console it's going to open up a console so that way you have a console to your system now something to keep in mind is you're gonna need to set up transferring data to your digitalocean system they have a tutorial on how to do it right here which is basically how to transfer files with digitalocean and they run through exactly how to configure it and set it all up and things like that so you guys can follow that but the tldr is if you install a tool called putty it's going to install a tool called puttygen and puttygen allows you to generate a private and public key and basically you can set up your putty gen to be however you want it to be you click generate you kind of move your mouse over the blank area and that's going to create some Randomness and it will generate out a key and once you have this key you basically can just copy this guy you can come into your digital ocean here you can come in here and type Nano tilde key slash dot SSH slash autho authorized keys and then we can hit enter and you can see that there is a key right here in your case you probably don't have one and that's totally fine so what you could do is you could paste it hit control X it's going to ask you to save hit why and enter and then it should be good to go and then all you have to do is you come in here you click save public key and you save your public key out onto your hard drive so in my case I have a putty.ppk file so you save that and then you come in here and save your private key it'll say hey do you want to save this without a passphrase I'm not too worried about it because it's my own local stuff but if you need a passphrase go ahead and put them right here hit yes and then change click on putty PPK as well and save that guy once you've done that if you go into your filezilla which you can see I already have a filezilla here you can click on edit settings you can click on SFTP and you can see right here I have linked my putty PPK so we can click add key file scroll down until you see your putty PPK file and hit open and then if you do that it will add it to your project right here all you have to do is you click on this little button right here open site manager and then you can add in a new site change the thing to SFTP set your host to your IP address that is right here so it's this IP address in my case it's this IP address in your case it'll be whatever your IP address happens to be and then your Port is just going to be default username is root and then change your login type to interactive and that should do it for you so you should be able to click connect once you have that set up and it should just connect in my case I already have one set up so I'm going to click droplet and it will connect to my droplet you can see right here it's connected to my droplet now once we have that we need to set up exporting inside of Godot so let's go out to our project here let's go to project project settings go to General run and set our main scene as our control scene hit close Ctrl s project export and let's set up a Linux export so we'll go to add Linux and all of this by default should be okay so we'll click export project we'll come in here I'm going to create a folder called Web RTC tutorial and that's going to create a folder out in my documents folder called webrtc tutorial I'm not going to export with debug although you can and that's totally fine I'm going to click save and it's going to go ahead and Export all of that out so if we look in our documents folder here you should see a webrtc tutorial right here you should see that there are three files right here we have an so file a pck file and an x8664. x8664 is your actual executable so it's like an exe in Windows pck is your package file so it holds all of your good dough stuff like Sprites and things like that that are being used and so is all of your additional Godot information so what we'll do is we'll go into our FZ right here I'm going to go into my documents scroll down until I see I believe there should be a webrtc tutorial which is not actually showing up so I'm going to do is I'll click on my documents here and I will look there it is right there sometimes this doesn't update all the time you can see I have my three guys here so what I'm going to do is I'm going to right click create a directory and I will call it web art web RTC tutorial I'll double click on it and that's going to let me access it I'll grab drag these guys over and it's going to upload now this could take a while it might take five seconds in my case it was pretty quick but sometimes it does take a long time to do now what we'll do next is we'll open up our console here I'm going to hit LS to list all of the directories you'll see that we have a webrtc tutorial right here so I'm going to type CD webrtc tutorial LS and you'll see that we have our files right here so now all we have to do is hit dust slash quote webrtc with godotutorial DOT X 8664 and we'll hit enter and you'll see that we get a permission denied so what does that mean well that means that we actually don't have permission to run this Linux doesn't know what this is and it says hey hold on a minute like are you sure you want to run this now generally speaking when doing permissions you want to go with least permissions possible to make it so that you have the best possible success in securing your stuff in my case since this is a tutorial I'm just going to go CH mod77 which I know I'm gonna get some Flack for but it makes things a lot easier and I'm just going to hit quote W Tab and then I will hit dot P CK we're gonna do dot x 86 64 and then we're gonna hit the up arrow and we'll pull this back we'll type lib and we'll hit Tab and hit enter and now if we just come up here and run it you should see well a bunch of Errors so what the heck happened right well what's going on is Godot is trying to run an executable with Vulcan and we can't do that because this is a server so we have to run it with dash dash headless and that will run it inside of Godot so you can see it's running awesome right we're done well not quite our server hasn't started so how can our server start well that's actually really easy because we added dash dash server to our code if we look right here we added if dash dash server in command line arguments then we can run our server right so that works if we just hit dash dash server and hit enter hosting on 8915 and now whoops I hit Ctrl C to to copy this so let me do right click copy if we take a look at our client and we change our websocket connection to 8 9 15 and instead of one two seven.0.0.1 we go to digitalocean we copy our IP address right here which is 204 48 28159 if we come in here and we hit paste control s we hit play if we hit start client you'll notice that we have connected if we hit join Lobby you will notice that we've joined our lobby and then if we copy our lobby paste it into our other client we hit start client join Lobby you'll see that we have done our RPC connection so you can see that I can come in here and hit send test packet and I can ping my other user and this is all without starting my server you can see that my server out on digitalocean is doing all of the signaling and doing all of the work so awesome that's basically how we can do a dedicated server hey guys editor Mitch here so something that came up while I was editing this video somebody actually hit me up and asked me how to run this service in the background because what would happen is they would run the process right like so and then as soon as they closed the window it would crash out and stop the process from running so how do you run it in the background well that's actually really easy all you have to do is you hit Ctrl Z to stop your process type B G and that will run it in the background and then if you type jobs you should see that it is running that in the background and once you have that you have to disown that process so you can type disown h percent sign one and that will disown it from you and it'll get picked up by the system scheduler and it'll be held on to by that so now if I hit close and then I hit play and I start my client and I join my Lobby you can see that everything's working even though I closed my process even though I closed my terminal it's still running I can still start my client I can come in here grab this Lobby I can join it and then I can wait until my peers are connected and then send my packet and then everything seems to work just fine so just keep that in mind that's how you guys can do that and that's also what's going to allow you guys to come in and actually play around with my server is by using my IP address Plus 8 9 15 and then I disowned that process that way I can have this process running in the background at all times the easiest way to tell if your process is running is if you open up your console you can come in and type jobs and you'll notice that nothing's there right oh no what am I gonna do well that's where PS Dash a x comes in so you can say ps-ax and you will see webrtc headless server and it has a PID so if you need to kill it you can just type kill and then you can grab this PID copy it and then paste and then when you do ps-ax that process is now dead it's gone so that'll take your server down and allow you to reset it or update it or things like that so that's basically how you can do it now what I now I'm going to come in I'm going to rerun this so I'm going to do this I'm going to hit Ctrl X or Ctrl Z I'm going to come in do my BG and then I'm going to disown Dash H percent sign one to get that to run and then I can safely close this and everything should be good so anyway let's go ahead and get back to the video now from here at this point you basically have everything that you need to be able to do a webrtc connection we're gonna do next is we're going to make it so that it actually loads out my project which is right here and I built this all out for the multiplayer tutorial so you guys can of course use this code for whatever you need but we're gonna build this out so that way we can actually play our game so what we'll do is we'll come into our I believe it's going to be our send test packet so button three you can see where we're doing our ping RPC I'm going to change this from ping to start game and I'm going to copy this paste it and instead of doing ping I'm basically going to load my game so what I'll do is I'll come in here and say VAR scene is equal to load res colon slash slash quote and we're going to come down here and find our scene I believe it was called test scene from our original so we'll go test scene Dot substantiate like so and then we'll say get tree dot root dot ADD child and we'll add our scene now the nice thing is is as long as we load this because we set everything up with our game manager it should just automatically work which is great so all we have to do is basically just hit play we'll have our two guys we'll make sure that our service is running on here so we'll do that it's gonna host start our game or start our client join our lobby you'll see that we have our lobby value right here we'll copy it uh I keep doing that so now I gotta restart so start our client join our lobby come in here right click copy click on this guy paste start our client join our lobby and you'll see that we will have gotten our exchange and everything will have worked we'll hit start send test packet and it kind of worked this guy started the game but the rest of them didn't so let's see what's going on here node not found multiplayer synchronizer relative to root so that leads me to believe that for some reason our player is not done correctly so if we hit control go to session one take a look at it we look at session one you can see that we have our two players spawned it looks like we have a zero and a one so that's going to be a problem because our index starts at zero so my guess is our code is wrong because our scene manager says index is zero we start at zero but I believe our player index is going to be one if we throw a break point on our process here we take a look at our game manager and our dictionary you can see that we have our two guys index two index one so that needs to start at one and we need to take a look at instead of doing our players Str ID that's fine for their name ADD child current player for each that if spawn name is equal to Str Index this index here then it should be good to go what we should probably do is instead of using this game manager's index we should probably just pull our actual index so we can come in here and just go game manager dot players I Dot index like that and then we'll need to come into our local we're going to change this to to and then to one and that will make it so that way our stuff should properly spawn now the other question that I have is in my session two if we take a look at our game manager so if we look at our break point here I guess it's not getting this far so the question is what is the second scene doing if we refresh we hit our control node we play our game we start client join Lobby we pull back this Lobby we start our client paste join Lobby and then we send our test packet let's take a look at our game manager this guy is correct so that should be fine no not found oh I think I know what's going on so if we look at our client here we have RPC any Pier we're not actually calling it local so call local and that should hopefully do it so let's try it now we'll hit start client join Lobby we'll come in here copy this guy go into this guy start client paste join Lobby so we'll you'll see that we've gotten all of our connection and then send past test packet and you can see now it should just work so I have one guy and the other guy and they are now connected via webrtc so that's basically how we can convert our code to work with webrtc one of the things that we don't have working really is once we have our lobby created we don't have a way to destroy it right so we need to basically destroy a Lobby when it's not being used so something that we should do is come in here and say remove Lobby like that and what we should do is come in here and just say if data.message is equal to message dot remove Lobby then we can basically just go into our lobby kind of like we do here with our users and say lobbies dot erase data Dot Lobby ID and we'll need to copy this go into our client scroll up to the top add in remove Lobby we'll scroll down to where we're joining right here just before we start our game we're going to want to remove our lobby so what we'll do is we'll come in here we'll say peer dot put packet Json dot stringify we'll get a message in a second to UTF 8 buffer and we'll create a small data package so we'll say data VAR message is equal to bracket bracket quote message dot remove Lobby and then we need to do Lobby ID and we'll pass in our lobby value now I know that everyone's going to send this so it's going to be multiple peers telling the the server to close a Lobby that's okay we can just error check against that uh the reason why is because if for some reason the message gets missed I'd rather have multiple people send it than just one person than have it get missed so we'll have everyone send it and that should work now if we go into our server here we can just check if lobbies dot has and we can pass in our data.lobby ID like this colon Tab and there we go and that'll basically just say if this Lobby exists go ahead and remove it and we're good to go you also should create some kind of timer to time out lobbies if they're too old or if they've been you know held on for too long something like a couple hours I'll leave that up to you guys on how you do it but it's relatively simple and easy to use but at this point we're probably about two hours into this tutorial maybe two and a half so I think we'll call it here if there's any additional stuff you guys want for this tutorial please let me know I will create a follow-on and be more than happy to readjust things and change it and make it into what you guys need but that is all I have for you guys today so if you like this video go and hit that like button hey you know if you dislike this video go and hit that dislike button because I'm here to make content for you guys this video was a viewer suggested video so if you have any suggestions please leave them in the comments below and I'll be more than happy to add it to my GitHub or of course you can jump on my GitHub and you know add it directly there and I'll be more than happy to put it on my list of tutorials to make I'm always here to make tutorials for you guys that's the whole point of this channel if I don't get suggestions then I usually don't make tutorials so please leave suggestions let me know and hey if you have any comments or questions please leave them in the comments below or jump on my Discord link is in the description and I'll be more than happy to help you guys out or really anybody there we have a lot of really cool people there that are awesome and I'm really happy that we have a good Community that's willing to help you guys out but that is all I have for you guys today so thank you so much again for watching and I'll see you all next time thanks thank you

Channel: FinePointCGI

Views: 8,876

Keywords: godot, godot engine, godot tutorial, godot multiplayer tutorial, godot multiplayer, godot beginner tutorial, godot multiplayer server, godot game engine, how to make a multiplayer game in godot, godot dedicated server, godot engine tutorial, how to create a server with godot, how to make a multiplayer game, advanced godot | creating a peer to peer chat system, godot webrtc tutorial, how to make a multiplayer server to client connection in godot, godot multiplayer syncing

Id: ulfGNtiItnc

Length: 118min 2sec (7082 seconds)

Published: Wed Sep 06 2023