Создание веб чата на Socket.io и Node JS за 40 минут!

Создание полноценного веб чата на основе Socket.io и Node JS. Для работы с чатом необходимо будет ввести имя, после чего пользователи смогут обмениваться сообщениями будучи в разных городах и даже странах.
1) Сайт itProger: itproger.com/
2) Node JS: nodejs.org/en/
3) Socket IO: socket.io/
4) jQuery: developers.goo...
5) Код и описание: itproger.com/n...
✔ Сообщество программистов: itproger.com/
✔ -------------
Вступай в группу Вк - prog_life 🚀
Группа FaceBook - goo.gl/XW0aaP
Инстаграм itProger: / itproger_official
Instagram: / gosha_dudar
Telegram: t.me/itProger_o...
Twitter - / goshadudar
Уроки от #GoshaDudar 👨🏼‍💻
Все уроки по хештегу #goshaLessons

[@abbostajimov4030]

На nodejs легко оказалось создать чат) спасибо автору.

[@a.s6799]

Огромная благодарность, мучался по другим видео дошёл до перегорания. Сдесь всё в лудшей форме.

[@Jylik]

Очень крутой урок! Я уже давно мечтал написать свой чат и благодаря тебе, мне это удалось :)

[@Tornado-ln7fq]

Спасибо за урок,все работает,главное не торопится)

[@ЛМШоу]

О, а вот это реально полезно!

[@maximsmirnov887]

Отличный урок. Спасибо большое!

[@frostkhan2629]

Твои уроки всегда лучшие

[@vyachc]

Уже здесь, чтобы учиться!

[@vcsmallthings]

+

[@venko1878]

ЭТО САМЫЙ ЛУЧШИЦ КАНАЛ И ВИДИО

[@itzhellcod3r-developer609]

ЭТО САМЫЙ НЕ ГРАМОТНЫЙ КОММЕНТАРИЙ

[@venko1878]

@@itzhellcod3r-developer609 СЛЫШЬ ТЫ САМ ТО ТЫ КТО?

[@itzhellcod3r-developer609]

@@venko1878 я, человек.

[@itzhellcod3r-developer609]

@@venko1878 Видео а не ВИДИО

[@venko1878]

@@itzhellcod3r-developer609 ДА ЛАДНО

[@arthuralunts5424]

Здравствуйте, у меня вопрос: "Как теперь запустить это на компе_1 и на компе_2, и посылать сообщения между ними"? Помогите, пожалуйста!

[@Юра-г3ш]

от души урок, единственный более понятный!

[@businessmahinator4608]

*За сорок сек рассказал , вообще годно !!!!!!!!!!!*

[@alexluy4673]

Слушай ну уже 2к19 может пора уже начинать использовать стандарт ES6???

[@oBezBasKa]

да и смешал бэк с фронтом

[@rubtsoff_on]

Ну да.. На var смотреть как-то печально :(

[@СандроНекий-р7з]

Да он ничего не знает кроме как писать 'hello world', ну серьезно этих уроков по чату уже уйма, покажи что-то стоящие: разделение ролей в чате, как запретить определенные события, работа с бд, простенькую онлайн игру..хватить записывать то что уже и так есть! Или чат на go как вариант!

[@ИванАукин]

@@СандроНекий-р7з чат на го не тяжелее. А с бд он уже работал, это даже чаще встречается, чем чаты

[@РоманНовожилов-у9б]

кстати говоря в скрипт /socket.io/socket.io.js в качестве аргумента window передается this, а у модуля this возвращает undefined; и как модуль его никак не заюзать (если только через вебпак). Но в целом акцент был поставлен на технологию socket.io, а уж на современном синтаксисе можно спокойно самому написать.

[@sasiaanders]

а что делать если пишет ошибку при запуска сервера TypeError: require(...).listen is not a function мне это кажется это и за старой версий Node.js

[@ЕгорДохлый-е8к]

Отличный гайд по созданию чата. Великолепно :) как и всегда на этом канале. А что думаете как и в чем лучше хранить сообщения. В json, js-файл массив, база данных.

[@АнатолийВишняков-п6я]

Здравствуйте Георгий. Спасибо за урок. Не подскажете как потом этот проект залить в хостинг и запустит по доменному имену?

