Adding Multiplayer to our Drawing App with WebSockets and NextJS 13!

Let's add a multiplayer mode to our coolest drawing app from last video! We'll use NextJS 13, React, TailwindCSS, Typescript and WebSockets. Even if you're a beginner in any of those, don't worry, this project is totally beginner's friendly and I take time to explain all the important steps.

I wish you a lot of fun implementing this knowledge into your own projects! If you've got ideas on how to improve this project, I'm always happy to hear them. :^)

[judasjefferson]

Your videos are incredible. Great explanations. Love the humor and lack of a filter.

[igorbudimir]

Man, really glad to see how your speaking and energy is so much better in only 9 months! Good job brother :)

[thomasp]

So glad I discovered your channel. I just started learning NextJS 13 and Typescript and had a really hard time finding some nice, beginner friendly tutorials which were not deprecated.
Thanks a lot and keep it up :)
Î would, just like Ibrahim mentioned 2 months ago, also love to see a tutorial using web sockets and prisma. The live todo-list example sounds nice. I was thinking about something like Google Sheets or the shared documents in Microsoft Teams, etc.

[namesarefools]

hi Josh, websocket tutorial is a very scarce and thanks for making these. I do appreciate more if you could make something with websocket + database interaction.
simple example is live todo-list

[codewithguillaume]

I love the idea on interacting with multiple canvases :)

[agonyzx]

Hello Josh, thank you for that awesome tutorial! I was wondering how I could make it work if the two clients have a different canvas size (although they have the same aspect ratio). Currently my problem is that if one of the clients has a smaller screen and therefore smaller canvas size, the coordinates aren't right and that messes up the display/drawing. I tried adjusting the coordinates via the canvas size but to no luck currently.

Would be cool if you had an idea how to make that application responsive :)

Thank you!

[GREENDAYROKS]

For anyone trying to do 'npm run server' and getting errors, you need to change the package.json sever script to: "server": "node --loader ts-node/esm your-server-name.ts"

[mainakmukhrjee]

could you pls explain why did u use canvas Ref to trigger the useEffect to update the draewing like since different instances of the code is running, if the active drawing board's canvasRef is changing why the other one (inactive) will change and how will it trigger the useEffect for that instance and refresh the drawing? I though you would use socket as athe dependency array. Pls explain

[depSol-DE]

Respekt, dass du immer noch Powershell in VSCode nutzt 😂❤

[bumang]

I cloned its repo and started. it works but, I can't see anything in Network/WS 19:26
maybe something deprecated makes runtime err so that there's nothing Network tab

[sleep-research]

First of all thank you for your teaching. How can I make a responsive canvas?

[SuperMarksman]

How would you go about deploying this project Josh? Its a cool one to have as personal projects for CV to show off the websocket stuff. Thanks for the cool tutorial!

[jacobdiehl]

I'm pretty new to next js and vercel. If I connect to an external server from an app hosted on vercel will I be able to still establish web sockets?

[BrigitaHit]

Hi Josh, great tutorial, thank you! Just a question, using next.js integrated server, where should I place web sockets? Would it be pages/api directory?

[sumitmishra-cyuz]

At 28:31 line number 34 showd a error
Expected one argument got zero

[yogeshr]

Nice tutorial. One question: Why not use NextJS as backend as well. Why use a separate ExpressJS server ?

[alexandrepereira]

Great content. Would it be better to connect/disconnect to the iOS server in the useEffect? Any tips on how to ensure type safety between the client and the server?

[abubow]

Now add an accounts, AI that guesses what it is, save progress, undo, eraser, bucket and save as

[tyiuzvd]

please, need a next websocket connection with laravel.