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

Josh tried coding November 14, 2022
Video Thumbnail
Josh tried coding Logo

Josh tried coding

View Channel

About

Hi. I'm Josh and my goal is to have fun creating stuff and sharing that here on youtube. It's nice to have you here!

Video Description

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. Repo for this tutorial: https://github.com/joschan21/canvas-websockets 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. :^)

You May Also Like

Boost Your Coding Setup

AI-recommended products based on this video

Loading...
tomtoc 360° Protective Laptop Sleeve for 15-inch MacBook Air M4/A3241 2025, M3/A3114 2024, M2/A2941 2023, 15-inch MacBook Pro A1990 A1707, Dell XPS 15 Plus Laptop, Water-Resistant Computer Case Bag Global Recycled Standard

tomtoc 360° Protective Laptop Sleeve for 15-inch MacBook Air M4/A3241 2025, M3/A3114 2024, M2/A2941 2023, 15-inch MacBook Pro A1990 A1707, Dell XPS 15 Plus Laptop, Water-Resistant Computer Case Bag Global Recycled Standard

(12,968)
$39.55
FREE delivery Tue, Jun 17
Loading...
tomtoc 360° Protective Laptop Sleeve for 13-inch New MacBook Air M4/A3240 2025, M3/A3113, M2/A2681 M1/A2337 A2179 A1932, 13-inch MacBook Pro M2/A2686 M1/A2338, Water-Resistant Computer Case Bag Global Recycled Standard

tomtoc 360° Protective Laptop Sleeve for 13-inch New MacBook Air M4/A3240 2025, M3/A3113, M2/A2681 M1/A2337 A2179 A1932, 13-inch MacBook Pro M2/A2686 M1/A2338, Water-Resistant Computer Case Bag Global Recycled Standard

(12,952)
$36.07
PrimeFREE delivery Sat, Jun 14
100+ bought in past month
Loading...
Laptop Sleeve Case 11–14 Inch MacBook Air MacBook Pro Surface Laptop Dell XPS 13 HP Envy Pavilion Lenovo Yoga Slim IdeaPad Acer Swift Chromebook Samsung Galaxy Book Shockproof Leather Bag Colour Blue

Laptop Sleeve Case 11–14 Inch MacBook Air MacBook Pro Surface Laptop Dell XPS 13 HP Envy Pavilion Lenovo Yoga Slim IdeaPad Acer Swift Chromebook Samsung Galaxy Book Shockproof Leather Bag Colour Blue

(98)
$81.45
Loading...
Gumdrop ProTech Case for Dell New XPS 13 Plus 9320 Laptop- Slim Lightweight Case with Energy Displacement Protection, Non-Skid Rubber Feet and Frosted Exterior for Bumps and Drops (Black)

Gumdrop ProTech Case for Dell New XPS 13 Plus 9320 Laptop- Slim Lightweight Case with Energy Displacement Protection, Non-Skid Rubber Feet and Frosted Exterior for Bumps and Drops (Black)

(49)
$109.43$108.34
FREE delivery Aug 11 - 13
Loading...
65W 45W USB C Laptop Charger Compatible with Dell Latitude 5420 5430 5520 5530 7340 7430 Inspiron 14 16 XPS 13 Chromebook 3100 Dell Computer Type C Fast Charging AC Adapter Power Cord

65W 45W USB C Laptop Charger Compatible with Dell Latitude 5420 5430 5520 5530 7340 7430 Inspiron 14 16 XPS 13 Chromebook 3100 Dell Computer Type C Fast Charging AC Adapter Power Cord

(7)
$19.99
FREE delivery Sun, Aug 24 on your first order
Loading...
45W 65W AC Adapter Laptop Charger for Dell Inspiron 15 14 13 17 3000 5000 7000 Series 5558 5559 Charger Latitude E6440 E6430 3520 3420 XPS 13 14 9333 9350 Notebook Dell Computer Power Supply Cord

