Websockets React & Node js ПОЛНЫЙ КУРС PAINT ONLINE & Canvas

В этом курсе мы разработаем полноценное, очень объемное fullstack приложение на react и nodejs. Поработаем с canvas и websocket. Видео получилось очень насыщенное, рекомендую к просмотру!

Макет в figma -

Исходный код урока -

Таймкоды:
00:00 - План на урок
01:13 - Cтруктура приложения
10:50 - Учимся рисовать кистью и фигуры на канвасе
24:30 - Настройка инструментов: цвет, толщина линии
29:15 - Отмена(undo) и возврат(redo) последнего действия
33:50 - Серверная часть приложения
36:00 - Начало работы с веб сокетами
43:00 - Создание уникальных ссылок для сессии на клиенте
45:00 - Подключение к сессии по веб сокету с клиента
51:15 - Логика совместного рисования на одном холсте
64:10 - Синхронизация рисунков по http

Поддержать меня и мой канал вы можете по ссылкам ниже.

[sergeybure]

Тимур, класс, спасибо!!!
Заметки для тех, кто набирает код по видео:

25:03 В файле tool.js в set strokeColor(color)
вместо:this.ctx.strokeColor = color
используйте: this.ctx.strokeStyle = color
В исходниках Тимура этот код исправлен.


43:21 Создание ссылок
Switch, Redirect упразднены в react-router-dom
Надо использовать: Routes вместо Switch, Navigate вместо Redirect
Поэтому блок Switch переписывается так:
<Routes>
<Route path='/:id' />
<Route path='/' to={`/f${(+new Date()).toString(16)}`} replace/></>} />
</Routes>


1:10:55 В Canvas.jsx в useEffect(() => {
добавьте перед axios.get:
уберите this. перед: ctx.clearRect( и ctx.drawImage(
В исходниках Тимура этот код исправлен.

[kirillshapovalov]

В одном часовом видео и научился и работе с графикой, и веб сокетам, и mobx. Да еще и все это на живом примере. Все ясно, понятно и без воды. Огромное спасибо за труды! Успехов тебе!

[LittleDragonborn]

Автор, спасибо тебе большое за твой титанический труд. Сделала для мамы конструктор грядок на реакт - там можно рисовать прямоугольнички, подписывать их, перемещать по полю и сохранять, что получилось. Без библиотек не обошлось, но благодаря тебе удалось заставить всё это работать и вообще понять, что происходит.

[jsmonstr]

Бомбический урок, столько информации за час, продолжай!

[melloone]

Мужик! Это просто взрыв мозга, супер годнота! Спасибо!

[ovircorp]

Очень качественный контент. Недавно начал знакомиться с js, до этого работал на c#. И твои уроки заходят очень хорошо. Я бы даже сказал, что твоя подача материала топ!)

[devorer]

Спасибо за твой титанический труд! Отличное видео.

[arlenm]

Огонь! как ты всего за час такой проект замутил, у меня целый день ушел на усвоение. Спасибо за урок

[namesurname-ssvx]

Огонь ! Спасибо, очень круто! Повторил, допилю дизайн и синхронизацию обязательно, очень понравилось, осознал canvas и веб Websocket. С каждым твоим уроком становлюсь увереннее, твердое ощущенияе, укрепления знаний в прогромированнии. Еще раз огромное спасибо за твои труды!

[Max-krie]

Наконец досмотрел и доделал приложение до твоего состояния. Хорошая работа. Работал с канвасом и вэбсокетами но и то и то вместе еще не делал. А вот помню когда я решил ознакомиться с вэбсокетами на примере мультиплеерного тетриса, после всего 3х месяцев изучения вэба с нуля. Это было больно. но интересно.

[ДмитрийСтрахов-ех]

Очень полезное видео, такого рода информации крайне мало, обычно льют много воды, а тут всё плотно и по делу!

[DrGurgen]

У тебя просто сумасшедший темп по выпусканию годного контента Тимур. Надеюсь ты участвуешь в каком нибудь чемпионате и выиграешь)))

[vladsamsonov]

Тимур, спасибо за такой редкий, бесплатный, качественный контент💪🏻

[anatoliyname]

Тимур, спасибо тебе за труды! Очень крутые уроки!

[evgeniiAn]

зашел - лайк поставил авансом, даже не сомневаюсь, что оправдано)

[feliche-demiannetliukh]

Афигеть, только начал учить pubsub, и здесь ты уже видео имеешь по Websocket-ам)
Как всегда 🔥

[igorfrecautan]

Видео крутое 👍 Будем ждать Фотошоп на React )))

[AndriiMoshenskyi]

Первый раз вижу видео без единого дизлайка. И не удивительно - за 1 час просто огромный обьем полезной информации. Очень круто и однозначно лайк и подписка, спасибо!

[АлексейЛоскутников-юр]

Спасибо за контент! Завтра будет повод открыть редактор кода!

[Sergey-lgke]

Тимур, дай Бог тебе здоровья. Оставляю коммент даже не видя еще самого урока. В качестве не сомваюсь. Надеюсь попозже и до него руки дойдут.