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...

Read full post

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

Kuberdenis • Sep 22 '21

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

Adrien Auxent • Sep 29 '20 • 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.

Kuberdenis • Sep 29 '20

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.

Adrien Auxent • Sep 29 '20

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.

Kuberdenis • Sep 29 '20 • 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!

OkkarMin • May 20 '21 • 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/

Kuberdenis • Jun 8 '21

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!