#1: Разработка простого чата на ReactJS + NodeJS + Socket.IO (for Junior)

[@ИванСергеевич-и6и]

Спасибо огромное! Курс очень крутой. Нет ни чего лучше, чем учить программирование в бою, с ошибками, трудностями, а с твоими объяснениями по ходу урока вообще скилл летит. Ты отличный учитель, спасибо тебе.

[@hellopeople9959]

Никогда не оставлял комменты... Но чувак, ты крут, ты открыл мне все вопросы по сокетам в частности как сделать подключение по клику например кнопки !!! Спасибо!

[@biLLie_wiLLie]

Хороший урок. Про Map круто, узнал новое для себя.

[@AlexanderOsnovnoi]

Хехехехех. Объяснение работы websocket через трубу, которая соединяет двух людей и через которую они могут в реальном времени разговаривать - это конечно мощно.😃

[@delennn3663]

досмотрел до конца, ничего не лагало, все чётко

[@Вадим-н6п]

Как же я рад что я наткнулся на твой канал)

[@АлексейПетренко-о6ш]

Материал - отвал башки, автору - моё почтение!

[@olhahrymchak6497]

Просто талант, так понятно преподносить материал, огромное спасибо!

[@dmitriyk.2462]

С записью все нормально,досмотрел)

[@ArchakovBlog]

не, ты походу перематывал. подлагивает в некоторых местах :(

[@f0xeri]

@@ArchakovBlog со звуком в основном всё хорошо

[@VSsoviet]

@@ArchakovBlog да там чуть-чуть местами подлагивает, не критично, в целом все отлично, спасибо за труды твои, не отчаивайся

[@antipmen]

Большое спасибо за видео! Ничего не логало, запись отличная! С нетерпением жду следующий урок :)

[@GabrialWeb]

Спасибо большое, твои видео, сразу по полкам все в голове расставляют!

[@roxyjoestar7649]

Мужик, ты прямо гений, делаю похожий рабочий проект, сокеты one love

[@кекендосзапарусотен]

Максимально доступно, спасибо!

[@yycyka3957]

Материал и подача огонь!!!!

[@synthetify]

Очень хорошо объясняешь, спасибо

[@developmentwebru7448]

Объясняешь супер!

[@kirillshapovalov495]

спасибо за контент! успехов в продвижении канала!

[@evgeniyn1542]

Спасибо! Полезное видео. :)

[@returborttech2822]

Коротаю время смотря твои уроки в ожидании продолжения уроков по react-pizza. Спасибо за уроки!

[@sashahoncharenko1730]

лучший в мире за работой

[@bukanaka]

00:47 Ща мы что сделаем? 1:20 Для кого данный курс? 1:30 Рекомендации по установке микрофона. 8:55 Начало 11:00 А сейчас точно начало

[@profidev_js]

Поржал))

[@veirash2.016]

Спасибо за видео, очень помог в изучении)

[@ivankrupskyi8984]

Ты красавчик!

[@ДмитрийСергеевич-я6ъ8х]

Блин, ну ты хотя-бы изредко делай что-то такое, очень полезно!

[@techgregory5253]

Можете ссылку скинуть на гитхаб кто--нибудь? Хочу посмотреть на код, все видео просматривать нет возможности. Заранее спасибо

[@heyliaable]

Большое спасибо!

[@ДимаРапид-ф5ъ]

Было бы еще неплохо ссылку на репозиторий))

[@ВладимирЛутцев-р5ц]

Если вдруг кто-то смотрит, и мучается изза настроек CORS. Вот решение: const io = require('socket.io')(server, { cors: { origin: '*', methods: ["GET", "POST"], allowedHeaders: ["my-custom-header"], credentials: true } });

[@РоманШеремет-ъ8т]

у меня не работает такой вариант, все перепробовал уже что нашел в гугле, ничего не помогло и корс устанавливал и задавал ему адрес клиента-исключения((((

[@andrTaylor]

@@РоманШеремет-ъ8т а может ты просто перезапускать забывал?)) мог менять server.js файл а yarn server забыл пустить) Ну у меня кстати вроде робит вариант Владимира, спасибо ему конечно) А политика cors меняется постоянно, поэтому так у автора ролика и работает. И кстати установи nodemon и не парься на счёт забыл/не забыл перезапустить.

[@Изяха-и9и]

Спасибо\

[@boikovd]

воспользовался советом + установил плагин Allow CORS: Access-Control-Allow-Origin для хрома. ничего не понял но работает)

[@КириллКарацюба]

Мое почтение. На 2-й час гугл-серфинга уже проклинал это все, этот метод помог. Крепкого здоровья челу

[@СергейВоробьев-ж5й]

Спасибо за урок , давай ещё про React NodeJS Socket.IO!!!!!!!!!!!!!!!!!!!!!!!!!!

[@ярослав-ы1й4у]

Star Wars - это шедевр!

[@taras7844]

спасибо, очеь доспупно обяснил #Map #Experss #React #Node

[@anastasiiam5429]