[@youngprogrammer5880]

Гоша отдуши спасибо я так долго искал таких видео отдуши

[@Публичныйканал-с3м]

Вощще круто я незнал что представляет node js теперь понял спасибо тебе брат

[@technic_and_programming]

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

[@kirillnikitin1819]

Как всегда годно)

[@iurii7752]

Молодец классно обьяснил, спасибо

[@alexandergorin9963]

Гоша спасибо за очень хороший урок. Все предельно понятно и кратко. Вопрос: будут ли от тебя видео по mongoDB или других NoSQL и их взаимодествие с node js?

[@rustamsahay740]

Спасибо, шикарный пример

[@ИванЯгубцев-у1и]

Гошан, спасибо.

[@atsuko_shittl.j]

Благодарю за видео оно мне помогло, конечно только в стиле). Выпускайте побольше таких видео). Можете ещё создать видео где создаёте приложение онлайн чат .exe?

[@beekeepingArmenia]

👍

[@nitroflap]

круто, такой формат точно зайдёт...

[@doctor.synkin]

Пацаны и девчонки, я тут тоже сделал видеоролик по онлайн чату на html, js и firebase, но в моей версии используется всего 500 строк кода. Также в моём чате можно прикреплять и отправлять файлы, редактировать и удалять сообщения и вся история сообщений сохраняется! Буду рад если поддержите видео. Ссылка на мой чат также есть в комментариях под роликом на этом канале. Скоро сделаю вторую часть с ответами, безопасностью и хостингом. Весь чат полностью бесплатный. Спасибо ❤

[@EnoxyuM]

Спасибо за туториал! Для тех, у кого ошибка типа этой: npm WARN ws@8.2.3 requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself. npm install --save-dev "bufferutil@^4.0.1"

[@ABC-3-ABC]

Неплохо, только надо снять ещё урок по занесению в бд, и разделению на комнаты

[@oxffi5047]

Если у кого-то не работает css app.use('/files', express.static('files')); files - это папка, в которую закидываем css и js файлы. Пишу, потому хочу, чтобы вы не морочили себе голову =)

[@DanilZabolotnyi]

всеравно не работает

[@4fodax]

Очень хотелось бы еще узнать как с помощью socket.io сделать видеочат

[@albertsaitov7463]

Это делается с помощью Web RTC

[@mister_robot01]

Привет, расскажи как сделать чат между двумя пользователями, таких уроков нет, а общий чат навалом. Всех уже попросил записать чат между двумя пользователями, будет ли такой урок ? Очень полезно было бы. И можно ли использовать Socket.io с php? чтоб сайт был на php а отдельно чат на node ? Спасибо.

[@Kaz08-e1c]

Socket.io можно с php использовать...смело

[@mister_robot01]

@@Kaz08-e1c каким образом ? можно по подробнее?)

[@Kaz08-e1c]

@@mister_robot01 вместо index.html использовать index.php

[@mister_robot01]

@@Kaz08-e1c да уж, самый гениальный ответ)) а ничего что, для Socket.io нужен node ? а php не поддерживается нодой ?

[@Kaz08-e1c]

@@mister_robot01 ты сам хозяин своего проекта.. ты сам знаешь как будешь использовать...подумай над моими словами(ответами)

[@jurgenschmidt66]

Ну это на локалке, а как на сервер выложить, в каких директориях, ка будет выглядеть ссылка в адресной строке?

[@xenonist4502]

У меня вопрос. Вижу, автор не очень комменты чекает, так что надежда на вас, ребята) Вот собственно вопрос: как мне вынести код с чатом в отдельный файл? Не хочу всё мешать в index.js, он у меня и так большой. Что мне делать, через модули или как?

[@stepashka20]

Эх,ещё бы научил как это залить на бесплатный сервис какой нибудь...Например на heroku

[@adeptslab4153]

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

[@stepashka20]

@@adeptslab4153 Лучше поискать VPS/VDS с тестовым периодом)Проще будет

[@finishsuffering]

@@stepashka20 нашёл?

[@stepashka20]

@@finishsuffering за эти 3 года я понял,что иметь собственный сервер удобнее всего и не надо мучаться с поисками бесплатного :)

[@muradei]

