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
github.com/hnasr/javascript_p...

[@hnasr]

Connect to Server : 6:00 Create game : 9:45 Join Game : 13:00 Play Game: 16:00 Broadcast State 18:00 Example 22:15 Code 31:00 Connect Code 31:00 Create Game Code 50:00 Join Game Code 59:10 Play Game Code 1:20:40 Broadcast code 1:30:00 Source Code github.com/hnasr/javascript_playground/tree/master/websocket-cell-game

[@MrManshenoy]

Hi Hussein, I was curious, actually how much did take to actually program this in the background probably it was more than 1:46:00

[@DrWho2008t101]

thanks for the video.

[@breakl7010]

@@MrManshenoy probably less when you don't have to explain it all

[@sirdudes]

This video needs a 'LOVE' button! Amazing tutorial man!

[@hnasr]

You got a love on this comment

[@drewbrown1534]

This is great, thank you for taking the time to really walk through everything and show all the little things that came up. This is one of the most “real” dev videos I’ve watched. Looking forward to more!

[@johnshaheen3862]

I swear to god you are genius and your channel is a treasury

[@StarRoseAngelic]

The beginning of this video was SOOOOOOOO helpful omg. As a beginner it's been so hard for me to capture what the code is actually doing when I follow tutorials but your explanations and illustrations really helped to clear up some confusions I had. Thank you!

[@saranavinash9261]

Just tow days before, i started preparing for the live collaboration problem for hackathon by watching your tutorial of websocket crash course and this video, we learned the concepts thoroughly and our team won the 1st in live collaboration concept

[@keithvsr]

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!

[@hnasr]

All the best Keith on your project! Thanks for sharing your experience 🙏

[@connoredwards7013]

Damn your enthusiasm is infectious, I love it!

[@scottsaccenti]

How am I only just now finding your channel? Good stuff, thanks for your work and sharing all this.

[@pvdrdeena1]

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

[@a_green_cat]

you're such a legend for using huge text in vscode, I can't even begin to describe the pain of not being able to read anything while split screening on a laptop lol

[@blakebruner5038]

I found this video very helpful in 2024, thank you!

[@PossumMedic]

"I'm obviously a single guy" me too bro 😭😭😭 😂

[@VH3S]

Great video, well explained and just what I needed!

[@a_green_cat]

dude you're an AMAZING teacher.

[@aseempathak981]

Thankyou for the video Hussein , your channel is a gold mine! :)

[@hnasr]

❤️

Even if you aren't using websockets NOR javascript this tutorial is great. The detail and explanation style makes it easy to follow. At the same time the depth of detail is useful for any online interaction programming. I'll be using websockets for web clients but I'll also be using the information and symantics? in Java and C++ clients, probably also use this in my microelectronics projects that need serial comms.

[@KamalKhan-bc8lz]

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😊

[@hnasr]

Thanks Kamal for your comment ! Appreciate it! 🙏

[@aatifbangash]

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

[@ADNANAHMED-eo5xx]

did u complete it ?

[@aatifbangash]

@@ADNANAHMED-eo5xx yes i have completed multiplayer chess game. With audio and video chatting (mediasoup)

[@aatifbangash]

@@ADNANAHMED-eo5xx it was for my client.

[@ADNANAHMED-eo5xx]

@@aatifbangash so basically u worked with nodeJs ?

[@aatifbangash]

@@ADNANAHMED-eo5xx yes

[@TheEpicPineapple56]

Why do we generate a clientId upon every websocket request? Shouldn't we only do that when the connection is opened? The way it's written right now, doesn't the client get a new ID every time they send a request to the websocket? Edit: I understand now. wsServer.on("request") is only called when there is a request to create a connection. I was interpreting "request" to mean any kind of connection or message, but it's not that. Request specifically refers to a request to create a websocket connection. So in essence, the whole wsServer.on("request") bit *is* the connect() method from the design overview. Once that is called, it establishes the 3 other, independent event listeners that then listen to if the connection opens, closes, or a message is received. Hope this helps if anyone else got confused!

