19 - WebSocket + React + Hook, reconnect, cleanup, часть 2 / React JS - Путь Самурая 2.0

it-incubator.i... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Продолжаем изучать WebSocket и внедрять его в React-приложение. То что мы сделали в прошлом выпуске по WebSocket - хорошее начало. Но давайте будем помнить про то, что мир нестабилен и всё в нём несовершенно)) WebSocket тоже) Канал наш может оборваться. И ... Сам он не восстановится. Нужно следить за этим.
Второе, это утечка памяти. Сущность WebSocket мы при реконнектах (или при реиницилизации при возврате на страницу) мы пересоздаём, но с прошлой сущностью связано много личного: наши обработчики, добавленные через addEventListener - это самое страшное. Нужно не забывать делать removeEventListener по окончанию работы с WebSocket
Будет круто! Летим!
Мы красавчики, друзья! Мы - самураи! Летим в космос, братья и сестры!
Поддержать проект монеткой: social-network...
Платное обучение в онлайн или оффлайн инкубаторе:
it-incubator.eu
it-kamasutra.com
А здесь бесплатная взаимопомощь:
t.me/reactjs_s...
* Мы в соц. сетях:
itkamas...
/ itkamasutra
telegram.me/it...
* Мои личные VK и Insta:
d.kuzyu...
/ it.kamasutr. .
#webSocket #react #chat #практика #примеры #уроки #курс

[@user-gr7bm5ll5w]

Очень насыщенный выпуск. Подождите, какая архитектура, мы еще тут кучу всего с websocket не сделали, и так минут на 30 взрыва мозга :) Очень мотивирует твоя подача, спасибо огромное!

[@kek_pupold]

Бывают же такие совпадения, я сегодня вернулся в React после трёх месячного перерыва и тут твой видос.

[@vsvil]

Наткнулся на этот видос случайно смотря ещё первый путь самурая Это интро божественное))

[@ITKAMASUTRA]

😊 Спасибо 🤝

[@artyomstepanyan1123]

Блин я кайфую от твоей подачи матеряла !!

[@melloone8862]

Здарова, Димыч! Недавно оставлял уже комментарий, но хотел ещё сказать искреннее большое спасибо, за твой труд, обучающие видео. Благодаря им я хорошо прокачал свой скилл в react и js в целом. Я устроился на работу и завтра уже мой первый рабочий день :)) Ещё раз Спасибо! Успехов тебе!

[@ITKAMASUTRA]

Офигенно!!! Удачи тебе ✊👍

[@kostyakozlov5289]

Как дела? Освоился?

[@melloone8862]

@@kostyakozlov5289 дела нормально, теперь понимаю что к чему и как работает, по началу было сложно очень сложно

[@kostyakozlov5289]

Здорово. У меня все это впереди! Можешь дать совет какой нибудь, если есть время

[@melloone8862]

​@@kostyakozlov5289 ничего нового не скажу, но когда то пропустил мимо ушей, !! Спрашивай у своего старшого, если что то непонятно, но не слишком часто.хех. Ну и не забывай про софт скиллы - очень важно. Старайся и твои старания оценят. удачи!

[@user-ly5ez5ln7y]

братан, сегодня с утра пилетела таска по вебсокету и у тебя видос виходит) лучший!

[@ITKAMASUTRA]

В проекте скорее всего использоваться будет что-то типа socket.io На канале позже будет инфа по нему

[@user-vd2xq1lx9x]

WebSocket + React + Hook, reconnect, cleanup

[@user-qv8xg3qq7j]

Ещё не успела посмотреть видео, ставлю лайк. А вообще, это лучший курс по реакту, который я видела. Спасибо огромное ❤️

[@user-dn4ry3uw8i]

спасибо за прекрасные уроки WebSocket, React, Hook, reconnect. Жаль, что так мало лайков. Очень насыщенный и полезный урок

[@user-md9bk2fu9v]

Просто Сенсей!!!)

[@user-ey6em3my8p]