Спасибо!

[@martingerman2457]

ну потратил я на видео чуть менее 2-х часов. Результат конечно есть, но он не очень впечатляет. Все как в том же твоем видео - создать простую игра за 20 минут на javascript. Если в том случае, это было просто игра, и никто не требовал сохранения состояния, то в этом случае оно как бы нужно. Итог: веб-чат действительно создан, можно пообщаться с самим собой с нескольких разных браузеров. Другой вопрос о целесообразности данного действия и как итог - незачет! Плохо, можно было постараться получше

[@МитяА-р5к]

отлично)

[@Grapeoff]

Ничего не понял, но очень интересно!

[@cerebrum2]

на sololearn идею взял?

[@baisangur549]

у меня не запускается node index , в чем может быть проблема?

[@s1lentgrave]

Ну почему нельзя сразу показать ПРАВИЛЬНУЮ архитектуру?((((

[@МитяА-р5к]

а что такое архитектура?)

[@s1lentgrave]

@@МитяА-р5к как что должно работать

[@МитяА-р5к]

а что посоветуешь почитать?

[@s1lentgrave]

@@МитяА-р5к Знал бы - не спрашивал

[@ncorvenius]

Сейчас бы подключать jquery только для манипуляции с DOM деревом

[@РоманНовожилов-у9б]

=)))

[@buggs4825]

сейчас бы вообще юзать jquery

[@spring-heeledjack4528]

Круто!

[@yegdssas]

Массив users в итоге никак не используется?

[@10RoK1]

Как сделать, чтобы сообщения всех пользователей оставались после обнавления...и как цвет присвоить только своим сообщениям, и выровнить их по другому краю

[@vladpronin5033]

Автор: ...пишет require import: ...вышел из чата

[@vladpronin5033]

@@clown2195 оптимальнее принятого стандарта?

[@articatsvao7317]

Как выложить чат на node.js на хостинг?

[@vitalii5784]

Только покупать VPS нужно, лучше с Linux'ом каким-то. Но без доменного имени будет просто голый IP-шник с SSH доступом. Потому ещё и доменное имя надо будет брать, если для серьезных целей.

[@indigosay]

@@vitalii5784 fozzy предлагает хостинг с нодой без покупки VPS

[@tajgoldsoft2012]

эй как ты так делаешь ( ! ) и вся код html набирается

[@davidsahakyan8790]

У него редактор vs code там нужно написать ! и нажать tab

[@davidsahakyan8790]

Если хочешь на sublime text3 то нужно установить emmet и написать ! и tab

[@РоманБорецкий]

набери html и нажми tab

[@heydermustafayev777]

Спасибо большое Гоша Дударь

[@artem0n]

все видео было снято для рекламы apple 32:20 не стыдно тебе гоша? сколько они тебе заплатили? :)

[@ЭльдарТюменев]

Достаточно для того что бы снять видео в 40 минут🤣

[@romanmed9035]

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

[@ddrdeveloper]

Спасибо за видео, но в итоге ни connections ни users никак не используются. Они нужны для того, чтобы писать сообщения конкретным пользователям. но данный вопрос никак не раскрыт.

[@exdoe4449]

Спасибо за урок. Месадж лучше все таки сокращать как msg, а не mess)) т.к. событие у тебя дословно: послать грязь.

[@albeespensor613]

Попробуй вводить дальше сообщения, 3-4 рендерит корректно, дальше начинается какая то дичь, переписывает сообщения, рендерит только на клиенте отправителя, у получателя перезаписывается последнее сообщение

[@АнатолийШмель-о1х]

Ты просто рукожоп

[@TalBaleX335]

Я хочу спросить, а как я могу этот онлайн чат использовать для других сайтов?

[@КомнатаДиави]

Насчёт урока, всё круто и понятно, но почему ты не дал стартовую разметку?

[@sivkaburka1062]

Досмотрел до конца

[@НургалиШаншаров]

Можно ли интегрировать этот сокет с django?

[@jonturnik]

СДЕЛАЙ ТО ЖЕ САМОЕ, В СВЯЗКЕ С PHP (ставьте лайк, кто тоже сломал себе голову с этим вопросом)

[@qwerty1150]

А как сделать с связкой php?