45W 65W AC Adapter Laptop Charger for Dell Inspiron 15 14 13 17 3000 5000 7000 Series 5558 5559 Charger Latitude E6440 E6430 3520 3420 XPS 13 14 9333 9350 Notebook Dell Computer Power Supply Cord

(52)
$13.99
FREE delivery Sun, Aug 24 on your first order
100+ bought in past month
Loading...
Logitech G203 Wired Gaming Mouse, 8,000 DPI, Rainbow Optical Effect LIGHTSYNC RGB, 6 Programmable Buttons, On-Board Memory, Screen Mapping, PC/Mac Computer and Laptop Compatible - Black
Best Seller

Logitech G203 Wired Gaming Mouse, 8,000 DPI, Rainbow Optical Effect LIGHTSYNC RGB, 6 Programmable Buttons, On-Board Memory, Screen Mapping, PC/Mac Computer and Laptop Compatible - Black

(17,871)
$27.98$22.38
FREE delivery Tue, Oct 14 on your first order
500+ bought in past month
Loading...
Logitech G305 LIGHTSPEED Wireless Gaming Mouse, Hero 12K Sensor, 12,000 DPI, Lightweight, 6 Programmable Buttons, 250h Battery Life, On-Board Memory, PC/Mac - Black

Logitech G305 LIGHTSPEED Wireless Gaming Mouse, Hero 12K Sensor, 12,000 DPI, Lightweight, 6 Programmable Buttons, 250h Battery Life, On-Board Memory, PC/Mac - Black

(21,223)
$44.98
FREE delivery Tue, Oct 14
1K+ bought in past month
Loading...
Apple 2025 MacBook Air 13-inch Laptop with M4 chip: Built for Apple Intelligence, 16GB Unified Memory, 256GB SSD Storage, Touch ID; Sky Blue - English Keyboard

Apple 2025 MacBook Air 13-inch Laptop with M4 chip: Built for Apple Intelligence, 16GB Unified Memory, 256GB SSD Storage, Touch ID; Sky Blue - English Keyboard

(687)
$1,249.99
PrimeFREE delivery Sat, Jun 14
100+ bought in past month
Loading...
NEEWER Advanced 18 inch LED Ring Light for Phone, LCD Touch Screen, 2.4G Remote Lights Control, 3200-5600K, Tripod Light for iPhone Action Camera, for Studio Makeup TikTok YouTube Video Salon (Black)

NEEWER Advanced 18 inch LED Ring Light for Phone, LCD Touch Screen, 2.4G Remote Lights Control, 3200-5600K, Tripod Light for iPhone Action Camera, for Studio Makeup TikTok YouTube Video Salon (Black)

(2,807)
$181.49
FREE delivery Sun, Aug 10
Loading...
3 in 1 Charging Station for iPhone, Wireless Charger for iPhone 16 15 14 13 12 11 X Pro Max & Apple Watch - Charging Stand Dock for AirPods Global Recycled Standard

3 in 1 Charging Station for iPhone, Wireless Charger for iPhone 16 15 14 13 12 11 X Pro Max & Apple Watch - Charging Stand Dock for AirPods Global Recycled Standard

(30,415)
$30.39
Prime
1K+ bought in past month
Loading...
3 in 1 Charging Station for iPhone, Wireless Charger for iPhone 16 15 14 13 12 11 X Pro Max & Apple Watch - Charging Stand Dock for AirPods (Blue) Global Recycled Standard

3 in 1 Charging Station for iPhone, Wireless Charger for iPhone 16 15 14 13 12 11 X Pro Max & Apple Watch - Charging Stand Dock for AirPods (Blue) Global Recycled Standard

(27,328)
$39.99
PrimeFREE delivery Sat, Jun 14
100+ bought in past month
Loading...
Wireless Charger for Samsung - NANAMI 3 in 1 Charging Station for Multiple Devices,Fast Charger Stand Dock for Galaxy S25 S24 S23 Ultra S22 S21 S20 Z Flip Fold,Galaxy Watch 5/5 Pro/4/3,Galaxy Buds Pro