Приятный бонус для спонсоров! :) Получай видео раньше всех! Мелочь, а приятно :)

[@ITKAMASUTRA]

спасибо, Лена, за поддержку

[@TheMalekula]

Димыч бог JS! WebSocket, React ,Hook, reconnect, cleanup

[@user-md9bk2fu9v]

Ты классно передаешь инфу, АЖ ТОЖЕ хочется понимать что там с кодом происходит!)) просто заглянул в будущие видео и увидел, Что ты классно и увлекательно учишь!))👍

[@lel2327]

КЛёвый выпуск! WebSocket + React + Hook, reconnect, cleanup!!!!

[@aleksandrglebik8033]

Спасибо, Димыч!) WebSocket + React + Hook, reconnect, cleanup,

[@melloone8862]

спасибо за видео :)) очень доходчиво объясняешь

[@maxim.saharov]

Димыч ставлю тебе много лайков - урок пушка!

[@spacerider9426]

WebSocket, React, Hook, Reconnect, cleanup. Спасибо, Сэнсэй, за твой огромный труд! Летим Дальше!

[@maxim.saharov]

33:55 Димыч оно постоянно так глючно работает! - то работает то нет) и потом если минуту примерно просто посидеть и подождать то вебсокет наверно просыпается и как бы начинает сразу отдавать сообщения с сервера

[@user-qy9vq5jo4c]

Отличный выпуск)) Димыч, ты просто красава))) Спасибо))

[@ruslankahramanov4664]

прошел первый курс, отлично все объясняешь, все доступно и понятно. Спасибо большое. Побольше сил тебе, чтобы завершить курс

[@belle-nastja]

Безумно крутой выпуск, спасибо ! по началу показался невыполнимым, но все получилось , WebSocket reconnect, cleanup - летим дальше!)))

[@mykhailostepanishchev6472]

Очень интересно,благодарю.WebSocket + React + Hook, reconnect, cleanup

[@aleksandercross5936]

Я еще первый курс прохожу а тут 2й выходит. Удачи. Буду догонять)

[@ITKAMASUTRA]

тише едешь - дальше будешь! Вперёд!

[@aleksandercross5936]

@@ITKAMASUTRA =)

[@vourlake1780]

+

[@kuko932]

WebSocket + React + Hook, reconnect, cleanup, часть 2 / React JS - Путь Самурая 2.0 лучшее видео по вебсокет!!!!

[@uzver3787]

Пошла жара)) Какая архитектура?Заходим на второй круг вкуривать)) В одной руке держу провод от модема и жду что произойдёт) WebSocket, React ,Hook, reconnect, cleanup

[@user-hz7ix3hf1r]

WebSocket , React, Hook, reconnect, cleanup

[@user-je1el3gj9d]

Просто красавчик, как всегда копаешь в глубь, очень жду продолжения

[@user-wr3dz2op1t]

WebSocket + React + Hook, reconnect, cleanup, часть 2 / React JS - Путь Самурая 2.0

[@Abdul-hy4cy]

Летим летим !!

[@user-vj8hj9jk2b]

Урок хороший, хоть и не сразу все заходит. С cleanUp функцией для useEffect-а все понятно - надо для предотвращения утечек памяти memory leaks удалять все листенеры на канал. И тут сразу вопрос - он связан с примером функции реконнекта со stackOverflow - в нем используется подход не через addEventListener - а через ws.onclose, ws.onopen, ws.onmessage, ws.onerror - при данном подходе возможны утечки памяти? Т.е. если их нет - то и cleanUp функции для всех листенеров писать не надо. А это довольно существенно, да и выглядит попроще.

[@davitgasparyan3331]

Like

[@vourlake1780]

+

[@rrain]

10:25 useLayoutEffect можно, правда дальше по видео всё равно придётся его заменить)

[@user-wj3rv9gj2v]

Спасибо, Дмитрий!

[@user-ei5zp2qi4j]

Спасибо за выпуск

[@ruslanla4654]