[@jonturnik]

@@qwerty1150 если бы я знал, я бы, наверное, не стал бы просить, как это сделать

[@visokogroup7922]

Забыл про массив users и connection, ну и ладно, в целом понятно взаимодействие, подобный пример можно найти на socket.io на английском языке

[@zaharihalbidari8375]

Бл в 2022 году , думал Нове видео , смотрю 2019 😳

[@mails17]

Крутое видео, очень информативное. Но почему вы не пишите на node.js при помощи классов ? Я считаю, если научиться писать все это через классы, то данный урок не будет привязан к какому то определенному языку

[@evgenkaban6018]

для этого придется Гоше выучить классы)))

[@Kefveseke]

А без jQuery вообще ничего не получиться?

[@ПанЧиЛо]

А ещё лучше - полистать этот учебник хорошенько

[@Фрукт-я7п]

я что-то не так делал походу, код уже скопипастил с сайта и не робит

[@fgddfd-u8g]

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

[@admiralgeneral1703]

var можно заменить let

[@Jylik]

СТОП, что?! А как его опубликовать? Для подключения через Интернет....

[@pepich1127]

на хост выставить надо и каждый месяц платить

[@РоманНовожилов-у9б]

Вас же начинающие смотрят, чему вы их учите?! Где чистота кода? Где нормальное именование переменных? Зачем юзать jQuery для парочки селекторов? Начинающие! Обращайте внимание только на саму технолгию сокетов, на то как построен код не смотрите - это какашка.

[@imvasia13]

как можно в 2019 использывть ЕS5 и jQery? Пока смотрел, думал, что видос года 15-го, а потом смотрю -19)))

[@РоманНовожилов-у9б]

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

[@finishsuffering]

Я, который использую ES6 и jQuery в 2022: мда, лол, отстал чуток

[@admenmod]

А почему не visual studio ?

[@rubicomspb]

admenmod ZXCV а чем студия может похвастаться и чего нет в атоме?

[@admenmod]

Не знаю, мне кажется там удобнее)

[@alexwebb1501]

@@rubicomspb Удобная работа с файлами, встроенный терминал, встроенный emmet и т.д. Если говорить просто, то vs code это монстр прямо из коробки

[@fearsd89]

у меня почему-то не получается активировать команду в терминале npm init. Как это устранить (эта проблема на винде)

[@mrdanceroriginal]

1)попробуй запустить от имени администратора 2)проверь,установлен ли node и npm(чтобы проверить это,зайди в консоль и пропиши node -v а потом npm -v) 3)попробуй прописать через обычную консоль шиндовс :D

[@mrdanceroriginal]

если не получается - тогда я хз чем тебе помочь

[@UladzislauBel]

Крутой урок, но хотел бы урок на чистом JS. Спасибо

[@redhook777]

Без этих библиотек это невозможно

[@ilyaponomarev9279]

@@redhook777 эти библиотеки написаны на js

[@paulkamel2120]

скачивать atom из-за того, что есть плагин консоли? совсем ебо-бо, что ли? любой webstorm или vscode идет сразу с такой начинкой.

[@arsa946]

Всё это круто, когда только на openServer делаешь, а вот если реальный сервак VPS, то это уже все не работает так просто. Эх...если бы ещё понять как с реальным сервером сделать такое же.

[@ВИДЕООТДАНИЛА]

у меня vs code и у меня нету platformio-ide terminal что делать ?

[@arkadii_kuznetsov]

