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

[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

[StarRoseAngelic]

The beginning of this video was 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!

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

[sirdudes]

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

[johnshaheen]

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

[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

[drewbrown]

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!

[saranavinash]

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

[connoredwards]

Damn your enthusiasm is infectious, I love it!

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.

[PossumMedic]

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

[scottsaccenti]

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

[KamalKhan-bclz]

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😊

[pvdrdeena]

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

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

[blakebruner]

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

[TheEpicPineapple]

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!

[mostinho]

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

[danuzonez]

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

[jackmiddleton]

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