Создание веб чата на Socket.io и Node JS за 40 минут!
HTML-код
- Опубликовано: 29 сен 2024
- Создание полноценного веб чата на основе 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
![HTML - Полный Курс HTML Для Начинающих [3 ЧАСА]](http://i.ytimg.com/vi/W4MIiV4nZDY/mqdefault.jpg)
![HTML - Полный Курс HTML Для Начинающих [3 ЧАСА]](/img/tr.png)
Спасибо за урок,все работает,главное не торопится)
Здравствуйте, у меня вопрос: "Как теперь запустить это на компе_1 и на компе_2, и посылать сообщения между ними"? Помогите, пожалуйста!
Слушай ну уже 2к19 может пора уже начинать использовать стандарт ES6???
да и смешал бэк с фронтом
Ну да.. На var смотреть как-то печально :(
Да он ничего не знает кроме как писать 'hello world', ну серьезно этих уроков по чату уже уйма, покажи что-то стоящие: разделение ролей в чате, как запретить определенные события, работа с бд, простенькую онлайн игру..хватить записывать то что уже и так есть! Или чат на go как вариант!
@@СандроНекий-р7з чат на го не тяжелее. А с бд он уже работал, это даже чаще встречается, чем чаты
кстати говоря в скрипт /socket.io/socket.io.js в качестве аргумента window передается this, а у модуля this возвращает undefined; и как модуль его никак не заюзать (если только через вебпак). Но в целом акцент был поставлен на технологию socket.io, а уж на современном синтаксисе можно спокойно самому написать.
Неплохо, только надо снять ещё урок по занесению в бд, и разделению на комнаты
Благодарю за видео оно мне помогло, конечно только в стиле). Выпускайте побольше таких видео). Можете ещё создать видео где создаёте приложение онлайн чат .exe?
на sololearn идею взял?
все видео было снято для рекламы apple 32:20 не стыдно тебе гоша?
сколько они тебе заплатили? :)
Достаточно для того что бы снять видео в 40 минут🤣
эй как ты так делаешь ( ! ) и вся код html набирается
У него редактор vs code там нужно написать ! и нажать tab
Если хочешь на sublime text3 то нужно установить emmet и написать ! и tab
набери html и нажми tab
22:00
видео хороший материал для того, чтоб узнать как это работает. но архитектура приложения ужасная
проговаривай, что так не нужно писать, что не нужно создавать такую архитектуру. ведь написать чат любой сможет, а оформить масштабируемость проекта единицы
ну потратил я на видео чуть менее 2-х часов. Результат конечно есть, но он не очень впечатляет. Все как в том же твоем видео - создать простую игра за 20 минут на javascript. Если в том случае, это было просто игра, и никто не требовал сохранения состояния, то в этом случае оно как бы нужно.
Итог: веб-чат действительно создан, можно пообщаться с самим собой с нескольких разных браузеров. Другой вопрос о целесообразности данного действия и как итог - незачет! Плохо, можно было постараться получше
отлично)
Здравствуйте Георгий. Спасибо за урок. Не подскажете как потом этот проект залить в хостинг и запустит по доменному имену?
Эх,ещё бы научил как это залить на бесплатный сервис какой нибудь...Например на heroku
Спасибо большое. Не думал, что, случайно зайдя в комментарии к этому видео, могу найти что-то настолько полезное как отсылку на этот сервис.
@@adeptslab4153 Лучше поискать VPS/VDS с тестовым периодом)Проще будет
@@stepashka20 нашёл?
@@finishsuffering за эти 3 года я понял,что иметь собственный сервер удобнее всего и не надо мучаться с поисками бесплатного :)
а что делать если пишет ошибку при запуска сервера TypeError: require(...).listen is not a function мне это кажется это и за старой версий Node.js
Очень хотелось бы еще узнать как с помощью socket.io сделать видеочат
Это делается с помощью Web RTC
Только я пересмотрел все видео по обучению создания онлайн мессенджера и все равно нихера не получилось ?
Как и с этим роликом (Нихуя)
На nodejs легко оказалось создать чат) спасибо автору.
Автор: ...пишет require
import: ...вышел из чата
@@clown2195 оптимальнее принятого стандарта?
Ну это на локалке, а как на сервер выложить, в каких директориях, ка будет выглядеть ссылка в адресной строке?
👍
Пацаны и девчонки, я тут тоже сделал видеоролик по онлайн чату на html, js и firebase, но в моей версии используется всего 500 строк кода. Также в моём чате можно прикреплять и отправлять файлы, редактировать и удалять сообщения и вся история сообщений сохраняется! Буду рад если поддержите видео. Ссылка на мой чат также есть в комментариях под роликом на этом канале. Скоро сделаю вторую часть с ответами, безопасностью и хостингом. Весь чат полностью бесплатный. Спасибо ❤
Ну почему нельзя сразу показать ПРАВИЛЬНУЮ архитектуру?((((
а что такое архитектура?)
@@МитяА-р5к как что должно работать
а что посоветуешь почитать?
@@МитяА-р5к Знал бы - не спрашивал
Как выложить чат на node.js на хостинг?
Только покупать VPS нужно, лучше с Linux'ом каким-то. Но без доменного имени будет просто голый IP-шник с SSH доступом. Потому ещё и доменное имя надо будет брать, если для серьезных целей.
@@vitalii5784 fozzy предлагает хостинг с нодой без покупки VPS
Гоша спасибо за очень хороший урок. Все предельно понятно и кратко. Вопрос: будут ли от тебя видео по mongoDB или других NoSQL и их взаимодествие с node js?
Вас же начинающие смотрят, чему вы их учите?! Где чистота кода? Где нормальное именование переменных? Зачем юзать jQuery для парочки селекторов? Начинающие! Обращайте внимание только на саму технолгию сокетов, на то как построен код не смотрите - это какашка.
О, а вот это реально полезно!
У меня вопрос. Вижу, автор не очень комменты чекает, так что надежда на вас, ребята) Вот собственно вопрос: как мне вынести код с чатом в отдельный файл? Не хочу всё мешать в index.js, он у меня и так большой. Что мне делать, через модули или как?
Привет, расскажи как сделать чат между двумя пользователями, таких уроков нет, а общий чат навалом. Всех уже попросил записать чат между двумя пользователями, будет ли такой урок ? Очень полезно было бы. И можно ли использовать Socket.io с php? чтоб сайт был на php а отдельно чат на node ? Спасибо.
Socket.io можно с php использовать...смело
@@Kaz08-e1c каким образом ? можно по подробнее?)
@@mister_robot01 вместо index.html использовать index.php
@@Kaz08-e1c да уж, самый гениальный ответ)) а ничего что, для Socket.io нужен node ? а php не поддерживается нодой ?
@@mister_robot01 ты сам хозяин своего проекта.. ты сам знаешь как будешь использовать...подумай над моими словами(ответами)
Гошан, спасибо.
Спасибо, шикарный пример
Актуально смотреть это видео в 2024 ?
Попробуй вводить дальше сообщения, 3-4 рендерит корректно, дальше начинается какая то дичь, переписывает сообщения, рендерит только на клиенте отправителя, у получателя перезаписывается последнее сообщение
Ты просто рукожоп
Массив users в итоге никак не используется?
Если у кого-то не работает css app.use('/files', express.static('files')); files - это папка, в которую закидываем css и js файлы. Пишу, потому хочу, чтобы вы не морочили себе голову =)
всеравно не работает
Молодец классно обьяснил, спасибо
Бл в 2022 году , думал Нове видео , смотрю 2019 😳
Насчёт урока, всё круто и понятно, но почему ты не дал стартовую разметку?
как можно в 2019 использывть ЕS5 и jQery? Пока смотрел, думал, что видос года 15-го, а потом смотрю -19)))
как я понял, он старый видос перезалил, на счет jQuery - к сожалению всё еще используется в энтерпрайзе, но в случае с данным видео jQuery был явно лишним, согласен)
Я, который использую ES6 и jQuery в 2022: мда, лол, отстал чуток
Господи расскажите ему уже о nodemon
скачивать atom из-за того, что есть плагин консоли? совсем ебо-бо, что ли? любой webstorm или vscode идет сразу с такой начинкой.
Ребята я конечно не гуру ну это вообще какойто хлам
Очень крутой урок! Я уже давно мечтал написать свой чат и благодаря тебе, мне это удалось :)
много воды
и еще вопрос- зачем создавался массив connections? он ведь нигде не используется
Общий чат это просто, вот приватный чат посложнее будет
СДЕЛАЙ ТО ЖЕ САМОЕ, В СВЯЗКЕ С PHP (ставьте лайк, кто тоже сломал себе голову с этим вопросом)
А как сделать с связкой php?
@@qwerty1150 если бы я знал, я бы, наверное, не стал бы просить, как это сделать
Уже здесь, чтобы учиться!
+
var можно заменить let
Крутое видео, очень информативное. Но почему вы не пишите на node.js при помощи классов ? Я считаю, если научиться писать все это через классы, то данный урок не будет привязан к какому то определенному языку
для этого придется Гоше выучить классы)))
Всё это круто, когда только на openServer делаешь, а вот если реальный сервак VPS, то это уже все не работает так просто.
Эх...если бы ещё понять как с реальным сервером сделать такое же.
Сейчас бы подключать jquery только для манипуляции с DOM деревом
=)))
сейчас бы вообще юзать jquery
Уже не актуально. Все надо переписывать
Спасибо большое!
А без jQuery вообще ничего не получиться?
А ещё лучше - полистать этот учебник хорошенько
связь много пишущих сразу для всех реально не так полезно, как если бы один пишущий одному из нескольких. в итоге дерево переписок. как консультант на сайте. он пишет один а посетителей много. не получится ли такое видео сделать?
Отличный урок. Спасибо большое!
Спасибо за видео, но в итоге ни connections ни users никак не используются. Они нужны для того, чтобы писать сообщения конкретным пользователям. но данный вопрос никак не раскрыт.
Спасибо за урок. Месадж лучше все таки сокращать как msg, а не mess)) т.к. событие у тебя дословно: послать грязь.
автор просто гений почему он не преподает мне обьясняет все так что не возникают вопросы
Как сделать, чтобы сообщения всех пользователей оставались после обнавления...и как цвет присвоить только своим сообщениям, и выровнить их по другому краю
А теперь дайте мне код, чтобы работало по айпи с моего компа по всему миру, пусть без доменного имени)
Через айпи можно много сделать. Да и вообще из пк можно сделать хост. Только постараться придется
@@ИванАукин есть уроки на эту тему?
у меня не запускается node index , в чем может быть проблема?
Твои уроки всегда лучшие
Забыл про массив users и connection, ну и ладно, в целом понятно взаимодействие, подобный пример можно найти на socket.io на английском языке
Уроки по golang даёшь?
Я хочу спросить, а как я могу этот онлайн чат использовать для других сайтов?
Можно ли интегрировать этот сокет с django?
и никто кроме тебя не может подключиться к этому чату
Де игры? Шоп там Phaser/Pixi + Socket IO было!
у кого то есть работающий пример этого кода?
Да, оно не отправляет сообщения у меня. Если кто знает в чем дело - напишите будьте добры
@@СанекСветлов-й6ь запускал сам сервер?
@@СанекСветлов-й6ь подключены на сервер и на сам сайт библиотеки джейквери и сокет?
@@СанекСветлов-й6ь на сайт может попросить socet- io-client
@@TheTanat Спасибо. Я нашел уже ошибку в коде.
Uncaught ReferenceError: socket is not defined
socket не определен
нашли исправление?
*За сорок сек рассказал , вообще годно !!!!!!!!!!!*
А почему не visual studio ?
admenmod ZXCV а чем студия может похвастаться и чего нет в атоме?
Не знаю, мне кажется там удобнее)
@@rubicomspb Удобная работа с файлами, встроенный терминал, встроенный emmet и т.д. Если говорить просто, то vs code это монстр прямо из коробки
я что-то не так делал походу, код уже скопипастил с сайта и не робит
Гоша отдуши спасибо я так долго искал таких видео отдуши
Вощще круто я незнал что представляет node js теперь понял спасибо тебе брат
рекламы ебом, на 20й минуте 4 рекламы, выключил
С# asp.net можно?
jQuery в 2019, facepalm
При загрузке на сервер не работает ни в какую
Спасибо большое Гоша Дударь
СТОП, что?! А как его опубликовать? Для подключения через Интернет....
на хост выставить надо и каждый месяц платить
Как всегда годно)
django или node.js?
Спасибо за туториал!
Для тех, у кого ошибка типа этой: 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"
Спасибо, шикарный пример
как прописать админку?
Спасибо!
Досмотрел до конца
Напишем "клыр"
Нет у этого чата практического применения в реальном мире. Я очень сомневаюсь что кто то заплатит деньги за такое.
Опыт работы с сокетами
Именно такой чат но на андроид можно?
ЭТО САМЫЙ ЛУЧШИЦ КАНАЛ И ВИДИО
ЭТО САМЫЙ НЕ ГРАМОТНЫЙ КОММЕНТАРИЙ
@@itzhellcod3r-developer609 СЛЫШЬ ТЫ САМ ТО ТЫ КТО?
@@venko1878 я, человек.
@@venko1878 Видео а не ВИДИО
@@itzhellcod3r-developer609 ДА ЛАДНО
сделай урок с arn
users = [] зачем ?
Ну и на фига массив connections и users?
Куда он нажал ???? 10:25
Никуда, просто вставил заранее скопированный html код.
@@AlexeyMorashko нет ну он же не просто так поставил " ! "
@@bogdan_ov О, сорян, не заметил ' ! '. Тогда все просто. В Атоме, если в файле типа .html поставить восклицательный знак и нажать на кнопку "tab", развернется та самая заготовка под html документ.
Сделай мессенджер на c++
Ты не к тому обратился .Он сам ничего не делает он просто переводит зарубежные уроки.
от души урок, единственный более понятный!
у меня почему-то не получается активировать команду в терминале npm init. Как это устранить (эта проблема на винде)
1)попробуй запустить от имени администратора
2)проверь,установлен ли node и npm(чтобы проверить это,зайди в консоль и пропиши node -v а потом npm -v)
3)попробуй прописать через обычную консоль шиндовс :D
если не получается - тогда я хз чем тебе помочь
как же надоел этот bootstrap, главная ценность css фреймворков их сетка, но зачем нам сетка фреймворков, если есть гриды
можно совмещать гриды и bootstrap)