В vs code можно отобразить терминал без плагинов. Активация: Вид -> Терминал Или при помощи сочетаний двух клавиш CTRL+`

[@Владимир-т1я5й]

Не обязательно терминал можно через командную строку и просто к ней подключить файл с которым хочешь работать

[@TheTanat]

у кого то есть работающий пример этого кода?

[@СанекСветлов-й6ь]

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

[@TheTanat]

@@СанекСветлов-й6ь запускал сам сервер?

[@TheTanat]

@@СанекСветлов-й6ь подключены на сервер и на сам сайт библиотеки джейквери и сокет?

[@TheTanat]

@@СанекСветлов-й6ь на сайт может попросить socet- io-client

[@СанекСветлов-й6ь]

@@TheTanat Спасибо. Я нашел уже ошибку в коде.

[@bogdan_ov]

Куда он нажал ???? 10:25

[@AlexeyMorashko]

Никуда, просто вставил заранее скопированный html код.

[@bogdan_ov]

@@AlexeyMorashko нет ну он же не просто так поставил " ! "

[@AlexeyMorashko]

@@bogdan_ov О, сорян, не заметил ' ! '. Тогда все просто. В Атоме, если в файле типа .html поставить восклицательный знак и нажать на кнопку "tab", развернется та самая заготовка под html документ.

[@qwerty6509]

Именно такой чат но на андроид можно?

[@ИзиКаткович-ф7м]

django или node.js?

[@ВладиславКорчагин-н2п]

При загрузке на сервер не работает ни в какую

[@Pripizdnutii]

как прописать админку?

[@СандроНекий-р7з]

Уроки по golang даёшь?

[@localhost3306]

Общий чат это просто, вот приватный чат посложнее будет

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

Uncaught ReferenceError: socket is not defined

[@3peekawowd]

socket не определен

[@kirillcicorin9090]

нашли исправление?

[@indigosay]

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

[@ИванАукин]

Через айпи можно много сделать. Да и вообще из пк можно сделать хост. Только постараться придется

[@ixtirochiavlodlar]

@@ИванАукин есть уроки на эту тему?

[@TheHustleThread]

VDS сервер нужен ?

[@васявасев-р2ш]

22:00

[@dxxite]

видео хороший материал для того, чтоб узнать как это работает. но архитектура приложения ужасная проговаривай, что так не нужно писать, что не нужно создавать такую архитектуру. ведь написать чат любой сможет, а оформить масштабируемость проекта единицы

[@Korovkin37]

Ну и на фига массив connections и users?

[@nikita3129]

Только я пересмотрел все видео по обучению создания онлайн мессенджера и все равно нихера не получилось ? Как и с этим роликом (Нихуя)

[@keha12345]

а где бд куда сообщения сохраняются?

[@БорисМ-ц2м]

сообщение будешь сохранять, параллельно с AJAX на бд, WebSocket лишь для динамичного показа, после обновление страницы будешь показываться уже с бд, где ты отправлял, AJAX

[@10RoK1]

Тоже не понял...как сделать, чтобы сообщения оставались а не пропадали при обновлении страницы ?

[@НиколайЧеревань-п9ш]

@@10RoK1 ты разбрался? что делатб, когда чат на удаленном сервере?

[@10RoK1]

@@НиколайЧеревань-п9ш нет, не практиковал даже

[@НиколайЧеревань-п9ш]

@@10RoK1 можешь загуглить "mongo db chat" с этим инструментом нужно сделать, я так понял

[@GgGg-tz1ju]

С# asp.net можно?

[@atlasua2021]

Де игры? Шоп там Phaser/Pixi + Socket IO было!

[@kenesaryHan]

Господи расскажите ему уже о nodemon

[@denial3874]

users = [] зачем ?

[@MrMy5755]

И создать месенджер тоже реально?

[@Degfer]

Привет, да в принципе возможно

[@СандроНекий-р7з]

А как ты думаешь? если Discord на nodejs написан!

[@10RoK1]

Как сделать, чтобы сообщения все пользователей оставались после обнавления...и как цвет присвоить только своим сообщениям, и выровнить их по другому краю

[@МитяА-р5к]

@@10RoK1 1 - юзай БД, 2 - css

[@SiNDROMiX]

ты очень быстро говоришь, трудновато усваивается информация. В остальном отлично!

[@firewatermoonsun]

Установи скорость на 0,75))

[@finishsuffering]

Я на х2 смотрю, и то он медленный!

[@Владимир-т1я5й]

Как из всего этого сделать сайт что бы любой человек мог зайти сюда

[@РоманНовожилов-у9б]

задеплоить

[@Владимир-т1я5й]

Роман Новожилов не понял

[@РоманНовожилов-у9б]

WET SUM Deploy node.js web app, в Гугле забейте

[@ГерманСеливерстов-ы3ф]

Нет у этого чата практического применения в реальном мире. Я очень сомневаюсь что кто то заплатит деньги за такое.

[@redhook777]

Опыт работы с сокетами