Building a Multi-player Game with WebSockets

in this video I want to do something that I am completely uncomfortable with building multi-player game let's get into it so here's the game that I actually built but I want to build from scratch with you guys so it will be essentially a multiplayer game using the server authoritative model and there are three clients and I'm using WebSocket as a as a medium of this multiplayer communication so client create a game and creates a URL and this URL is sent to any client really could be a mobile phone it could be any desktop application it's a completely browser-based game and once the client receives the URL you can click join game and they will start the game so and if each game each client will get a color and if they click that color will propagate to everything right and this guy is like for example the red guy and that the same cell will basically turn all red based on this and the game essentially is fighting between all of these clients so they can dominate the board so that's the game essentially so as you click write imagine multiplayer because obviously a single guy here but imagine all of these will essentially try to dominate the board with their color that's the idea and the full game will should have a score obviously should have a timer because that's the you're fighting for this the the board and every client will have a share of the of the board and if they have the most they are the winner essentially or could be a draw okay that's why I want to build this is completely built with native web sockets I'm not using sohcahtoa or anything like that I'm using plain JavaScript I'm using plain WebSockets it's a and end up for the back and I'm using no GS for persistent or anything like that I don't need em you juice using a stateful application we can obviously build application better ways but this is just for educational purposes right I'm gonna talk through in this video how I can to this application in a better way right it's gonna be a long video guys obviously if you're interested stay tuned enjoy if you're new here welcome my name is Hussein and this channel we discuss all sorts of software engineering by example so if you want to become a better software engineer consider subscribing hit that Bell icon so you get notified every time I upload a new video would that say let's just jump into this video so let's just jump into it guys we're gonna build a multiplayer gaming application browser-based when I say browser-based I mean it works on any device that has a browser that's the beauty of this thing all right that's right or moving away from native applications and I'm just trying things out trying things out right there is always pros and cons for to everything but the web man it's getting really strong and let's see how good this thing is so we're gonna use WebSockets a technology has been released for a long time right without any fancy term and we're gonna build a multiplayer game let's just jump into it guys so here's the agenda here's the things the design of the game I went ahead and created the design of the game because obviously for every software you want to create you have to design it you cannot just jump into coding I've made this mistake before jumping into code you get confused because you have no idea what you're building right that's why you have to kind of break down your application into kind of this basic components so that's what I'm gonna do I'm gonna go through the design of the game right and then after that we're gonna show an example again of the game I'm finally gonna code so so the first component here is it's connecting to this server right so it will be some sort of a server I'm gonna connect to it so that's one piece of the puzzle okay we need to implement the connection from the client to the server ok and then when I say connection here it could be any protocol but the protocol I'm gonna use is WebSockets ok and then the other components creating the game I want to create the new game and the game will have some semantics the game will have some state okay the the description of the state will be hey this board game now has seven red cells three blue and two greens right so that's a state yeah and the idea here is the state is on the server join a game that's another action that the client need to take to do right because it's really interesting if you can think about it playing right now I want to actually play I want to sit one of these cells or balls or whatever we want to call them to my color as a player okay so that's called a play and then we're gonna talk about that a little bit and then the final step of the game design is the broadcast sate Wow much better fixed thank god of editing man the broadcast the state of the game from the server to all clients and we're gonna discuss that as well okay that comes back to what kind of game designer would you choose right there are many multiplayer game design there's lockstep there is a server authoritative and there are like a hybrid approach as well I'm choosing the server off the rotative approach I don't get it discuss all that stuff don't worry about it and I'm going to talk about a full example show an example of how the game will actually conduct and then once we already were feel confident we'll jump to the code and we'll write some code guys how about we do this thing the first thing connection I want to connect as a client I want to connect to the server and you will notice that I am a client in this case most probably it's a browser but doesn't have to be right any client that understands to talk WebSockets could be a potential client of your game the WebSocket server in this case here I'm gonna know it use node.js as my WebSocket server and then notice what will happen here I am communicating with Jason here and I chose this protocol you can choose anything you want the web the beauty of WebSocket is up it's a blob of text or binary that you sent across the wire you are responsible of choosing the format of what you sent okay and you pick a format it could be XML I don't know why would you do that it could be Jason like what I'm doing right now could be protocol buffers right nothing stopping you from doing any of that stuff whatever is comfortable since I'm using javascript in the client and JavaScript the server Java screws the best language for this because it's the code I write on the server will be used in the client and by us a versa so here's what I'm gonna do when I attempt to connect to my WebSocket server that connection will essentially be up will upgrade the HTTP normal connection to a WebSocket right but the first response that come from my web server will be to uniquely identify the client and that's a very critical point you want your clients to be identifiable with each request they make so you so you can look up which connection to use on the server in order to communicate with that client okay so that's the first point you really need to understand because think about it guys there will be many many connections here many connections from many games many servers how do I know that this connection this TCP full state full connection is belongs to this client so you need some sort of a hash table and we're gonna build that okay so that client ID and I'm gonna use grid because it's the easiest way to identify things right obviously this is whatever we're gonna design now today is not the most performant nor efficient we can always make things more efficient I just want the most simple way it's not even scalable the way the way the design I'm doing today yes just it's very stateful but we can do all of that stuff and we can discuss in another video but let's just build what we can build right the idea of the game without actually adding more complexity all right so when when I asked them to connect I'm gonna responds with a single JSON response right as part of the WebSocket connection remember guys and if you if you if you want to know more about whoops okay I'm gonna reference the video that I made here dedicated just for about WebSockets crash course and I also talked about how do you make WebSocket secured using TLS right I'm gonna reference all the videos here but once iron did fire the client and I made build this hash table on my server I'm gonna return this payload to the server to the client says it's immediate response kind response kind of a thing here for just that all right so though the client knows it's IDs the server know that there is a TCP connection associated with that client the next component of the game is to create a new game okay I know what doesn't I mean a game is kind of a state that represents that the board in this case right the board that we're building it has certain number of balls or cells or whatever you want to call it okay it has an ID it has certain players and all that stuff so one client assumed they already connected they can issue a command to actually make a request to create a new game okay and the method that they can choose here is called create and you might say what the heck is a method it's nothing it's adjacent payload that I decided I am building the protocol here guys that's the thing here and you can do whatever you want I chose to call this thing method and this is so that I can identify it on the server so I'm gonna send the client to create a game you want to send me a JSON payload with a key called method and the value is created and I'm gonna know that you want to create a new game but you gotta tell me with every single request what client ID are you okay and you might argue that hey saying you don't really need a client ID you can derive it from the connection and I agree with you I just want to make this as simple as possible we can do so much optimization but let's make it things simple so you tell me who you are you tell me what you want okay so that's the create and when you do that that web server will create a new game state right and when I say create use your imagination you can be you can have it stateful in memory of the server which is what I'm gonna do you can save it in a Redis instance that's another better way of doing things but I don't have seven hours to do this video so I'm gonna try to simplify this video as much as possible but think about the use your imagination do a lot of things here okay and once we create that instance we can create a game okay we're gonna have a new ID for the game which is very important to identify the game ID here and here's the response I'm gonna return to the user immediately we're gonna response to the user that made that request with the game ID and how many balls did we create for this game and you can make this configurable I am gonna hardcore this thing to twenty balls or 15 okay but we can make things configurable so I'm gonna return a game payload here object and it's called ID that is ID and has a number of polls and that's again we have to return the method so the client knows that hey we receive the response from the server just because this is a bi-directional thing we have no idea which responses for which requests so that's why we have to kind of identify things uniquely okay so when I send that back I'm gonna return this result to the server to the client and now I know the client knows that over there is a game ID and now this is the beauty of this thing we have the game ID the client can choose to share this game ID as a URL with other clients and they can join the game remember that that client has just created the game it didn't really join it okay to join a game you have to call this method you have to do this protocol that I'm building the whole thing here I'm building from scratch right guys so two requests and you join requests right you build this Jason again there is another method here that I created and I call the string join and then you have to tell me who you are notice there is always a pattern but you also have to tell me what game I do you want to join okay and you probably will get this somewhere from a create game previous create game and someone shared share the URL through whatsapp or whatever right any any medium once they get the URL or the game ID we can essentially join the game and when you send me this request and here's the interesting part if you send me that payload through the web server okay to the web server I'm gonna respond with this payload I am going to tell you that hey this the method is join okay and this is the game the ID of the same thing the number of balls because you're a new client right you might be in your client and you don't know how many balls in this game or other state of the game you don't know anything about this game so what are you gonna receive here is this and you're gonna receive all the current client candy joined this game okay who actually joined this game so if you're the first guy to join you will only see yourself here okay so that grade will be the client ID of the of the client who'll join this game and an automatically assigned color and the server assigns the color for the game so the first guy gets a red the second one gets a green and the third one get the blue and so on okay you can you can check this I'm gonna limit the game to three players only and then that's it you return this but here's the thing this is a special request this is a special request and response the server will not only respond to this client it will check they from the game idea will check who else is a client for this game who already joined the game and I'm gonna tell them that there is a new player so I'm gonna send the same respond to all the participants of the game so that's why this will be sent to all game clients right if it's none then we're gonna send it only to this guy who just joined if it's another one that I'm gonna send to and so on okay this we're gonna be clear with with more in an example okay let's join let's talk about play to play a game here guys what will you do is I'm gonna sent the same thing it's a method that's a JSON respond and there is a method I'm gonna call it to play that's what I called it you have to tell me who you are and you have to tell me what game are you playing and you have to tell me what ball or what cell you want to capture or you want to sit so I can pick your color and mark it and you might say who saying you didn't send the color in the request how do you know what color is this client that's a good question there would be a mapping on the server in this case right and you might as easily said that on the client as well notice that there is no response in this case this is just like a beacon right it's like I talked about the beacon API it's like a beacon API you send information without actually expecting a response and that's very critical for latency because this is gonna be a busy request this is them one of the most requests that will be click through the most right this is where people will just as I will keep clicking right so this is the most you need to make this compact you need to make this fast as fast as possible that's why you mean you need to make this there will be a client-side work that you need to do and then you send the request immediately like almost like a write-through cache right so that's that's that's the very important point here okay and then the server does not respond with anything and you might say oh saying how do you know what other players has actually played right because this will be by multiple players this player one or player two and so on okay and this is it so this is the broadcast state where the server after each number of milliseconds or number of frames if you're playing with that right it will group it will will batch these frames and all the states that has been received from all clients and will send one response including all of these changes right with the final state this is called essentially the batching right so this the the the server will batch all they're all the changes that happened and will send one final state to all client of that game okay so here's the thing so it was gonna every every half a second 300 millisecond whatever you want to set it that server will start sending these updates right and this is also a very important thing you have to make this as efficient as possible I'm not gonna make it efficient this is gonna be a little bit large but we there are some tricks we can play with bitwise operators and and making the state as simple as small as possible out of its tone of scope of the video but do ask me in the comments below a few more if you're interested to know more so I'm gonna send all that stuff right so that's B that's what kind of a broadcasting to all client kind of thing and here's the response this is a method that actually the server sends not the client not that responds to an existing request is just a server side right that's the beauty of the circuit so there is something that the client only sends there is something that the server only sent there is a there is just the normal client server clients requests response kind of a thing as well okay and we're gonna send here that date we're gonna send the game ID and the state and the state is an array of all the current game essentially what the current game look like if you have 20 balls or 20 cells you're gonna have 20 elements in the Senate amendment and it will tell you that this ball okay the still number one or ball number one is red ball number two is blue for number three is green and so on and all the clients are responsible to update that state right and immediately once you receive this you'll you'll immediately refresh that and you'll see that oh there's something changing yeah so that's the broadcast date okay and well this is what we would call the server authoritative model where the clients send changes it sends input the client only sends an input he said hey I want to play this ball I wanna play this ball I want to play this ball that's what the client sends and the server groups all that stuff and then the server sent the full state back to the server to the clients right so that's called the server authoritative model and game multiplayer gaming where the server actually is the authoritative of the state okay clients cannot cheat as easily because the state is calculated on the server not on the client the opposite of that is the lockstep approach where the clients still sends input but the server instead of calculating the state it actually sends the input of all grouped client inputs back to all clients so and the clients once they receive all the changes all these inputs they are responsible to calculate the state right so it's a it's the opposite so the client is authoritative in this case to calculate this state and the clients can't cheat in this case because they hey so ki I own this I own the state in this case I can play what doesn't change it's lamp which is kinda not good but the the good thing about is just the bandwidth becomes really really small because you're sending inputs instead of sending a full state right now we are this all gonna become very clear guys as we go through the game example let's go through an example and start coding guys so three clients connect to a server ok random clients they know the address with a server and they want to establish a connector quest ok and that's the WebSocket connect request ok the first clients request I connect a connection and the server will respond with the client ID and it will give it an acquit in this case it was called a ok so this is a client a and this guy would be a client B and this guy will call O'Connor and client C ok cool so that's easy alright so we have three cards ABC that's it we have three stateful TCP connection that acts like a WebSocket ok and we have a handle of this and we have a handle to these connections and we have now an array in memory with a hash map or really an array it's a hash map that says client a is this connection client B is this connection client C is this connection it's very very very important to identify this client I decided to create the game okay client creates a game sends a request like this the jason this beautiful jason right and it says hey method create ok and the clock I am client a hat again we you have to identify yourself who are you so I can locate which connection I should use right and which stuff I can do with you all right this is very very important ok again guys you can get rid of the client ID if you want to but it's way easier to have an identifier and you'll know why ok once you do that the server will immediately respond it will create a new game send again as a hash map with the game ID it's gonna generate a number of balls ourselves and it will tell the client hey by the way I'm responding to your create request and here it is ok I just you just created a request yeah I know and here's the game ID and the game now can be shared with other clients remember client a did not join the game it merely it merely created it which is very important client B joins game game Z in this case which is the game created by my client a ok I don't know client a sent it through through whatsapp right or whatever and we receive the game now we have their game ID and I want to join it and to join what do we do you have to send me this exact Jason pay load method I want to join who are you I'm client B what give me one joy I want a game I want to join J own game ID Z and when you do that what do we do we the server will check ok who are the current member of game Z no one okay in this case I will join you sir you are now a member and your your happen to be the first member so you get the first color which is red so we assign the client B the red color and we update the game state right so that the clients we update the game client state so that would the first client which is client B okay and we check are there any clients nope that's the only kind we loop through all the clients that are currently here and literally get the connections and send this new change to all the clients right and the client in this case it's only be right so this JSON response will only be sent to client B and B will receive it I said okay oh I got red and I will just display it in the UI for example let's draw a client C joins the game now same thing I'm gonna send a method join I am C I want to get join game Z okay we'll see all right let me add you to the existing game which happens to have already one player so you're the second one so you get the second color green okay and I'm gonna add you so B is C and then I'm gonna loop through all the current clients which is B and C and send them the game because B needs to know that C has joined right so both of them will get this new join request right so you'll start getting this join record so B will get it and also C will get it that's very important that I'm writing the algorithm guys as I speak that's very important to I to rate these things and reiterate them finally client a who actually created the game just decided to join and every joins does the same exact thing so it gets the last color which is blue and then the server will loop through all clients which is BCA for this game only and will broadcast all their response this response to all client so now a and B and C will get the super spawns and all of them will see that oh there are three players and here where we can actually decide to play the game let's actually play guys so client a decides to play ball six which is like cell number six I want to set it this is mine it's a blue so what do we do we set a request right and the request is called play in the method play and I am a client a and I want I'm playing on game Z and I want to set I own ball six now okay so what will happen here is the server will say okay got it six this is the game status now the this the first time we actually changed the game state here so both sexes is now on and think of it like an array or adjacent hash map anything you want right ball six now is owned by the color blue and you can decide to say hey by owned by a client a don't really care here so that's enough just to have blue here we don't really need more information so that said said okay that now the state is saved on the server okay it's a stateful thing which is a little bit bad was that's the easiest implementation you can as is as similarly use Redis to store the state and that is a better solution okay but that will take more time to actually implement okay client B this to set play ball say seven okay so current Bo says okay send a request and then the Methodists play and I am be zm7 so the current state is six still blue and seven is now red right because P is was was the red one and the third one is client C is now playing ball six so what will happen here six has already set to a well what will happen here is I am using last last n when kind of a solution so both sexes will now be owned by green and and you can play with this the way you want guys you can design your game the way you want I decided to overwrite the result because this is kind of the easiest and kind of fairest right go so it's whoever comes last ones that's that move on right all right so you notice that there are no responses from the server right and all of these three things happen within the half a second right let's say this all of them happen and they have a second after the five millisecond happened right the server kicks in and starts broadcasting the state to all the clients that are in the game okay which are a and B and C so it will send a response to a with this state which is six is now on by green and seven is our by red and the same stay will go to be same stay will go to C so this is quite large right if you are sending it a lot right so the network bandwidth will be affected as a result so you want to make this as small as possible and I have ideas to do that it's just it's out of the scope of the video okay and we can play with this and I might make this game actually a legit game and I'm making into its own repo but I'm not gonna make a video part because it's gonna take me weeks to do that okay and I can't explain every single decision I make right it's just it's just all subjective to be honest and that's it all of this they will just send right how about we jump in and we start coding eyes all right let's go this thing alright guys so to code we need to create a server and we also need to create a client and the client in this case is gonna be just a dumb HTML page to be honest and the server will be our note yes right so make sure you have known JSON installed make sure you have Visual Studio code and let's get into it so let's create a WebSocket server how about that file open JavaScript and you see I've created so many project let's go a WebSocket cell game whatever we want to call it right and that's it and I'm gonna create a new index the J's file let's initialize in NPM it's a good idea NPM in it - why and that's it so how do you create a WebSocket server and what is web sockets right guys web socket is nothing but an existing HTTP connection that had been upgraded to our web socket okay so how do we do HTTP well AJ is let's start with that building an HTTP server node.js and we have done this a lot of time so I'm going to create an HTTP let's require the HTTP library it's a built-in thing in not yes okay and using that I'm gonna create an HTTP server by doing CTP - create server okay and you can choose to actually give it a function we don't really care because what the WebSocket will actually override that function anyway so what do we do next is HTTP server dot start listening right just listen to port I don't know 9090 just for change because I'm pretty sure 88 is used on my machine and we say like an consulted log I am listening on 9090 put-put poop sweet let's close this so that's a WebSocket let that follow-up see that's just a server okay and that saw a server when you first do it okay when you first accept the connection with the server it will create a TCP connection and that's what we need to pass into our web socket logic okay so how do we do that let's create a Const WebSocket server equal require web socket dot server okay so that's the library I'm gonna use and I'm gonna create a WebSocket server in this case and to do that we can create a WebSocket server by doing new WebSocket server and now what do we in a pass it is a JSON file and we need to pass it the HTTP server a session and I think it's case sensitive so we have to do like HTTP server like that and then just pass it that object that we just initialized right and when you do that this has become this guy's property that's it it owns it okay so that's the WebSocket server and this up until here the WebSocket server as we are not listening to a change of the request to upgrade that connection until the WebSocket so to do that there is something called there's an event there is an event called on request and when you do an on request you get a request object and when you do a request object right you will have a very important thing here the request object here you can accept the connection and we talked about all the protocols you can create your own protocol here I I won't accept any kind of WebSocket protocol so I'm gonna say no and then I can say that accept the origin right and when you do that you will get a beautiful TCP connection which is this bi-directional thing that you have to capture and you have to keep with you and the each client that's the connect guys by the way that's someone trying to connect that's the first function right and what do we do when we connect we gotta generate a new ID for our client okay so that's we're gonna do next okay so we have the connection but this connection is still not enough right because that connection we need to listen on events that happen on that connection so that first event is on so the first event is open what do you want me to do when I open the connection yeah I don't care just say they're open whatever what do you want me to do when I close the connection mmm probably good idea to clean things up but let's just say closed okay and the most important one message what do you want me to do when I actually message you and that's the most important function of all of them okay if you if this connection receives something from the client I have received a message from the client that's what it means here okay that's where most of our code will live but here this is not activated yet nobody actually sent me a message okay but we need to actually send back I can send back the results to the client right with with their client ID remember because everything we're gonna communicate with Jason guys remember that's the protocol here we need to create a new unique ID for the client who just connected to us okay and how do you do that it's good grid we energize the grid I'm gonna steal a function for Jenna go ahead because oh I'm gonna steal this function from Stack Exchange someone wrote this and I'm just gonna use it to be honest it's that grid it's a function we're good it's not perfect function but it's just demonstrated that it can generate a unique acquit and that's what I want I want to generate a good go ahead okay that's that's that sorry so that's where we're gonna create a new ID okay so some comments here generate a new client ID okay and yeah const client ID equal go ahead so that's a new brand new client ID and what i want to do here is this is where the state the first state we're going to stores like the list hash map of all the clients and their connections because this grid is now associated with this connection how do I build this thing well we can do it right here Const clients and we can do it as an object here right and when you do it as an object it essentially becomes a hash map right well where you do at this client ID and this will give you kind of the key of that and the object and the value will become the connection or even more information so clients in this case sub client ID equal connection and just like that I built a mapping between the connection and the client ID we might need to add more information than just the connection itself so I am going to actually make this into an object right and the first value of the object is the connection and we might add something else I'm not quite sure yet maybe the color of the client maybe something else some metadata maybe nickname right so you don't have to have one-to-one right so that's it now now the clients is mapped with the connection and that's perfect so next time the client sent me their the connection send me a request I can find their connection I can loop through the clients and send everybody requests right because I can loop through this very easily and we're going to show you how as well sweet now we build there that's the connect we need to send back the response to the client how do you do that so let's build a payload right that's what the payload that we're gonna send to the user and what do we do here what was the payload looks like remember guys the method was connect so someone connected to me right I'm sending this back from the server okay and you sir is a client okay ID and that's your client ID okay and how do I send this to the user very simple I have that connection because I am still in this closure right so I can do connection dot send and literally do Jason dot stringify you might say why do you don't send the object directly because it will yell at me right this thing only understand bytes okay Jason is now really directly correlated with bytes right you have to turn it into something that is a string or numbers or something like that okay so once you turn it into a string you send it back and then we're gonna pour set okay this is the protocol that I'm talking about we are agreeing that the server and the client are stalking Jason here right that's kind of an implicit contract that we have say send back the client connect right so that's the first thing we did client connector client connect we still don't have a client to be honest so we have still have a server so we have this and that let's do one thing before we actually start testing this thing message okay when you receive a message there is something called utf-8 data that's the data that the server will receive if you send something from the client to the server you receive it here and I am going to assume that responds result right if I do the result here and I do Jason de Porres this is big you're assuming that everything that is sent is actually Jason so this might fail if you have a bad client that actually didn't send a jason sense something else right but i'm i all my clients are good clients so i would assume that they are sending jason okay i have received a message from that client here and let's just no it's just print it here okay it's just prints result which is the jason object in this case how about that how about we test this thing guys right so all we did is we created a server we created a hash map for the clients right and we're accepting the request and we did implement the first thing which is the connect write which returns the client ID and tells it which method right so the clients can actually listen to that and do stuff with it how about we test so if I roll in here I'm expecting I'm expected that I'm gonna yell killed yelled at and because of whoo cannot find more dilib socket right that makes sense we didn't install this guy so how do we install MPM install web socket that's not hard at all now we Ryan oh we can engage that for other reasons now all right 1990 we'll listen Hank sweet so now we have the server how do we actually test this thing we need a client right so let's build the client guys the client is nothing more than an HTML page index dot HTML okay and html5 will give us like the template for the html5 thing okay and we need to actually connect and you can assume that the moment you opened the browser we can actually directly connect bad idea to be honest but we're still testing so sure so I'm gonna write a script so that it will automatically connect to the web socket right when it first open the page right so equal new circuit WS localhost again not a good idea to do knock localhost we can use the hostname in this case but we're in the same machine so this might work so the video s dot the event on the client now on message if the user sent me that the server sent me a message what do you want me to do okay I want to see that message the message that data is actually the string that the server has sent okay and what did we decide guys anything that comes from the server should be Jason that's the contract between me and the claw and the server so if I can I can safely do that response equal Jason dot parse massaged I Dow just bring me everything from the client from the server so now I have response and I can just decide to print it how about that it's just print well we received from the client as a console output yeah how about what is that thing and there is one small thing guys one small thing what I want to do is serve this HTML page but this HTML page have to be served how do you serve things right you can decide to serve it with HTTP but Wow why not just use Express right apik will require Express boom so I'm gonna just serve this page on another port with Express so what I'm gonna do is Abdul listen 1991 is the port that will actually host the page okay so that's the page we visit in order just to get the HTML and the HTML page we'll have a code to actually connect to port nine zero nine nineteen ninety ninety okay and it's just like a console dot log listening on HTTP port okay that's just another one okay I'm nineteen ninety one right and obviously we need to Abdur get on someone visit slash just give them request response and immediately response that sent file index.html how do you do that be our name there index dot HTML this will immediately send there we have done so much of that stuff right so I'm just not going through easy stuff here I'm trying to explain complex this down alright so this will serve the HTML page right so how about we do that if I run this now would be listening to two parts 1990-1991 okay 1991 is where we're gonna visit now where we actually can conspire so now if I go HTTP localhost 9091 right which is the Express page I'll be served the HTML code right and let's just for fun let's add something in the HTML so we know that it's actually a page right either one it's like ah ball game whatever right when I start there you go ball game and when I go to the developer tools here let's see what we have here where we're going hey we got something back guys it worked remember what happened here right let's actually debug to show actually I can show you if I look at the code here and I'd do this the moment I serve this page I get this page the code will start executing which is the script which will make a request to the web socket which will immediately get a response from the client from the server giving the client its own unique ID how about we add debug this fighter this the Monte refresh you can actually debug right you get a boof create a web socket success right because it's the localhost it's on the same machine that will work and then create the event and then once we create the event the server actually already responded our goddamn grammerly alright and now this is what I responded to respond with a JSON object which we parsed successfully into an actual JSON object now saying that method is connect and client is actually this thing and we printed it how cool ash is this guy I'll just kulish now we have the client ID I want to keep the client ID handy for me okay in in the in in the script so I'm gonna create let client ID equal no here and when I here I want to get the client ID and save it in my global namespace here so what do I do if response dot method and I can do that because I built a protocol right equal equal equal connect was it lowercase or uppercase I don't remember if that's the connect method that's the first thing we're building right if the connect method then the client ID equal response dot client ID I said we built it console dot log client ID set successfully and we can just do plus client ID cool now I know myself so now every request that I send actually I can send my client ID to the server which is amazing amazing ok now we were building some sort of or almost like a bi-directional thing so we built a connect I think we're ready with the connect we can move on ran fresh you can see client ID sit successfully and that's my client ID amazing it's a normal grid that we generated what's the next step guys what we do build next this is what we need to build next create game right so we need to make a request from the client like this could be a button right that says create game that actually sends this to the server how about we do that doesn't sound hard let's do the client code work first so the client for code first we'll go to the HTML right and it's a button so button ID equal button create right and they say new game how about that hmm new game and this is the buttons what I want to do here is just build a list of all my buttons here button create equal document or get element by ID button create right I'm only using plain beautiful JavaScript stuff nothing else okay once we do that right that's just like I say I know how buttons or HTML in them and so we can't call it right and then we start wiring the events button create dot add event listener E if someone clicks on me what do we wanted me to do I want you to send a request sir okay and here's the thing guys this actually needs to be up this needs to be up here and I'll tell you why because I'm gonna use double yes all right so what do you want to do we're gonna build a payload right how does the pillows look like we're gonna method and the method is create right gonna create a new game who are you I am this guy client ID that's the only two pieces of information that we need we're gonna send this to the server how do we send this to the server ws which is the WebSocket that we created that's sent and we're gonna adjacent its string if I payload isn't this awesome guys so we can ascend that a quest to create a game to the server the server has no idea what the hell is a create method so we have to teach it all that stuff Kulish coolish all right so we sending that thing so this is use let's build a server piece here okay and you can choose to build all the client pieces of the server piece you can build the server and the client in parallel it's up to you really right normally this is the in a scrum system this this will be like kinda its own issues and it's each each each developer will pick one and work on it right so one message here that's the interesting part right and we will receive that I'm not gonna print anything what we want to do here if result dot method equal equal equal create if someone wants to create right a user want to create a new game so we're returning a new game first of all who the heck are you right who the heck are you I want to know who you are fair enough that's who I am client idea is all the client ID is Who I am okay so you can know your client very simply like that so this is you right but you want to create a game okay and I am responsible to create actually a new game for you so I'm gonna create a new game ID here and it's just a random quit okay just create a new good that's it once regretted a new grid that will that's just the quit that's just the idea of the game I need way more information what do we need else we need the ID of the game and how many balls the game have and pass pretty much it I think we don't need more information that's the game state it's a game object that we need to return so we're gonna return method create and we're gonna return the game state and we better have this game state handy huh so looks like another hash map right guys so how about we build that so right here I can do games equal this very similarly right and I can say games sub game ID equal object and I can start building this thing right I can do ID of the game is game ID what else was there balls 20 part coded just 20 games 20 20 cells we return to the server and the method really that's that's the payload we're gonna take care of that right later okay but that yeah that's that's essentially it that's the only two pieces of information that we actually need and that's it so let's build a payload right so let's build the payload and the payload is method it create and the game is actually this right hole that's the actual object which has the game which will have a game ID n balls that's that's okay and that's that I think that's the two information that we need from the user I am to the user and then here I need the connection where do we can get the connection here the safest way is actually to use the client ID to retrieve the connection but the otherwise I have no idea where is this connection right you can use closures to actually get act handle to this but it's just safer to actually know what you're doing okay plus when you move to us a scalable format a scalable architecture where multiple servers have multiple IDs this you're gonna need to I uniquely identify the client it so you can retrieve which server actually had the connection so that's actually always a better idea so I can do like a connect cons connection equal clients off client ID dot connection right that will give me the connection I do remember because that's the object that we received it's an object within with a with a key called connection that will give me the connection right and once I get the connection I can do send right Jason dot stringify always stringify when we send we always parse when we receive okay then we sent back the payload which is this thing now this will create a new game so you might say I'm saying we still don't see beautiful stuff they will come yeah wolf count yeah welcome everything will come so we had the client we had the server okay so the server sent this create but we never actually listened couldn't God listened to a method for the create so what do you want me to do when I receive a create command when someone when the when the server sends information to the client which is a create right that's climb HTML right I'm the client every time I say HTML I'm a client index.js is a server can i what do I want to do here the response in this case I'm creating I will say just game successfully created with ID response the game that ID right now we can just print the whole state we can do that I guess right game doubles like okay we can even say with response to game doorbal boss sweet I should stop saying balls and you change it to cells I know you guys are giggling right now all right let's just this thing refresh hey we have a shiny new button called new game well for that my visitor I got a client ID and if I say new game game successfully created with ID booboo girlish twenty balls nice nice I have this ID we can start by just literally copy and paste the game ID right that's not hard I start with that without doing the whole URL which is a little bit tricky let's just do a copy and paste of the game ID and that will actually allow us to join again how are we built join game join game guys to join a game you need to send a request and that's a little bit tricky board to join a game you make a request and you tell me a method join the client ID what our who are you going and the game ID which game you want to join and when you do that I will send this information to the server and the server will respond with the joint to all active game participant with a color assigned to the game so this is the most complex code let's let's start writing it so sending that join Goa in the mid-80s box where you paste the game ID and click join so how about we build the client first and then we build the server so I'm gonna build another button called join game button join and I'm gonna build and put text type a call text an ID equal text game ID just the game ID really where you can just paste it here or right here it's just literally nothing fancy and that's the idea of the game ID right that withou that's where we were gonna get the game are they from okay wait I know that's this button join equal button join and text game ID just regular stuff guys you know all that stuff right it's not rocket science everything is simple so far let's wire the event for button join good add eventlistener e for for Bob but apart join what do you want me to do in join we're gonna send her a course we'll come to that okay but we need to get right let's send let's end this let's just copy and paste here we're gonna send that payload it's not create or joining right what else do you want meant that client I need the client ID I need I need you right I also need the game ID what's the game ID guys there's something we missed we missed to actually store the game ID in a nice variable up there okay so let's store game ID equal null here and then when we join right when no receive a message of create we're gonna get the game ID and that game ID corresponds to a game that ID that's very important to actually save the game ID so we can globally access it in the client right sweet now I can just say this because I have access to it it's right there right and we know if if you want to join the button there this is one case when you actually create the game and join it right when you create the game you want to actually populate that textbox with the actual game ID right so that's one way or you can save it as we did but if you actually open a new page and you click join you're gonna get an error because game ID is no so what do we do here if game ID right it's not like or if it's no then actually you might be a good idea to actually read it from the text right which is what text game ID tell value the mi da qual this just read it from there if it's not if it's not then like I created the same I created the game from the same page then I this will be populated all right so I have this and we can Cimber it over send the payload I think that's all we need it's a join that's it what do we write on the server there a server on the other hand we'll be expecting a join request Oh fancy that's okay what do we do that here we have a create method right and that's it we don't have anything else so but we do another method if the server want to join on the server the client a client want to join if I can't want to join in this case let's what do we need to do right we need constant ID I need to know who you are so response dot client ID I need to know what game you want right your game ID right that's the two information that we have if you're joining a game it's probably in the array of lists and guys there will be a lot of things I have missed right a lot of bugs a lot of bugs but you guys are good you're gonna you're gonna take care of a lot of stuff for me so how do I get the game I get the game object by saying cost game equal games off game ID okay that will give me the game object and now I need to also give the connection right the actual connection the user connection so now this client is actually joining the game okay well we need to assign a color for this client in order to assign a card for this client we need to know how many actual clients are thenns this game well game those clients is actually empty if we think about it right because I don't even believe we actually set that thing so it might be a good idea when we actually build that game object here to actually build an empty array all right which is always right when you create a game sit then clients which is an empty there's not a single client and that's important because I'm lazy because I want I don't want to check for things like if it's null or not I mean with optional chaining which is should be there it should be easy but you know I mean guys you know I'm lazy alright so what we want to do here is dot length will tell us what color what what how many clients do you have and based on that we can just assign you the color how do we do that okay there are some tricks up my sleeve some hacky tricks like this right I can do this right red there are many ways this is just one of them red one is green and two is blue I assuming just three colors right and if I do this and I do sub this what will I have guys this will be the subset zero in this case will give me red one will give me this two will give me this but if it's more than three I need to fail if greater than three actually greater than or equal three then sorry max players reached right I just decided to do three right and it's a good idea to have a limit on your players you don't have to press your web server will run out of memory at some point right and then you can do Const color let's see if this goes there okay there we go all the way now okay so now this is the color gives me the color of the player okay and you get the idea it's like it's just a trick guys yeah just one of the trick so now this will give me the color of the player where do I store this color of the player well along with the player right ah-ha my C oming so we got a game here how about we actually update the game state all right because we need to game that client dope push see I mean this is an array right I'm gonna push another an object and the object is client ID which is client ID brain and color what color are you sir what color are you is this is exactly what we returned guys if you remember this is just an array of all the clients and this is their suite we build this thing now right we can just decide to return for example here just like yeah just exit now I want to send this thing back to all players Wow what how do I do that well no very hard you can do this for each loop through all the array that you can actually have okay and if there are some clients already you can loop through all the clients right and see look through all clients loop through all clients and tell them that people has joined so some new game players are joined and we have a client this is C which is this right I need to get seeded client ID right and I need to get that connection of that guy dot send and I am gonna send Jason don't string if I I'm gonna send log I'm not the game actually I need a payload did I prepare a payload well I didn't prepare the payload let me prepare the payload maybe it's a good idea to prevent the payload right here not really it's just the exact same payload so we can just do that poor payload the method is join and the game state is game haha exactly and then string if I the whole payload and send it sounds good right because that's the game ID ball clients go ahead and color sweet alright how about we test this beast all right when I run this now what we're gonna do we're gonna join right first we're gonna create a game and then join it so fresh let's remove their breakpoints create a new game that just created a new game that is the game ID I am going to join the game I didn't get anything back from the server oh there's another response is not defined next server crashed response is not defined where did we do this or what did we do what is response undefined where's responsible different resolved why did I say response oh yeah that's the problem yeah okay do it again refresh new game join and Christ again cannot read property connection of at default we'll get to it we'll get maybe this is undefined right so let's check where do we have here what do we have here it's time to actually debug guys all right that's just the Cystic bug have a breakpoint refresh this babe new game all good and join we will should get error here result the client ID oh boy that is not deformed boy okay guys I think I found the problem is that on the create we actually expected a client ID from the server which is wrong right we shouldn't do that guys that's the bug took me a while to find out yeah we did it we did find it so that's the bug we are we're taking the response from the create protocol and we assuming that as a client we overriding our good a client ID to undefined bad just remove that stuff hopefully that will do the trick refresh right new game join game boom boom boom and that will take us to the server anytime soon yep there you go we have a client ID now yay doesn't game ID let's get the hashmap get the game there is no client zero as the clients a greater than zero nope we still have it get the color which car do we get we get red the trick worked you got the idea right because it's zero it's gonna find the zero hash right key and then find the value of this which is right okay and and so on so this will work up to two and then we'll break because we essentially zero one and two we now can think about it actually well yeah yeah that's okay that will work so client ID and color add it push it now we have clients we have one entry I want you to send that to all clients and now if I do this go here and we should start seeing well we didn't actually do it down in code for the client that's why we did the client didn't hear anything so for the client we need to now add a code for join what do you want to do when you receive a join request right when you receive a join request right what do you expect here you have the game ID right which game do you want right response to game to the ID that's correct you also need to tell me that hey this these are the players how about we actually how about we actually do something better this time how about we have a development with the actual colors of the players right let's do that so I'm gonna do dev ID equal players you can call them give players right and then do that thing right there players players players and then here's what I gotta do and so on joins a game I want to do I want first to get the game ID the game object right give me the game give me the game right when I have the game I can loop through all the clients of the game right for each C and if I loop I can create elements on this thing but before I create I'm gonna make sure that this is empty so in order to do that I do what was the trick while not that first child I think that's that how you do it well this is not the first child of this is not empty go ahead and do div players don't remove child remove the first child I think that's the code to remove all the elements right I might be wrong it's the first car there's a function I don't even know I think it's called dot first child yeah it is just a property right while not just do this right clear all the children and once you clear it start building the children here which is like Const what do we build labels devs another devs element yeah but we just do development sure the equal document create element dev and then we do the d dot style dot width equal um 200px that's well bit more i think d dot style the background color background color a quo that did it uh what is it equal C dot color right and D dot text content is actually equal C dot client ID which is an ugly grid yeah they might do it and then obviously we have to do like the players did attend child up in the D right make sense plus this is wrong we should not do it in the loop we should do it out right cleared all the children and then keep adding wall children at a time okay that's what because we're gonna join and then join and then join this way we get we get new clients every time how about we actually test this thing is boosts bone refresh I'm gonna close this because it's annoying and then I'm gonna open another browser and another browser and then create a new game and obviously I don't know the game ID so I have to open this again like an idiot okay and I copy this guy and you say we're gonna join the game a whole something is happening it's taking a while did anything happened did anything fail did anything fail what did fail fell remove child is not defined damn it I fell it's called remove child is then called remove child is that it's called you remove child okay second what is it called it's not a removed child oh I have to do what the hell I thought I did that all right guys it was a stupid mistake it should not have been not while there is a child remove it yeah all right at least we have this now that's break all right so now if I take the same and go eat that and then go to another user and I say join it's happening focus slow I need to find out why there we go I got green and the guy join that's probably the debugger slowing things down and blue three clients three beautiful clients this guy and this guy and this guy so we have the game we joined there those guys now can build the state actually so the client can not just build the colors like we're doing it right now we actually can build a state of the game how many balls do we have in the game okay they have enough balls well let's find out well let's find out if players dev board okay and if boards very similarly Lilly Lilly is I'm gonna use this code again when we join we need to rebuild that state of the game right so we're gonna call scope we're gonna call it div board there's a diff board diff board to board right and this guy's the board the board the board yeah div board so we're gonna do is essentially a loop let let I equals 0 let's make this a little bit bigger always less than the number of balls in the game which is game dough balls I plus plus sweet that's what we do we look through all the games and the bowls and we start building these things and depends what you want to build this as I'm gonna build them as buttons okay document now we can do cause be called document or create element that's a button and then button dot ID we need an ID right because the idea essentially is gonna be ball plus whatever I the I okay cuz this will be very useful in the case where we actually want to play right when I click on this button what's the ID of that button right let's go to tag right i plus 1 because we're gonna start from one whatever so now b dot add eventlistener someone click on you what are you gonna do that's a mess that's that's something we're gonna do when do we do the play right but we're building here stuff we're just building it so now if board dot add the append child B I've been the trial to be oh yeah we've been doing our stuff my son I mean we can't do if you click B dot style the background color equal your color right player color which guess what I do not know what's my color is it is fascinating that you don't know what's your color is so you can find out easily because guess what from the game state you can actually find out your color right because you can loop through all the clients and if the client that is equal to your client ID then that's you right so and that's here right exactly so you can actually let's build a let's build this because we need to do it all the time right this player color equal not and not this lat and here when we loop and we join this is a good loop because we're looping and this is the color we're using the color right if the client that client ID equal equal equal client ID which is me right then the player color is equal C dot color that's how we capture my color that's very important because here when you click I want to save Michael but we're not sending anything to the server yet I'm just sitting my own color let's see if all of that stuff actually works stay almost there guys almost there sweet client generated new game created copy the new game refresh this guy join the game let's remove this because we don't you no longer need that yeah we have all the buttons we need to put some sizes there and then I can join this game to look at that it's faster without the debugger right and I can just just join so why you match faster guys without that ok let's fix the button size is so small bead of style the width in equal tail um I was just 150px so say 150 by 150 yeah that looks good that look good does that look good but I add it oh we didn't add even an ID for that I guess we don't have to but sure it's like there the text content right we didn't add that all right refresh refresh refresh new game oh you ain't created weak I think we did okay join oh oh my god actually works nice okay nice nice join the game I'm a green guy nice and join the game I am the blue guy obviously those guys are not communicating with each other plus the colors are disappearing for some reason right no that doesn't disappear we actually redraw them because be new people joined so we redraw the whole thing bye guys sweet sweet okay that was the join I think we got that and we nailed the join guys we nailed the join we nailed it the final piece on the final piece the feast before the final pieces of the play I'm gonna start updating the state let's do this so when I click no no I said my color I won't actually build a payload that I want to send to the server and the method is remember go to play play you need to send the method go it and which ball are you editing easy we have all this information a client ID equal client ID which game are we adding well this is game ID rain did we ever save the game ID because it's good it's gonna be a good idea to actually save it right because we we're gonna need it guys right because this is gonna be saved anyway if you joined it it's gonna be here definitely click joined or created I think we're gonna have it the game ID as a variable that's good another thing we need it's like which ball ID the ball that you're actually clay in or the cell or whatever you want to call it it is B dot tag that's the trusted property that's the beauty of talk very very critical and then all we need to do is just basically us as a client Deborah yes don't send right there's a culpable us I think right let's just send it yeah Deb Ilyas but sent we're gonna send Jason the string string if I fail oh and that is the client-side obviously every clients that has a sort of our side what do we do when we receive and a quest not to join join was actually a big function huh that's the join it ends here let's add an ephah statement for their play a user plays ok the user plays who are you client ID equal result dot client ID Const game ID i need to know which game are you playing so i can i can find it what else do we do why we're building in a game client ID game ID and i need to know which ball ID you're touching alright sweet so i need this three information once I know this one first I can start building this state which is Oh [Music] and remember this is a global state that will be changed on the server okay so let's give the game which is game this is off game ID right dot state which it doesn't exist to be honest right let's just do this call state a call get the state currently I know sometimes it's not set so if the state if the state is not set set it as an object let's use an object let's just follow the hashmap idea right so state sub ball ID which is which ball equal the client ID oh how do I know what color is the client from the server side I do not believe we actually purchase this information actually in the game if we think about it so it's games yeah we need a lot of stuff maybe it's just easier to send the color on the payload right it's just easier right guys lets us actually do with that I mean yeah I mean we have it here right we just literally have it player color just send it it's just easier instead of doing stuff like that goofy stuff so yeah so stay the balla is I called just literally Const color a cold resolved color yeah it's just easier right is there the ball ID we didn't use it so that's no that's good so that's it and then once we're done we actually sit that state back as the user equal right and that is sir almost the payload is ready what's the payload the payroll is very similar to the to the join payload to be honest right it's like that which contains the game which we said cause the game equal this guy and just send it back it's not join it's actually play right what else are we expecting to send to that client to the user actually nothing to be honest we're not sending it the play doesn't actually send anything to the user to that to their to their client we just update the state and that's it right because this this will happen often very very often okay that the state of the actual array will get updated all the time okay and now this comes back to the final thing which is the server now sending the state to the client every 500 milliseconds which is the final final play how about we do that guys let's build a function called function update game state and what we do essentially is loop through all the games that we have which is what for G for calls G of games right which is an array that will give us the key of the games right and what we would to do is get the G which is games sub G which is the actual game right object dot all the clients we're going to loop through all the clients and send them when loop through all the clients right and send them the state updated C of the game right and this is something we do every now are then all right we're gonna disturb mind when do we do that okay maybe when there are three players we'll just we'll decide that okay we did this code before so it's like clients sub C which is the client ID it's actually see that client ID right and then dot connection dot send right worst sundering where we're sending guys or sending the state of the game which is this Bobby well send it the whole thing the whole game I'll get this that in a minute but this is gonna happen every I don't know set timeout call this guy every 500 milliseconds and nobody actually called this function so we need a place where I actually call this function what is the best time to actually call it this function well we can decide to actually call the function when we have enough clients right when you have three clients let's call the function and start sending people there and they can start the game right away if game those clients don't length equal equal equal three then start the game start the game when we have three clients exactly how about we test this thing this is gonna be interesting see if actually works and here's the thing what are we sending back to the client or sending just the game state but we didn't actually build a payload to be honest so we need a payload constant a load we never said right which is to update the state which is like I don't know what's going on call it update I think the final thing we need to send a method called update what the game state that exactly that way okay and that's the game state so we can actually just do it once right here right constant game a call this game game then payload this could be game we stringify the actual payload right and that we need the final piece from the client to actually respond to whatever the server sends right what is the server send here dyes we're gonna send that join noob join we did the join we need to do the updates of that client receives an update we need to kind of do whatever we didn't join to be honest guys but with more a little bit we're not really removing and adding that cha children to be honest right actually I find I find removing the children now is just kind of useless so what do we do we receive the game right the game state have I would assume a state object which is essentially almost like a key so we can loop through all of that stuff right so for Const s which is the ball actually if you think about it off this right because remember it's gonna be something like that zero red one ball one is whatever right I think it's just start from one think we built the whole thing start to to be an indexed so so what we need to do is find take this this is b and b is the index so we need actually the actual value right constable ID equal this right we need the actual value and that we're gonna do a lot of debugging after all this code we written you guys gonna go and find document or get element by ID we need to find the ball that is titled ball ID this and give me a B object ball object right which is the button and we need to make this button star the background color equal to so the ID will be bi think right that's that's that I missed down something and the B the color will be actually the value of this we're gonna check this out and see if it actually works who knows them all right almost there guys it's gotta be a lot of testing refresh refresh refresh new game and we can join the same game that's the idea of the game and that's a twenty balls right one to twenty and you can join and you can join 200 crashed something crashed games is not a notable that's good so something crashed Update game stayed actually failed guys what we need to do is essentially the problem with this is we need to get the keys of this right objective keys right we're looping through this is this is the games is essentially an object of the game ID and the content right so we we need these guys the actual values right so we're looping through all the keys itself which is just an array so we can just do so that does the trick and I know I had a similar bug with the stage in the index dot HTML dot object the keys loop through all the keys okay will this work bum ba-bum ba-bum ba-bum new game young game and you should go join as well and you should join as well and we a boom boom that's a game state got the clients we have two clients nice I want you to update the clients boom oh the game started I don't see any crashes we're getting yours man we're getting errors States where'd yeah yeah after the error response that game does status an error why why don't you like this so you're receiving that yeah this is just failing see you're gonna cannot convert undefined or not the object why would I want to convert undefined or not run after response that it's there is our spawns right don't we should respond okay we have an error on the client this case same error okay was it I was a little bit too late so I didn't catch the actual error here but seems that this is no which is odd because that's what I'm gonna send right the payload is game update and there is a game state alright let's do it again it so versatile we have assignment to a constant constant oh oh is this a constant that's a problem should be elect haha that's the problem alright maybe that could have caused the problem during the state and fresh boom game boom forget it Const and refresh joint game fresh John game and draw game that will just immediately give us a result yes sir do we have a state oh the state is undefined oh yeah looks like we didn't even have a state we're assuming that we're having a stay which is wrong yeah we don't have a stay at Sun we do not have a state that's the problem oh my God look at that I'm overriding this oh my god okay you saw what I did right i overrode the actual game no with the state which is null in this case so the whole thing or just the whole thing just crashed so again third time is the charm and join fresh and joined refresh and join not see any errors oops we still have the errors guys really I expected that maybe we have to add like a check we need a play let's play boom boom hey go we at least have a state now hey we have state now yeah okay alright we just we forgot to play I guess after us to capture the state when when we don't have anything really oh my god looks like it's working guys we just got one and this is a blue oh there's a bug I know is this is I know exactly what's going on I know what's going on we're starting from zero this is like a zero index kind of a bug right so what are we building the what is the ID that idea call ball I let's just do this I plus one that should fix the problem and while we're at it does state well if this is if this is no I'm such a bonehead alright so then should be not okay we knew we get a new game I shouldn't fail that doesn't really matter guys to be honest because it's just once you start playing now you don't see that all right but once you start playing now everybody should get that stuff holy moly that is nice that is nice guys I have these three puppies look at that guys so this guy's the bread this is green see you can see directly everything is updated that's exactly right WebSockets multiplayer game and you can take this source code guys and build on top of it anything you want you can make it into a URL that and right I'm not gonna make this feature any longer than it already is only like seven hours now okay but you get the idea right you can take this code okay and just build on top of it and just have the idea of what we built here it's just using just raw WebSockets you can do all of that stuff I understand that building would like socket IO can kind of simplify some of the stuff we did today but still it's really your choice you can choose any technology you want but that is what we build essentially all right there might be some bugs but let me know guys and we're gonna see you in the next one how did you like this video hope you like it and see you in the next one you guys stay awesome

Channel: Hussein Nasser

Views: 47,190

Rating: 4.9430742 out of 5

Keywords: websockets, websockets gaming, multi-player gaming with websockets

Id: cXxEiWudIUY

Length: 106min 7sec (6367 seconds)

Published: Fri Feb 21 2020