Building a Multi-player Game with WebSockets



In this video I show how we can use websockets to build a browser-based multi-player game that works on any device. I design the multi-player game with the server authoritative model where the game state is stored on the server. I use WebSockets as a communication medium for the game I am building.

Chapters
0:00 Intro
6:00 Connect to Server
9:45 Create game
13:00 Join Game
16:00 Play Game
18:00 Broadcast State
22:15 Example
31:00 Code
31:10 Connect Code
50:00 Create Game Code
59:10 Join Game Code
1:25:40 Play Game Code
1:30:00 Broadcast code

Source Code

Nguồn: https://openworldleague.org/

Xem thêm bài viết khác: https://openworldleague.org/category/game

36 Comments

  1. Hi! So I am at47:22 in your vid, but when I search localhost:9091 it just says:
    'This site can't be reached. Localhost refused to connect'
    Thanks for the vid!!!

  2. This was the only video I could find that helped me build a multiplayer pong game. Thanks so much. https://multiplayer-pong.netlify.app/
    Sometimes the bandwidth all of a sudden slows way down. Besides improving my code by making the server-side less stateful, what else can I do? You did mention about saving state in a Redis instance, but I'm not sure if that would only help scalability or also the network bandwidth.

  3. How can I deploy a practice realtime project like this? I want to use a PaaS such as Google Compute Engine, but I haven't had any luck.

  4. @Hussein Thanks for the lovely tutorial i deployed this game in Heroku enabling secured web socket connection (with 2 players max limit) https://ball-game-frontend.herokuapp.com/ but it’s super slow on WSS where as super fast on local system. Is TLS the reason behind this? If so how come big companies runs websocket so smoothly. Also while playing the game i do get frequent websocket already closed error

  5. Awesome tutorial, definitely learned a lot!
    However, I can't seem to figure out how to get this online. I can't simply put the code on a webhost like I've done with PHP focused apps because I need a SSL cert for the browser to trust my website. How would I go about attaching a certificate?

  6. Thanks for this very thorough tutorial. The first part cleared a few things up for me. I'm not sure why you are calling the coloured squares 'balls' though haha, that confused me for a bit

  7. Use JSON data over http/https protocol as it is the safest and avoids xss attacks a lot better.

  8. how can you make any device run as a server and dynamically changes the url('let ws = new WebSocket("ws://localhost:9090") needed by clients to connect?
    also how can you make clients choose which server to connect in a local network?
    help please : )

  9. I can't thank you enough, man! After trying to follow other socket guides this was the first that helped me get at and understand the underlying websockets tech and not rely on a library. Building a new messaging protocol (very basic, but still) made it much easier to understand the scope of what needed to get done.
    This video helped me make a browser-based multiplayer game I could play with friends and family during the isolation (after never touching Node prior to 2020 and no JS experience since early 2000s)! AND introduced me to this channel! I enjoy how you explain many topics, Hussein, but I really really love the code-along examples especially 🙂
    Still have a long way to go. Can't wait to see and learn more!

  10. Hey Hussein! amazing video man, thanks for uploading such quality content!
    I'm having an issue though, when I create the client and connect to the server the clientId stays null. Then, if I create a game I get the following error: TypeError: Cannot read property 'connection' of undefined. And the wsServer disconnects. Any ideas :/?

  11. hey Hussein, why does `connection.on("open", () => console.log("Opened!!!"))` never log anything? I've noticed this in your previous video as well. It clearly works for the 'close' event.

  12. I really liked this video, it's really thorough. However now I liked to alter it a bit and add my own images for a different game, however I fail to be able to get my images on the html page the way I would normally do it through giving the path relative to the index.html in src=""

  13. I’m here in comment section in the middle of video, can’t wait to appreciate u that the way u describing everything, is awesome 😎. Thank u so much. And pls keep going on describing things before coding in the future as well…. Have a nice day Sir😊

  14. This was amazing! Informative AND entertaining!
    I think the quesiton that comes next is how to scale a game like this. If you have tens of thousands of players, you can't really have ALL of their requests going through this single index.js on a single machine yeah? And all games right now are tracked in this single index.js so if the one server goes down, ALL matches go down.
    Is the solution to scaling this game to essentially have more machines running this index.js but all listening on different ports?

  15. Great video Hussein, thanks! A couple of questions, I'm assuming by how it works, that the 'Timeout' function in the server is non blocking, is that correct?
    And the other one, can you refer us to one of your videos talking about a bit of security for an architecture like this? Maybe a player authentication or something… Thanks again

  16. Great Video ,really hellped to understand the topic and explore the project 😊💕

  17. Stopped at 17:00 continue
    1:28 player sends his play actions to the server, without expecting a response
    The server gets all the play actions from the clients, batches them and after each frame (seconds or milliseconds) sends the state update to all the clients
    This is called server authoritative model, clients send changes or input and the server sends the state
    Opposite of this mode is called lockstep appproach, the client sends input, the server doesn’t calculate the state, it broadcasts all the inputs from all the clients to all the other clients, then the clients are responsible for calculating the state

  18. Awesome video, thanks! I wonder why does the websocket server rely on the http server and how do they interact with each other. They use the same port so there should be some mechanisms for passing message from one to another?

  19. Thanks Hussein. For your prompt response. And thanks for taking your time in time framing the video

  20. Great video. One of the best session on Websocket multiplayer game.
    It would be good if you could share the code.
    Waiting for your session on the same working on Multiserver with Redis

  21. Will you plz make a video about audio/video calling app or service?
    Thanks

  22. Perfect!!!
    I will help me in my next multiplayer chess game project.
    Load of thanksss.

Leave a Reply

Your email address will not be published. Required fields are marked *