Как всегда на высоте ! Спасибо Димыч

[@ITKAMASUTRA]

спасибо за реактивный коммент )) летим-летим

[@ruslanla4654]

@@ITKAMASUTRA твои курс как наркотик - как только всплывашка из ютуба приходит сразу включаю тебя )) поэтому и реактивно так

[@user-wd3tl2rx9p]

Димыч, спасибо)

[@romanjob8152]

WebSocket + React + Hook Дякую.

[@aleksandryudaiev9673]

Димыч спасибо. Когда будет следующий выпуск? Уже заждался. Еще раз спасибо. WebSocket сокеты рулят. Го го го

[@user-pc9bl7uf1l]

огонь! как всегда!!!!!!!!!!!!!!

[@sivkaburka1062]

Доделал до конца

[@vourlake1780]

Дизейбл. Новое слово услышал). Лайк итс ол. Лайф Гуд

[@aleksprimetv]

Спасибо за видос, когда будет продолжение? Как раз по проекту вебсокеты нужны)

[@vourlake1780]

+

[@ITKAMASUTRA]

Во вторник!

[@znatniy-pekar]

@@ITKAMASUTRA мне кажется или вторник уже прошел

[@SerhiiNesterov]

Спасибо огромное

[@user-pc9bl7uf1l]

React JS - Путь Самурая 2.0

[@vladyslavkravchenko5955]

Спасибо!)

[@ssurrokk]

агонь ваще 🔥

[@Al4ii]

Кайфы!! Спасибо!

[@user-yx7in9nl1d]

19 - WebSocket + React + Hook, reconnect, cleanup, часть 2 / React JS - Путь Самурая 2.0

[@alexandrchazov6185]

WebSocket + React + Hook, reconnect, cleanup React JS - Путь Самурая 2.0

[@militant6709]

По моему ты обещал к концу года 100 видосов сделать🤣

[@ITKAMASUTRA]

Короновирус и террор в РБ помешали планам

[@user-kc3cv8ex2n]

Димыч, только оператор ? (optional chainig) никак не связан с Typescript'ом, он поддерживается непосредственно Javascript'ом

[@user-vs7ek1sv5g]

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

[@skv1991]

Дружище, молодец, как всегда, давно не было времени на видосы, тут увидел и обрадовался 😉 Скажи пожалуйста, а почему многие пишут в курсах такие вещи вроде создания анонимной функции в пропсе компонента (атрибуте), например onClick={(e) => {....}} или такое: styles={{fontSize: `${fSize}px`}} То есть при каждом ререндере родителя будут создаваться новые экземпляры объектов и функций, которые приводят к ререндеру самих компонентов. Ведь можно выносить такие конструкции в useCallback, useMemo и будет возвращена ссылка на существующую функцию/объект, а сам компонент обернуть в React.memo. Или всем пофиг на производительность?) В простых приложениях это может не так важно, а вот в средних и больших ощутимо :) Так же не нашел, как типизировать пропсы с ref'ом, или компонент, обернутый в forwardRef, не знаешь как это сделать? Очень нравится твой позитивный настрой 😉

[@ITKAMASUTRA]

useCallback и React.memo лучше чаще юзать, чем нет! В учебных проектах много чего не показывают :( По forwardRef... позже коснёмся этого! Но по типизации: нет самоцели типизировать всё на свете! Можно и где-то any оставить и пофигу

[@skv1991]

@@ITKAMASUTRA спасибо Димыч! Да, согласен, иногда приходится ставить any т.к. либо отсутствует документация касательно нужного примера, либо тормозит процесс разработки. Я думаю, что стоит типизировать интерфейсы внешние (пропсы компонентов, аргументы функций), возвращаемые значения, структуру некоторых объектов :)

[@skv1991]

@@ITKAMASUTRA у тебя было, что приходилось с TS сражаться?))) ну то есть когда типы описал, а потом мучаешься с пониманием того, что именно компилятору не нравится)) я не так давно с ts, пока ещё иногда туплю)