Крутой ролик, Спасибо. Один вопрос. При подключении сервера и сокетов const server = require('http').Server(app) и const io = useSocket(server) немного непонятно как оно работает изнутри когда мы в useSocket закидываем server ? или наведите пожалуйста на мысль в какую сторону гуглить этот ответ Спасибо)

[@Khusrav-nt9pb]

Сделай чат как 1 чат который ты сделал на канале с функциональным реакт а не с классовым пожайлуста

[@джамалайлцуцаев-ъ6ю]

Спасибо

[@pavel2702]

Круто

[@АлексейЯковлев-с6ъ]

Привет, у тебя топ контент, продолжай! Сделай курс по js для junior или middle ни у кого такого не видел, было бы круто

[@mikaelgevorgyan4521]

Аааа ладно поменял сервер заработала=))

[@singlebw4065]

вненько подписался, но честно сказать не так часто твои видосы показываются. Вот есть на ютубе CodeDojo и может он и грамотен, но смотреть я его не могу. Меня аж передёргивает произношение JavaScript)) Я не думал что меня что-то может так раздражать. Кстате насчёт передачи app через http в класс Server... app.listen возвращает объект Server и на WebSocket передачи этого объекта хватает. Уж не смотрел есть и разница, но что-то мне подсказывает это одно и тоже и без лишних вызовов.

[@Nikitosss91]

29:34 25ый аниме кадр)))))))

[@William_clark]

Спасибо)

[@ahtimon3980]

А как тут дела с защитой данных?

[@АнтонЛарри]

Это получается фуллстак разработка?

[@andr1127]

Добрый день у меня 1:37:14 в консоли браузера пишет Access to XMLHttpRequest at 'localhost:9999/socket.io/?EIO=3&transport=polling&t=NEvcxmZ' from origin 'localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute. я понял как решить, но это изменит код, но почему на видосе такого нет? из за плагинов?

[@ДмитрийКолобов-ц3ж]

как ты решил эту проблему? устал гуглить

[@shramko-dev]

@@ДмитрийКолобов-ц3ж написал в коментариях как починить, вот гист на код gist.github.com/Shramkoweb/dc98f721a1a2e78072a5dc68d7e8e708

[@uzver3787]

афигенный урок! только запрос не идёт,cors блокирует

[@kostyafilimonov8289]

:))))

[@punchsocks]

я застопорился на подключении к реакту, писал точь в точь как у тебя, но он сначала начал выдавать за какой-то заголовок политики корс - исправил, потом не писал user connected, потом я привел все в исходную - post 404))) видимо мне не дано

[@H1roHamada]

По поводу инета, если подключать напрямую без модема, то очень сильная нагрузка идет при входящем/исходящем трафике. При входящем(что-то скачиваю) мой проц вообще на 100% загружается. Поэтому лаги трансляции могут быть из-за этого

[@MadBlissOff]

28:50 Жёлтый = зелёный, запоминаем

[@ArchakovBlog]

лел)

[@senails0]

На мой взгляд можно сказать реакту собрать билд , и экспрессом раздавать статику из этой папки билд. это не очень сложно , и 2 хостинга не надо , можно ограничиться одним хироку

[@heyliaable]

А когда будет продолжение?:)

[@ДмитрийРазыгрович]

А почему может не работать проксирование? ошибка Proxy error: Could not proxy request /socket.io/?EIO=3&transport=polling&t=N6n-b4q from localhost:3000 to localhost:4400. See nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).

[@shramko-dev]

Я написал выше коментарий по корсам, уберешь корсы и заработает прокси

[@ЭйЭй-ы1и]

всем привет, а что делать если если нужно proxy? в packet.json как я понимаю только один можно указать, как быть?)

[@ЭйЭй-ы1и]

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

[@ArchakovBlog]

Тут только можно на одну. Для двух, уже нужно серверную прослойку писать

[@ЭйЭй-ы1и]

@@ArchakovBlog привет, а когда следующий урок по socket.io?

[@TOP100-r6h]

красава

[@matveiseliverstov3009]

Всем привет, подскажите пожалуйста как исправить ошибку cors, потому что все решения из гугла и ниже не помогают, буду очень благодарен.

[@Максимка-ц8г]

Привет, решил? А то не получается)

[@Zer0IsNotJustNumber]

nodemon лучше использовать потому что устал перезапускать проект при каждом изменении

[@43snip]

Всем приветы. Дэнис,когда планируется продолжение разработки чата ?

[@ArchakovBlog]

На этой неделе

[@ВадимБоровик-ф9ж]

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Как решить данную проблему? Выскакивает в консоли после подключения socket

[@daswer2894]

Я смог решить эту проблему, добавляя заголовок Access-Control-Allow-Origin в ответе от бека. Я добавил middleware , который сам добавляет этот заголовок к каждому ответу. app.use((req,res,next) => { res.header("Access-Control-Allow-Origin" , "*"), next() }) добавь это перед прослушиванием сервера.

[@blackwood8816]

Жаль на счет деплоя приложения Node JS, на пространствах ютюб есть конечно видосы, но в твоем объяснении было бы топчик.

[@singlebw4065]