Wireless Charger for Samsung - NANAMI 3 in 1 Charging Station for Multiple Devices,Fast Charger Stand Dock for Galaxy S25 S24 S23 Ultra S22 S21 S20 Z Flip Fold,Galaxy Watch 5/5 Pro/4/3,Galaxy Buds Pro

(2,272)
$43.99
PrimeFREE delivery Sat, Jun 14
200+ bought in past month
Loading...
Magnetic Wireless Charger for iPhone: Fodable 3 in 1 Charging Station for Multiple Apple Devices - Travel Charging Pad Dock for Apple Watch iPhone 16 15 14 13 12 Pro Max Plus & Airpod Global Recycled Standard

Magnetic Wireless Charger for iPhone: Fodable 3 in 1 Charging Station for Multiple Apple Devices - Travel Charging Pad Dock for Apple Watch iPhone 16 15 14 13 12 Pro Max Plus & Airpod Global Recycled Standard

(656)
$49.99
PrimeFREE delivery Sat, Jun 14
100+ bought in past month
Loading...
Apple AirPods Pro 2 Wireless Earbuds, Bluetooth Headphones, Active Noise Cancellation, Transparency, Personalized Spatial Audio, High-Fidelity Sound, H2 Chip, USB-C Charging

Apple AirPods Pro 2 Wireless Earbuds, Bluetooth Headphones, Active Noise Cancellation, Transparency, Personalized Spatial Audio, High-Fidelity Sound, H2 Chip, USB-C Charging

(26,678)
$259.99$194.99
FREE delivery Wed, Aug 20
5K+ bought in past month
Loading...
3 in 1 Charging Station for iPhone, Wireless Charger for iPhone 16 15 14 13 12 11 X Pro Max & Apple Watch - Charging Stand Dock for AirPods Global Recycled Standard

3 in 1 Charging Station for iPhone, Wireless Charger for iPhone 16 15 14 13 12 11 X Pro Max & Apple Watch - Charging Stand Dock for AirPods Global Recycled Standard

(30,415)
$30.39
Prime
1K+ bought in past month
Loading...
3 in 1 Charging Station for iPhone, Wireless Charger for iPhone 16 15 14 13 12 11 X Pro Max & Apple Watch - Charging Stand Dock for AirPods (Blue) Global Recycled Standard

3 in 1 Charging Station for iPhone, Wireless Charger for iPhone 16 15 14 13 12 11 X Pro Max & Apple Watch - Charging Stand Dock for AirPods (Blue) Global Recycled Standard

(27,328)
$39.99
PrimeFREE delivery Sat, Jun 14
100+ bought in past month
Loading...
Wireless Charger for iPhone- 3 in 1 Charging Station for iPhone 16/15/14/13/12/Pro Max/Pro/Mini/Plus, Apple Watch 10/9/8/7/SE/6/5/4/3/2/1/Ultra2/Ultra, AirPods pro/2/3/4

Wireless Charger for iPhone- 3 in 1 Charging Station for iPhone 16/15/14/13/12/Pro Max/Pro/Mini/Plus, Apple Watch 10/9/8/7/SE/6/5/4/3/2/1/Ultra2/Ultra, AirPods pro/2/3/4

(27)
$27.99
FREE delivery Sat, Jun 14 on your first order
Loading...
NA to Clamp, Quick Release NA to Rail Lock Clamp with 1/4in 3/8in Thread, Standard NA to Clamp Adapter for Camera Cage Friction Arm Ball Head Cold Shoe Microphone Monitor

NA to Clamp, Quick Release NA to Rail Lock Clamp with 1/4in 3/8in Thread, Standard NA to Clamp Adapter for Camera Cage Friction Arm Ball Head Cold Shoe Microphone Monitor

(0)
$12.69
FREE delivery Jun 27 - Jul 10