[@meomkarchavan]

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

[@hnasr]

Omkar Chavan thanks Omkar!! Appreciate your comment and glad The content helps

[@jamessalisbury1588]

Very cool project! I was curious if this would still work or potentially have delay issues if you scaled up the size of the grid you demonstrate in the beginning. If I wanted a grid of 64x192, would there be problems? Thanks!

[@solomon7009]

Great video, thanks!

[@jonas-pohlmann]

good explained video, thank you

[@karjedav]

This was a very guid tutorial.

[@betawen]

Super video! I applauded for NT$30.00 👏

[@EddyCaffrey]

Great video. Thanks. 👍

[@hnasr]

thanks eddy for your great comments and questions. (Replied to your question on story)

[@emanuel0723]

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

[@hnasr]

Correct timeout is async not blocking and check out this playlist on web security I discuss several ways of securing this kzbin.info/aero/PLQnljOFTspQU3YDMRSMvzflh_qXoz9zfv

[@emanuel0723]

@@hnasr Cool! Thanks again!

[@KeiAKWs]

59:14 My brain was already begging for mercy, then you said, that the tricky part will come. lol I guess the longer I stay at it the better I understand...

[@shockedwhistle7473]

Thank you so much

[@user-pt3zr6nh9d]

after watching your video i feel learn a lot of,and i still hava a question ,run in local i can use 8080 or other port ,but what port i should use when i want to run on the server?

[@devMoemen]

Great ! Thanks

[@pvdrdeena1]

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

[@husseinnasser]

Deena Thayalan thanks Deena, here is the source code github.com/hnasr/javascript_playground/tree/master/websocket-cell-game

[@ZettaFan]

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?

[@hnasr]

I talked about generating a cert here, it depends on your web server that you use Here is how I did it with NodeJs with lets encrypt kzbin.info/www/bejne/mGSYdZawbpZ8qqc

[@slmjkdbtl]

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?

[@hnasr]

Thanks! Correct, websockets hijacks the TCP connection from an existing HTTP session.

[@Balaji_Devadoss]

getting -> Uncaught TypeError: webSocket is not a constructor during the 'connect code' implementation.. kindly advice..

[@waasar]

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

[@hnasr]

hahaha just noticed that I have been calling squares balls I don't blame you for being confused

[@karthikrangaraju9421]

Hahaha 😂

[@saubockmcgiver9743]

What if I want to run multiple game lobbies at the same time? Do I just open a new port running a websocket for every lobby?

[@Viachev]

THANK YOU

[@username45679]

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?

[@hnasr]

Correct the answer to your question is your last sentence. Just make copies of this code index.js into multiple server. Have a load balancer on front of it. i talked about how to do this in HaProxy and nginx videos as well. Search for scaling Websockets video

[@AkamiChannel]

are there any browser-based mmo's? Idk that that would be realistically feasible

[@username45679]

@@AkamiChannel RuneScape 2 was completely browser based and was one of the most played and commercially successful MMOs of all time.

[@AkamiChannel]

@@username45679 oh ok I didn't know. thx for sharing

[@MimiGunz]

Any ideas or resources on how to create a score and timer for this game?

[@siannazewdie7760]

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

[@VonchkynProduction]

same here

[@Royceroni]

same

[@ciuna9796]

has anyone fixed this?

[@siannazewdie7760]

