I Built a Jackbox Party Game App! | Easy Tutorial

so this is a jackbox party game setup using websockets and socket.io to communicate between the clients multiple clients and the server so what we've basically done is make a jackbox like game session and they can can all play a game together and get the same information from the server so this is the home screen and you can see we have create game and join game very simple uh at the moment but hey create game uh you type in your name and then you can choose one of the games to play so we'll do lash quip and you can see that we have a game code that in this case is just incrementing on one uh and we have our list of players and a start button to play the game so now if I open up another window here we can hit join game type in our second player's name and type in that game ID hit connect and as you can see both games are updated with that player list and once we're ready we can hit start and they are connected and set up in the same room to to receive all the same data so let's go over how this was done so let's start with the server side as I said we're making a websocket server using socket.io and specifically we're going to be leveraging the power of rooms so whenever we get a new connection from a client we're either going to make a new room for them or we're going to have them join an existing room this is going to allow us to send data to all the clients in the same room at once and treat them as a jackbox party so let's take a look at the code it's pretty straightforward first we're going to make our web sof connection using socket.io then we're going to listen for a new connection from the client and when we do we're going to Define how to handle two different events we're going to have a create game and join game event when we get a create game event we're going to do a few things first we're going to pass a unique room ID to socket. join this will automatically create a new room with that room ID for us if it doesn't already exist then we're going to update this rooms object which I've created just to store data about each room and which players are in which rooms finally we're going to emit two events the first being being a game created event which will pass the unique game ID back to the client and then we're going to emit a player update event which is going to return all the players in that room which in this case should always just be the player that made the room but whenever we get new players we'll emit that same event with a new updated list of players next is our join game event which is going to be pretty similar to the create game event but we're going to handle it slightly differently first we're going to verify that the game ID they're trying to join is a valid ID if it is we'll just call socket. jooin on that ID we're then going to update the rooms object again and add that player to that room then we're going to emit two updates which are almost exactly the same as before the only difference being we're going to emit a game joined event with the game ID instead of a game created event so now let's talk about the client I use View and view defy for this project obviously you could use whatever you want the majority of the work for the client is done in this Pia store so let's go over that first we make our connection into the server and then we just Define a couple of functions we have a join game function which will emit that join game event and pass with it the game ID and name of the player then we have a create game function which will emit a create game event and the name of the player and then all we really need to do is listen for those events we defined on the server so we have the game created game joined and players update events and all we need to do is save that data in the store so we can use it in our components as an example this is the connect function for the create game component you can see it uses that Pia store to create a game and then it moves over to the lobby component and in our lobby component we've found our game ID and players list to their respective components I do almost exactly the same thing for the join game component I just called join game instead of create game so yeah that's it for this jackbox game for now hopefully in the future I'll update it and actually Implement a game and make it look a lot nicer and if you enjoyed the video please leave a like and if you're interested in web development please consider subscribing I'm going to be doing a lot of fun and weird projects in the future so yeah that's it thanks for watching

Channel: Dark Mode

Views: 373

Keywords: website, web, development, dev, build, create, application, app, experiment, vue, angular, react, framework, javascript, html, css, typescript, dark, mode, software, engineer, computer, science, interactive, fun, funny, node, vite, github, pages, hosting, code, programmer, programming, coding, design, UI, user, interface, UX, sass, scss, project, friends, social, drinking, games, game, vuetify, socket.io, websocket, multiplayer, phone

Id: dXj8Ve9gHSA

Length: 4min 3sec (243 seconds)

Published: Fri Feb 16 2024