Ep. 21: Interface and Networking Separation - Network Chat Programming

Key Takeaways

hey what's up guys my name is the Cherno and welcome to episode 21 of network chat programming okay so two things that I want to do today first of all I want to kind of um change around the way that we're kind of doing things and I know that's kind of a big deal sounds like a big deal it's really not but right now what we have going and this isn't what I would normally do but um I just haven't given this much thought I guess uh we've got this uh client uh class yeah client. Java um and in this class we've got two things that I don't like well I guess we've just got two different worlds in one class and that's kind of not a good thing in a way so what we've got going on here is we've got both the behind the scenes kind of back door backend client to server connection stuff and then we've got the front end kind of GUI interface thing and it's not really a good idea to combine the two it's I mean there's no reason to combine the two so it's better to split them up okay and if we do split them up which is what we're actually about to do uh it will become much much more apparent it'll be much easier for you guys to see um the two different worlds the world of the GUI and displaying everything to the interface and the world of the server okay well by the server I mean the client so the world of the the world of the networking that the client handles all the networking methods will be in their own class um and everything else like this uh uh what is it like the the set the send thing will be in its own class as well okay so what we're going to do do is we're going to just right click here on Cho chat and we're going to uh go new class okay so we're just going to create a new class we're going to call this one client window okay or client interface you can call it whatever you like I'm just going to call it client window this is going to be the window of the client okay obviously obviously our main method is going to be copied over there so it's actually not even here it's called login okay oh that that's that's another thing okay then so main the main method is in login cool so over here you can see that we make a new client rather than doing that we're going to make a new client window all right and then the window in turn will create its own client so if that makes sense the window the interface handles the uh the the GUI stuff right so the window which is the GUI has its own actual back end so um that's fine so let's go ahead and uh go into a client I'm actually just going to close all these server server main server client unique identify all this stuff that we don't need I'll close it and just leave the stuff that we do need open so um we'll just grab the entire uh thing over here and we'll just cut that so this this will this episode well the first half at least will involve a lot of uh kind of refactoring right so like copying and pasting changing names stuff like that um and I believe that it extends jframe so let's go ahead do that um and then another big thing is the client itself should not ex extend jframe uh this also will allow um people to have multiple connections which is good so in other words you could have multiple tabs open which connected to multiple chat servers if you so please um this create window method clearly has to get cut all this stuff like there's no point having all this in uh in in like the client with along with amongst the client networking code like that just sounds weird um so let's import all that you can see we just imported about 50 things uh let's go back I just hit command shift o there by the way or control shift o if you're on Windows um and we'll grab so let's see over here so pretty much all of this Okay so we've got this is nicely divided actually I divide this pretty nicely we've got the the the networking stuff and then we've got the interface stuff so we'll cut the interface stuff and we'll paste it into here so that we get our J panel and everything else we need all of our text Fields um and then uh open connection will of course stay in um open connection will of course stay in the client class so receive send and okay so console won't um and sand waren actually as well because sand actually calls this send method which is the real sand method but this is that send method just allows us to send something so we won't do that uh we'll go over here and paste that into here wonderbar as uh vundabar as the uh as the German folk would say now um we've also got stuff like name address and Port I'm actually going to leave that in here and you'll see why in a minute instead of setting this do name to name this address to address we're not going to do any of that stuff we're just simply going to uh pass that along to the client that we created in a minute here um now let's see we don't have any errors in here so I think we're done so we've got a lot of imports here that we don't need you can see they're all highlighted in uh in in like they're underlined in yellow here um if you you can delete them manually or you can just go command shift o again or control shift o on Windows and as you can see that will just sort everything out so that's eclipse's organized Imports thing um if you're using another IDE it should have a similar thing of course now um let's get into this I hope that now woke you up cuz that peaked really really high on my uh little audio recorder here but um what we're going to do now is create a client right so this is a client window in fact we got to change the Constructor name to client Widow client window okay um and so we've got all this stuff here and you can see this referen is a lot of method from the client right so we've got something like this send method here which sends the attempting connection thing we've got uh we've got this opening connection got all these all these things so what we need to do here is of course create a client so client window will have an instance of a client okay private client client um and this client of course will will enable the window to connect so what we need to do is uh when we do start this thing the first thing we should do is go ahead and go client equals new client so we're creating a new instance of the client with name address and Port okay and then we can get rid of this all right and uh let's see what that that's giving us so misplaced constructs of course I've forgotten this little semicolon put it in the wrong place like an absolute novice um all right so there's H we actually haven't made a constru oh okay we removed the Constructor that's probably not good so let's go ahead and create a a Constructor so public client string name uh string address and inport I'm going to be pretty lazy here and just uh simply copy some of these things so I think let's see that stuff the connect is open connection that's fine oh okay that that's pretty easy then isn't it okay so all we need to do is um is oh we have to set up that uh socket and the onnet address thing but we but basically let's just go ahead and uh go ahead and say this do name equals name this do um address equals address equals address and this. Port equals Port all right um and then with that let's see um all right so in open connection now we can just simply type client. open connection okay um and I think that method is uh private so okay we'll have to go ahead and make most of these things public here so copy paste the public pretty much everywhere okay um keep the fields private though uh over here in this send thing we can go ahead and call client. send um I'm just checking to see if there's any actual important stuff now why do we actually create this so client. open connection so open connection okay open connection is what actually creates this socket as you can see now um I I'm just thinking that might not be the best way you have this like entire thing here um we we'll leave it as that for now cuz we've kind of designed it that way you could put you could move the open connection into the Constructor for client thus by creating a client you're actually opening the connection but uh we'll keep it as that for now just cuz that's the way it is that's the way the cookie crumbles um so name okay this is where we have to make a few methods in uh clients so what we have to do is make a nice string a getter here so public string get name okay and this will of course as you can probably imagine return uh the name okay we'll also make public string get address which will return address I'm not sure that why why we would use that but uh we do need public in get Port which will return Port okay um oh I guess I guess we could be returning the address for uh if we just wanted to like debug or if we wanted to just print messages to the console so send we change to client. send uh name we change to client. getet name um and I don't think I think that's it okay so we don't have any errors anymore we've got a bunch of uh warnings here okay we have to make sure that we Implement a default serial ID you could do a randomly generated one we don't need that we're not going to be sending this anywhere um we're good okay we should be good um I'm just quickly skiing through this so to test this okay let's just go ahead and go into server and we'll just start a quick server here if you go into server Main and you run that I'm just going to drag this up so you guys can see a bit better so we've we've started a server on that Port brilliant we're going to go into into login and run that and of course that's going to bring this thing up so we'll type in yarn for the name Local Host and 8192 let's hit login let's see what happens you can see we attempt a connection it looks like the server has received our connection here and it's received our name it's assigned an identifier for ourselves if we go ahead and say something hey you can see that this gets three L back to the client thus it works and also the server prints the address so clearly it's receiving some kind of packet here okay that's it I hope you guys enjoyed this episode I'm actually going to cut it there cuz it's like 10 minutes long already um if you guys did enjoy it I would appreciate it if you would hit the like button below cuz that lets me know that you guys are enjoying it of course that makes me happy um next episode we're probably going to cover uh I guess a verification that the client has is actually connected right now we don't see anything the client doesn't we see an attempting a connection but we don't get any kind of confirmation to that so that should probably happen um and after that we'll probably actually work on adding more clients and stuff like that so I hope you guys enjoy this episode of network J programming and I'll see you guys next time [Music] goodbye