@@ciuna9796 no not yet :(

[@MahdiHaeri]

Nice 💯🔥🔥🔥

[@parthshah6343]

Can you what all technologies have you used to make this game

[@jackmiddleton2080]

47:19 I am not getting my object. Nothing is received. Like onmessage is never triggered but my code seems the same as yours.

[@slmjkdbtl]

What about WebRTC data channel for multiplayer gaming?

[@bardhan.abhirup]

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.

[@hnasr]

Abhirup Bardhan now that you mentioned it I noticed that too. I think (just theory) its because the connection gets open before we assign the event handler so it never get triggered.. not sure where should we assign that events though

[@bardhan.abhirup]

​@@hnasr I tried looking through the API for the open method ... I don't think i found it. Either that or I did a really poor job of searching. Also, Intellisense doesn't show 'open' as an event option. Could it be that it doesn't exist?

[@hnasr]

It very much could be! That event is the websocket nodejs you can safely remove it

[@Sassybliss404]

I have created tictactoe using Angular ngRx. Can it be used with that

[@maheshmahadar4780]

in my website i cant use socket.oi multiple pages. is it valid or not i am doing ?

[@MelloxOnYT]

what coding app did u use was it vscode

[@AkamiChannel]

what software is he using for this presentation?

[@mostinho7]

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

[@brucelamb6060]

This is awesome Thank you for this video. I started this video with functional websocket chat but using Java (jakarta EE on tomcat10) instead of Node.js as server side. Could you make a video with this same setup but with action graphics? Such as a tiny red square and blue square (player 1 and 2) moves around the screen but 2 separate browsers see the action of 1? I.e js action events with onkeydown arroy keys (up down left right) and += or -= on x and y coords. Is it best to do this in a for action/time base games (racing game, slap jack game, etc) Thank you for making this video.

[@rayoseldev819]

How can do it for a https website? I have one with nginx...and I spend 2 days finding the way to connect websocket to https >.

[@TheWytzepakito]

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=""

[@karjedav]

I'm having the same issue.

[@TheWytzepakito]

@@karjedav add this line: app.use(express.static('public'))

[@Royceroni]

I hit debugger, but I got "No debugger available, can not send 'variables'. I'm not sure what's wrong.

[@user-cg1pq2kh6t]

hello, it's not enouqht, but i'm understood basics. You can write only const payLoad = { clientId, gameId } without dublicate props with string

[@areion8161]

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.

[@hnasr]

I usually recommend doing it on bare metal before jumping to the cloud so you understand the fundamentals .. The cloud is great but unfortuently lots of us starting using it without understanding how it works. and when things go wrong we don't know why

[@areion8161]

I will try that; thanks for the recommendation!

[@areion8161]

@Ander P Thanks! I ended up doing exactly that and deploying the client code on netlify multiplayer-pong.netlify.app/

[@areion8161]

@Ander P The monsters and overall graphics fit very well together. Good luck with the user functionality; it’s gonna turn out great!

[@mlg_rajgaming3406]

For some reason, then i try serving my webpage, it says that error connection refused

[@saranavinash9261]

what does payload mean here?

[@kowalski0414]

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 : )

[@hnasr]

Jerico Christian Magno many ways to solve this. You can make the client aware of the list of servers. A simple array of strings with the urls. Or you can have a load balancer that does that so the client only have the address of the LB. check out the scaling websockets video Scaling Websockets to Multiple Servers with HAProxy, Redis and Node JS - Group Chat Application kzbin.info/www/bejne/nauslHqef6hrnqM

[@kowalski0414]

@@hnasr thanks!

[@aatifbangash]

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

[@hnasr]

Atif Ali good idea

[@RandomStuf69]

32:00 npm init -y doesnt work, do i need to install something befor?

[@RandomStuf69]

solved, i didnt install node

[@yahsiah777]

Next video how to create a live chat function in-game live data.

[@maximewalrant1469]

Hello, can you share the code please ? I have some issues.. Thanks !

[@hnasr]

Hey sorry I thought I already shared it turns out I didn’t, you can find it here github.com/hnasr/javascript_playground/tree/master/websocket-cell-game

[@taihatranduc8613]

I like your voice

[@mohammedarfaz9215]