[@istoric7221]

WebSocket

[@vourlake1780]

Сокет

[@user-mk1or2yc4f]

Спасибо за видео, очень познавательно!!! Такой вопрос, почему у меня событие "close" срабатывает только через минуту после того как я выключаю интернет? Браузер Chrome

[@alexandrmerser8443]

Димыч, когда видос про event loop будет?) Помню, что обещал)

[@Abdul-hy4cy]

У меня порт socket'а вообще не закрываается! Он даже при выключенном интернете успешно отправляет данные из формы и когда включаешь интернет обратно, берет и подгружает их. Я очень удивлен. Лишь 1 раз удалось попасть в кейс с прерыванием соединения.

[@user-uz8qg6hf8p]

а код-то где на гите?

[@StepanVorobiov]

Классное видео, спасибо! У меня гипотеза есть что то что мы тут понаписали в cleanup юзЭфекте (где onclose), будет работать не так как надо. useEffect то у нас выполняется один раз и отписка будет регаться один раз (в первый раз), а потом уже подписки происходят внутри рекурсии и получается что cleanup заново отписку не прописывает. Или я ошибаюсь и что то не то у себя понакодил?! пс: на правильный автоскрол яб тоже посмотрел!

[@StepanVorobiov]

@Anon ymous вы можете попробовать продебажить. Отписка у него за счёт отписчиков выше, а в юзЭффект в отписку код заходит только раз (вроде. Уже шибко не помню, а сейчас код не перед глазами)

[@ruslanla4654]

React websocket reconnect

[@ITKAMASUTRA]

спасибо за комменты

[@loshasha90]

а разве интервал не надо очистить? он же так и продолжает срабатывать

[@MaxKievSky]

Димыч, как быть уверенным что каято бесконечная хрень запросов с фронта не съест все деньги например с AWS или другого хоста? просто чтоб не пришел счет на 20килобаксов изза того что ты смайлики не так вставил...

[@MaxKievSky]

@Anon ymous та это ж полная хрень выйдет, я слышал надо тестов побольше делать. тогда все норм будет

[@swipeshark5311]

Дружище, будет видео по тому, как заливать подобные сайты с сокетами на хостинг?

[@skv1991]

На shared хостинге обычно нет поддержки вебсокетов. Либо vds брать и поднимать node.js с либой socket.io, либо comet server на php, как вариант - heroku, там что-то было бесплатное 😃 Пусть знающие поправят) мы на работе на проекте с php+apache+postgresql поднимали вебсокеты для чтения "выхлопа" из программы, там реализация была такая, что использовался comet server на php, и он слушал кажется по tcp порт на соединения и сообщения 😅

[@ITKAMASUTRA]

Ну фронт как заливали, так можно и заливать. А по беку... запишу миникурсик весной! Покажу ✊

[@n0escape]

после отключения инета - не срабатывает консоль лог

[@n0escape]

ютуб удаляет комменты

[@theempire392]

у меня тоже не срабатывает. решил как-то эту проблему?

[@n0escape]

@@theempire392 пока нет, предполагаю, что не срабатывет тригер на отключение после выключения инета Сделал костыль через отслеживание инет подключения

[@rodrigosan1952]

1000 доллар - это дорого для казахстана

[@maxim.saharov]

Я так же прикрутил спинер - тоесть сделал неактивную кнопку пока реконект идет что даст то - что не будут теряться сообщения - как это сейчас у Димыча в момент реконекта. И сделал отправку сообщений и по нажатие кнопок Ctrl + Enter. Если кому то интересно решение - прошу в мой гит репо - maxim-saharov

[@maxim.saharov]

ReactKamasutra назв. Проекта

[@maxim.saharov]

Буду очень рад за поставленные звездочки в нем и приятного обучения самураям)

[@user-ih6ie9ve6d]

WebSocket + React + Hook, reconnect, cleanup

[@user-pc9bl7uf1l]

WebSocket + React + Hook, reconnect, cleanup