Кстате про proxy не совсем ясно. Почитав насколько я понимаю proxy подменяет данные откуда идёт запрос. Ну вот я имею какой-то ip адрес и куда-то обращаюсь. Домен это как я понимаю тот же ip только имя. Вот я посылаю запрос на 255.255.255: 4000 браузер определяем мой ip 0.0.0.0: 3000 т.к. я указал proxy 100.100.100.100:5000 то браузер будет обращаться с его к 255.255.255: 4000. В ситуации на видео что-то я не совсем догоняю. Я вроде нахожусь на localhost:3000 но при запросах по умолчанию proxy как бы говорит что запросы идут с localhost:4000 к ..... непонятно. Что-то я запутался.

[@sashahoncharenko1730]

Access to XMLHttpRequest at 'localhost:9999/socket.io/?EIO=4&transport=polling&t=NQGT2Kj' from origin 'localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. вот такая ошибка после добавления вот таких строчек в App.js import io from 'socket.io-client'; const socket = io('localhost:9999'); HEEELP!!!

[@odealoya6324]

Вот объясните глупому, почему если импортировать express, то при запуске сервера выдает ошибку, но если через require запрос, то сразу все норм, а то никак понять не могу... Спасибо

[@peregrint]

Node не поддерживает ES6 импорты. Можешь попробовать TypeScript, там такая возможность есть.

[@odealoya6324]

@@peregrint ахах, спасибо за ответ и да, за прошедший месяц я уже успел разобраться

[@asfsafsafasfsafs5320]

@@peregrint В 2021 уже поддерживает

[@peregrint]

@@asfsafsafasfsafs5320 наконец-то)

[@MadBlissOff]

Скоро вторая часть?

[@ArchakovBlog]

думаю, на днях будет. Надо от работы освободиться

[@o_0_ilya_0_o31]

моя самооценка на 7:25 📉

[@tatsuki5929]

1:09:30 Socket IO

[@mikaelgevorgyan4521]

а у меня ошибку выдает =(((.Как подключился к приложению

[@shramko-dev]

Написал коментарий выше по ошабке.

[@МаксимНырков-у6г]

Пицца в итоге вышла толоько в середине июня)

[@inspiredx505]

Периодически код на экране меняется без объяснений, импорты и прочее то пропадают, то появляются, дай бог заметить во время

[@ФедорСергеевич-ю2ь]

No 'Access-Control-Allow-Origin' header is present on the requested resource. дошел до сюда и все! коммент с низу не помог! CORS установил , заголовки отправлял ! ошибка не изменилась даже! почему тогда у автора даже без CORS нету ошибки??

[@kazhymukhanyerkinov4110]

@@ФедорСергеевич-ю2ь Salam , umneya toje takie problema, kak ti reshil?

[@ФедорСергеевич-ю2ь]

Я так и не решил. Но это не работает только на локальном хосте. А так установи пакет cors

[@matveiseliverstov3009]

@@ФедорСергеевич-ю2ь В смысле только на локальном, то есть если разместить его на firebase например ошибка уйдет?

[@ФедорСергеевич-ю2ь]

@@matveiseliverstov3009 если cors установлен и настроен то все будет работать)

[@denial3874]

failed: Error during WebSocket handshake: Unexpected response code: 400 кто знает что делать ?

[@Asad__Jasurbek]

Zhivoy😂😂😂

[@wizer3336]

29:34 время для аниме

[@undefunden]

да

[@AZAL1T]

в каждом стриме ты постоянно ноешь что стрим лагает, исправь это пожалуста.

[@ArchakovBlog]

нит

[@undefunden]

да мы точно уже понимаем что такое map

[@undefunden]

да мы понимаем что такое map)_)

[@shramko-dev]

Уже не будет работать так как изменилась политика корсов. Если у вас с ошибкой has been blocked by CORS policy то читайте ниже. Вот пример того, как сделать робочий вариант gist.github.com/Shramkoweb/dc98f721a1a2e78072a5dc68d7e8e708 Не забудьте поставить cors пакет

[@webdevelopment5337]

спасибо

[@uzver3787]

не работает

[@alexnoodles8290]

да да чат ,,,, нужен чат

[@Alexis007]

почему все фронты так любят nodejs ?)) это как если бы бэкендеры писали фронт на java или c# , короче кровь из глаз))

[@iGotton]

+

[@СаняБелов-ф8ь]

Слишком много воды

[@undefunden]

запись лагает )

[@404russ]

те самые курсы на сеньора...

[@ArchakovBlog]

где написано что это курс на синьора?

[@404russ]

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

[@artempavlenko5147]

Как для джуна много воды, трени - не разжевано

[@timzeynalov3537]

слишком долго для такой фигни

[@priyadewangan7046]

Please make your video in English language .

[@MadBlissOff]

Priya Dewangan don’t u have enough English-language guides on the vastness of KZbin?

[@GodBlessMeBaby]

Yes, because apparently 1 billion of english tutorials isn't enough for you.

[@19Sanji]

Большое спасибо!

[@y5rdg]

Спасибо

[@goshana1987]

Спасибо!!!

[@tatsuki5929]

Спасибо)