I implemented the code using socket.io and react js but now the problem is, suppose there are 2 groups, thats total 6 players, iam confused about the timeout function. wont it be good to clear the timeout after the game is finished. It will run even if the no players are playing. But the thing is timeout is a single instance for all the users even if there are 1000 groups or 1 groups. so is there another solution to this. i tried to create a custom timeout for all the groups seperately but calling them doesn't fit the solution. I find the best solution for me will be to send the event when the user clicked onto the cells instead of keeping a timeout functionality. It will create a load in the server however it solves the problem of timeout. totally confusedl....if i clear the timeout when a socket disconnects, it clears the timeout for all the other users as well even if they are not in the same group

[@athanasiosmarkou6864]

I understand this is an old comment but it might help someone else with similar problem. In order to achieve that you would need to create a new timeout for each game. So whenever a game is created you can store an object similar to clients. The key would be the game's id and it could contain the timeout id that you are creating so that you can access it when it needs to be terminated. This way you have 1 timeout for each game as such you are not sharing state with all the games. The updateGame function could get the game id as an argument instead of looping all games. Although that would spawn a lot of timeouts based on how many games will be created and most probably will affect performance. You can also research worker threads in nodejs which could also help with what you want to achieve.

[@motdde]

I am here is 2022 where I started using TypeScript. JS is a pain in the bum with types.

[@mesutcemilaslan]

you can keep open devtools

[@alexhall840]

Made me laugh about 10 times in this video

[@Balaji_Devadoss]

sorry my bad.. used const webSocket = require("websocket").createserver; instead of const webSocket = require("websocket").server; issue resolved

[@DelPieroJoga10]

well, without technics for multiplayers games, It will never been a real multiplayer game, try to put on the cloud and really play with a ping at least 100ms, it will be very bad the player experience.

[@fuzuligulmammadli7884]

I also made a multiplayer game on node.js using socket.io. Those who want to try it out can do so at battletanks.io

[@jackmiddleton2080]

Any advice on what resources helped you the most? Quite impressive.

[@fuzuligulmammadli7884]

@@jackmiddleton2080 Thanks for checking it out :) I commented with links to sources that i used. But i guess it is not allowed as my comment was deleted. Main sources that i used for understanding networking were valve multiplayer networking blog. Another one was the blog from developers of kazap game. And another important thing is to look for is clock synchronization.

[@jackmiddleton2080]

@@fuzuligulmammadli7884 I connected to your game with two computers and I see there is some lag. The server is probably not near me as latency is not super optimal but I think the problem is not the latency (maybe it is?). Do you know what the issue is? Just a lot of data to transfer maybe? I setup my broadcasting on a website and there is low lag but the data I am sending is probably very small because it is just an object with two properties for x and y coordinates.

[@fuzuligulmammadli7884]

@@jackmiddleton2080 I host my server in germany so it can be because of the distance depending on where you are. Are you also making a multiplayer game?

[@jackmiddleton2080]

​@@fuzuligulmammadli7884 Yeah, that is my plan. Going to start with something small, simple, and complete. And then make something I am more passionate about after that. West United States here.

[@unknown-bx8my]

Stringifyyyyy😂😂😂😂

[@sanskaarpatni9137]

Do you have the balls?-Let's find out !

[@ominoverde5602]

pliz smoke less

[@hariharan-parthiban]

...

[@ppinteger5559]

how can I reach you. Can you write a Node & Socket.io game like I want..? i will give you your money

[@lotharioareski5041]

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 :/?

[@hnasr]

Lothario Areski thanks Lothario! Hmm did you try debugging to find out why? Which part of the video?

[@lotharioareski5041]

@@hnasr thanks for the speedy reply :) I'm at the 1h mark, just at the end of "create game code". I just copied your code form git and it works perfectly, I'm gonna compare with mine more carefully to see whats wrong.

[@lotharioareski5041]

Okey I got it working. Still don´t know what the exact problem is, but at some point I changed my root folder name after having started the project (unauthorized JSON name space) and I guess this caused the issue. I just copied my code into new folder and files and it works :)

[@maheshmahadar4780]

in my website i cant use socket.oi multiple pages. is it valid or not i am doing ?