DEV Community

How to use Socket.IO and build your first multiplayer game!

Kuberdenis on September 28, 2020

Prerequisites: Must-haves node.js npm express socket.io VS Code Introduction Backstory If you read m...
Collapse
 
ghisloufou profile image
Ghis • Edited

Hi,
The article is a good idea but it is incomplete, there is some mistakes and few things that could be improved imo. I followed it but encountered some errors and things not written in the article. Here is some:

  • You should put a link to a github or zip containing the base structure of the empty project so we don't have to manually create it by hand.
  • You don't define the startButton variable. We have to find it by ourselves. let startButton = document.getElementById("startButton");
  • Some variables are weirdly written: "start button" instead of "startButton" and "public path" instead of "publicPath".
  • You don't explain how to use the Home button even if you make a gif with it working.

  • The link to a demo at the end does not work anymore.

  • You should put a link to a github or zip containing the final structure of the project.

  • The HTML you linked from another github uses bootstrap which make the custom cursor not working on buttons.

Sincerely yours,
Ghis

Collapse
 
kubeden profile image
Kuberdenis

Hey Ghis! Thanks for commenting on this. I will make sure to update it asap!

Collapse
 
dridritwo profile image
Adrien Auxent • Edited

Hey, just wanted to say I got stuck on that line : "app.use(express.static(public path));"
Had to rename public path to publicPath.
also :
socket.on('startGame', () => {
io.emit('startGame');
}) gives me an error asking me what is socket.
So I changed socket with io, cause that's a variable.
It took me reading the socket.io doc to find out I had to place this part inside the connection log part :
io.on('connection', (socket) => {
console.log('A user just connected.');
socket.on('disconnect', () => {
console.log('A user has disconnected.');
})
socket.on('startGame', () => {
console.log('Game started');
io.emit('startGame');
})
});

I also had to add the event on home button, and a function :
app.js:
socket.on('home', () => {
showStartButton();
});
function showStartButton() {
startButton.style.display = "block";
crazyButton.style.display = "none";
startingSection.style.display = "block";
}
server.js :
socket.on('home', () => {
console.log('home button pressed');
io.emit('home');
})

A few missing informations, but thanks for the tuto anyway! It works now.

Collapse
 
kubeden profile image
Kuberdenis

Hi there, I'm glad you figured it out!

A few notes - on the line with changing the socket to io, maybe you got something wrong with setting the app.js. You should have "let socket = io();" in the very beginning of the app.js file. For the buttons missing styles, I have included a GitHub link with the HTML & CSS.

Collapse
 
dridritwo profile image
Adrien Auxent

The socket part was on the server side.
What I got wrong was I didn't realise I should place the listener inside the "io.on('connection', (socket) => {})" , and not after it.
And yeah, I took the github files for HTML and CSS. I am glad I didn't have to write that one down line by line. But there was still some lissing JS lines to have a working home and start button. I could ifigure it out from your exemple though.

Thread Thread
 
kubeden profile image
Kuberdenis • Edited

Aah, I see. Anyway, you figured it out, which is great! Also, if somebody else stood upon the same problem, they will have the solution, so thanks for the comment!

Collapse
 
okkarmin profile image
OkkarMin • Edited

Hey Denislav,

I got inspired and tweaked the content a little to create a workshop/content for incoming freshmen. I would like to credit you and is there any preferred way you would like us to credit you? 😊

crazyworkshop.yeowys.com/

Collapse
 
kubeden profile image
Kuberdenis

Hey there, I'm glad you got inspired to include this in your own website! Feel free to credit me in the footer by linking to my Twitter profile (@asciiden ). Thanks!

Collapse
 
anonyda profile image
Nida Shaikh

This is so cool! I was just thinking about making something multiplayer and this post popped right up on my feed. Thanks for this implementation!

Collapse
 
kubeden profile image
Kuberdenis • Edited

Hey there, you're most welcome!!

Collapse
 
bobbyiliev profile image
Bobby Iliev

Great post! Love it 🚀

Sounds like a perfect idea for a first project 🙌

Collapse
 
kubeden profile image
Kuberdenis • Edited

I'm glad. That's the idea!

Collapse
 
andrewbaisden profile image
Andrew Baisden

It looks quite easy to implement which is great I could see someone creating a game like Among Us.

Collapse
 
kubeden profile image
Kuberdenis

Maybe somebody is working on that... but shhh don't tell anybody! 👀👀👀

Collapse
 
skipperhoa profile image
Hòa Nguyễn Coder

Very good! Thankd you!

Collapse
 
abdurrahmaanj profile image
Abdur-Rahmaan Janhangeer

I think you missed braces

(The JSourney: Learn with projects, not videos!)[dev.to/denislav__/the-jsourney-lea...]

Collapse
 
kubeden profile image
Kuberdenis

Ah, thanks for that!

Collapse
 
arpitsingh profile image
khkb

Hlo sir ,
If we have 2 games in our frontend then how to setup socket server.