Socket.io is an awesome library that provides a real-time event-driven connection between a client and server relying on Websockets and other protocols and approaches to guarantee the real-time capability and performance boost when it comes to handling thousands of socket connections and load balancing it on multiple servers. In this video, you’ll learn Socket.io from scratch and understand the most important aspects behind socket.io that allows you to quickly develop Socket servers and create client-side applications using Javascript and React to connect to the server and communicate and exchange data throughout an event-driven mechanism, We will create a full Tic-Tac-Toe Multiplayer online game using Socket.io, Node.js, Express.js and React and make it work perfectly that you can use it among your friends and have a good time together playing XO.
⭐ Timestamps ⭐
00:00:00 Getting started and what we’ll build
00:03:20 Understanding how Socket.io works in a nutshell
00:09:40 Setting up Express Server Project and Installing dependencies
00:13:07 Creating our Socket.io server with Express
00:26:57 Setting up React client application with typescript
00:27:45 Connecting Socket Client to Socket.io server
00:33:04 Socket.io custom events (Emit and Listen)
00:36:59 Socket.io Rooms and joining custom rooms for our game
00:49:09 Allowing the user to type and join a custom game room
01:21:24 Creating our Tic Tac Toe game board
01:33:56 Update game board through sockets between multiplayers
01:53:08 Handling players turns when playing a game
01:57:37 Sending start game event when players are ready
02:08:32 Checking if one player has won the game
02:14:34 Sending Win status to other player
💻 Grab full Client/Server Source Code on Github:
🧭 Full MERN Website React Nodejs w/ GraphQL Tailwind and Docker From Zero To Deployment
🧭 Watch Tutorial on Designing the website on Figma
🧭 Watch Create a Modern React Login/Register Form with smooth Animations
🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
🧭 Learn Redux For Beginners | React Redux from Zero To Hero build a real-world app
🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
🧭 Introduction to GraphQL with Apollo and React
🐦 Follow me on Twitter:
💻 Github Profile:
💡 My Blog:
Made with 💗 by Coderone
navid sotoudeh mehr
03.10.2023perfect 😍
Salted Byte
11.09.2023Hey, this is too hard to follow. Your explanation is good, but especially in the beginning, you just throw typescript and a custom configuration for your file system out there without explaining…. Cant follow along if we have different file structures. youre asking for confusion. I wish you would have taken it step by step from scratch…
Srihari katare
28.05.2023Hey can I do this without using TS . As I am using a netlify site for hosting my site.
kian180
15.05.2023Thank you very much for this video. I am in the process of creating a multiplayer card game called switch. The way you have your system layout with class base decorators is brilliant. I got a lot of help from this video. Well done for the amazing content
Georgescu Cezar
06.05.2023Unhelpful. U had a different setup “ in fact i already did all this stuff “ but not showing how so basically useless from the start.
Luciana Harold
09.04.2023Thats it? are u teaching how to copy & paste …
yasmin
06.04.2023Line 195:6: React Hook useEffect has missing dependencies: 'handleGameStart', 'handleGameUpdate', and 'handleGameWin'. Either include them or remove the dependency array react-hooks/exhaustive-e-deps How do i fix it. Any help would be aprissiated
yasmin
27.02.2023Thats great, would you do a memory multiplayer game vedio , or relse how can I reach you to teach me how to do it ?
yasmin
27.02.2023why do you use class band nit functions ?
TMJoural
27.02.2023you skipped the most important part! The configuration. Check your comments yo
Sarah illuminorus
17.02.2023Hey, I executed "npx express-generator my-app" with bash and I have different folders compared to yours, help please?
Dylan Weicker
21.12.2022I'm getting lost in the beginning because npx express-generator does not give me a server file. Everything is .js instead of .ts, I wasn't certain that I changed to to .ts correctly. I didn't get a src, so I made one manually and moved everything but the node modules and .json files into it. But I couldn't get it to run without a server file!
Vlad Bohdanets
13.11.2022Can I get the source code?
indigosay
26.08.2022Is it considered as peer-to-peer game?
Jonathan Harris
18.06.2022Clearly he's ignoring all the comments about how the project folder setup was breezed by.
Rajat Panwar
20.05.2022default event map no longer works
Mickael Richard
05.05.2022Can someone help to get the same file configuration that he has? because this part is skipped so a lot of people are not able to follow the tuto :/
AI Native
02.04.2022Hi sir your videos is top-notch I really learned new things plz make the tutorial using react, typescript, graphql, Node.js mongodb together full stack plz 🙏
Radan Devist
01.04.2022Great video!! Very interesting.
mohammad tavakoly
01.04.2022Thanks , so good
Motivational with pictures
01.04.2022You are the best man because you know I’m this modern world have less mount of time with us or busy person in the world you have made the view all I want to suggest to you try to make a video like short or like playlists
Motivational with pictures
01.04.2022When you make short video more traffic will come and more income will generate
Motivational with pictures
01.04.2022Please reply me
07.Nguyễn Bá Đại
01.04.2022source code, please??
Nompack
01.04.2022dude can you share how you can code better like you, I'm struggling to make a project on my own lol.
Abhijit Ezhava
01.04.2022Nestjs v8 provide inbuilt support for the class based sockets.
Jad Yahya
01.04.2022You are the king
jeminal dennis
01.04.2022I only wish i could press the like buttons 100 times. thank you so much
yousaf jamil
31.03.2022Please make a video on socket.io to make a chat app like whatsapp
Matan Swisa
31.03.2022Awesome video keep up the hard work
Daniel Truong Dev
31.03.2022Hi, can you please tell me how you set up your ts express file at first? I tried express generator then install typescript like you did but I don’t have the tsconfig file, and lots of file to start, thanks
Pavan Sampath
31.03.2022i didnt understand how did u setup express module
ur tutorial is so complex pls try to explain clearly and everything
Randiel Zoquier
31.03.2022Hey, interesting tutorial, but I feel you skipped out a lot on the file configuration, especially since what you have is really different from the default node.js stuff. I got really confused really early on, but I'll watch through to get as much info as possible
deanolium
31.03.2022Nice video though I would recommend anyone doing this to put the game win check on the server rather than on the client. As otherwise any crafty client could just send the game_win message to the server and force a win at any point. Basically, you should always assume the clients are going to try and cheat the system at any opportunity!
Of course, going further, the server could implement a state machine to ensure things happen in the order you expect (for instance, only active players can send moves). Some fun things for people to try and implement.
Vishal garg
31.03.2022can you make this project in node js instead of typescript? It will be very useful
matt unlu
31.03.2022Would be better if you show what you have implemented in every major components you added…
Davi Araki
31.03.2022When we use the express-generator the outcome is WAY different from the video…