DEV Community

Cover image for Building a multiplayer game using WebSockets - Part 1

Building a multiplayer game using WebSockets - Part 1

Saurav M H on July 06, 2020

A definitive guide for building your multiplayer game on a browser the right way using socket.io on NodeJS and React. Ranging from folder-structur...
Collapse
 
gdi3d profile image
Adriano Galello

This is great, is this going to be published on a GitHub repo also?

Collapse
 
sauravmh profile image
Saurav M H

Thanks Adriano! Yes, it is and always will be open sourced. I have already linked the project at the end of the article :D

Collapse
 
gdi3d profile image
Adriano Galello

Ohh cool, I didn't realize it was your own repo :P, sorry about that

Collapse
 
yandeu profile image
Yannick

Have you already tried geckos.io? It allows client/server communication over UDP, which is perfect for real-time multiplayer games.
I'm the author of geckos.io

Collapse
 
sauravmh profile image
Saurav M H

I checkout out the project, it looks very promising.

But as mentioned in the geckos.io docs itself, socketio is suggested over geckos for turn based multiplayer games (which is my current project) :D

Would surely look into this if there is any update for turn-based games. Other than that it's a great project!

Collapse
 
yandeu profile image
Yannick

You're right. For turn-based multiplayer games, which work fine with the limitations of TCP, there is no need for geckos.io 👍🏻

Geckos.io is only needed for games that absolutely require fast communication, like a shooter game for example.

Collapse
 
sauravmh profile image
Saurav M H

Hey all 👋,

I wanted to make an announcement. It's been a year since I wrote this and I am very grateful that people are still using this as a reference. And I want people to use this even with the new and breaking changes from socketio.io

There are a few changes made to the codebase, mainly in the way rooms and connections with a room are handled with the new release of socket.io library v4. As mentioned I had used some internal APIs but they are no longer supported with the new release.

But I have made those changes in my GitHub repository @fifa-api and even added support for Redis to help to scale. I would appreciate it if you would use the code from the Github repo directly than from the snippets here, as I don't want to change this code for people who are using this with older versions.

Thanks for understanding and have a great day ahead 🤠


TLDR;

Changelog for [github/fifa-api]

  • codebase synced for updated libraries
  • support for Redis added
  • Docker containerization support added
  • minor web app UI changes
Collapse
 
udaraweerasinghege profile image
Udara Weerasinghege • Edited

This is awesome. Thank you for sharing. I have a few ideas for real time games, and will definitely be following this.

Collapse
 
sauravmh profile image
Saurav M H

Thanks Udara! Stay tuned for the part 2, I hope it will help you complete your project with deployment

Collapse
 
drakgoku profile image
drakgoku

where is part 2?

Thread Thread
 
sauravmh profile image
Saurav M H • Edited

Sorry, I got held up in some other projects. Should expect the part 2 by next week.

I'll try my best to avoid delays here!

Collapse
 
kretaceous profile image
Abhijit Hota

Good write up. =)
Have been waiting for part 2 though!

Collapse
 
sauravmh profile image
Saurav M H

Apologies for the delay 🙇

But good news, the next part is already half done! Super excited to share it with you guys 😋😋

Socketio game system design and their deployments on scale

P.s: I shouldn't have given the spoiler 🤫

Collapse
 
kretaceous profile image
Abhijit Hota

🤩🤩🤩 Awesome! Thanks a lot!

Collapse
 
mportercodes profile image
mporter45042

This is really helpful, I am just trying to build a small multiplayer real time game with matchmaking ability and have not been able to find much helpful. I was starting down the road of Nakama for a phaser game I am building, but honestly for the prototype I want to build, I felt like that was overkill. I feel like I can learn a lot from your code and use some of these principals to build the game I am trying to do. Thanks for taking time to help others by sharing.

Collapse
 
kenodek profile image
Dominik Targosz

What is the reason to treat adapter as store. Is it just your idea or some standard? Why not to store data in constructor?

Collapse
 
sauravmh profile image
Saurav M H • Edited

Using socketio adapter as a store is a rather undocumented feature, which is used internally. So not entirely my idea 😉

And we do not use constructor for storing data, as we need persistent storage between users across a single room. With a constructor you will be saving info for each user separately (which is not intended here).

Yes, you can use global variable to store all the information about the room and its users. But using this solution, it won't be secure (as info about all rooms are exposed to the user, yes you can make it better by adding sanitizations and read protects yourself) and second it won't be scalable (as with sockeio-adapter case; using a redis adapter is just a matter of plugging in redis initializer object, and boom now you have storage in an ACTUAL DB, which can be accessed via multiple socketio nodes and hence more scalable)

Collapse
 
kenodek profile image
Dominik Targosz

Really thank you for your exhausting answer

Collapse
 
longvd89 profile image
longvd89

You can explain the game how play ? thanks

Collapse
 
sauravmh profile image
Saurav M H

Sure! It's a turn-based multiplayer game. This game in particular allows you to build your own Football Team, by choosing players based on turns. You can search these football players based on any stats (their name, rating, team, positions, and a lot more!)

To play:

  • Create a room (add a password, if you wanna keep it private)
  • Share the room ID with your friends, and they can join the room
  • Once, all players are ready the draft begins
  • Each user can choose their player from the search box
    • Every turn has a time limit, so pick before the time runs out!
  • After you create your dream teams, use the same teams on your FIFA game and play with each other

This was created mainly for offline gaming, to avoid writing player lists manually on a paper or sending on chats when creating custom teams amongst a group of friends. Easily search and add players to your teams with this platform as a middleman :D