Создаем онлайн чат с нуля ➤ ReactJS, Socket.io, Node.JS, Express.JS
Real-time приложения сейчас повсеместны, почему бы тогда и нам такое не написать? После этого видео для вас это будет не сложно, потому что из него вы узнаете, как создать сервер с использованием Node.JS + Express.JS. А в качестве передачи данных и обработки событий будем использовать еще и Socket.io для того, чтобы установить соединение с клиентом. Что касается фронтенд части, то тут будем использовать библиотеку React.JS + опять Socket.IO. Чат будет иметь небольшой функционал, но полученные знания помогут вам его улучшать и добавлять новых фич. Финалом будет деплой нашего онлайн-чата на Netlify и Render
00:00 - Показываю демочку
03:00 - Обзор используемых технологий
06:04 - Инициализация проекта, установка зависимости для сервера
08:53 - Создаем сервер на Node.js + Express.JS + Socket.io
17:00 - Установка зависимости для клиента
18:50 - Обновляем структуру, пишем роуты и стили для клиента
28:22 - Создаем основную компоненту для входа в комнату
39:45 - Добавляем события connection и join для сервера и клиента
51:02 - Пишем логику для добавления юзеров и отправки сообщений
01:01:24 - Дописываем компоненту комнаты и сообщений
1:21:01 - Обновляем логику для получения сообщений на сервере
01:31:00 - Создаем функции для подсчета юзеров в комнате
01:36:15 - Делаем функционал для покидания комнаты
01:44:40 - Деплой онлайн чата на Netlify и Render
☃️ мой github: https://github.com/tomkovich
? мой телеграм: https://t.me/tomkovich_frontend
? мой инстаграм: https://www.instagram.com/thmpsn_ya
? мой linkedin: https://www.linkedin.com/in/tomkovich
Что такое WebSocket - https://youtu.be/8m4dyh-_i_g
Как деплоить сайт/приложение - https://youtu.be/kbiglSY6AOM
#frontend #javascript #reactjs
Что делает видео по-настоящему запоминающимся? Наверное, та самая атмосфера, которая заставляет забыть о времени. Когда вы заходите на RUVIDEO, чтобы посмотреть онлайн «Создаем онлайн чат с нуля ➤ ReactJS, Socket.io, Node.JS, Express.JS», вы рассчитываете на нечто большее, чем просто загрузку плеера. И мы это понимаем. Контент такого уровня заслуживает того, чтобы его смотрели в HD 1080, без дрожания картинки и бесконечного буферизации.
Честно говоря, Rutube сегодня — это кладезь уникальных находок, которые часто теряются в общем шуме. Мы же вытаскиваем на поверхность самое интересное. Будь то динамичный экшн, глубокий разбор темы от любимого автора или просто уютное видео для настроения — всё это доступно здесь бесплатно и без лишних формальностей. Никаких «заполните анкету, чтобы продолжить». Только вы, ваш экран и качественный поток.
Если вас зацепило это видео, не забудьте взглянуть на похожие материалы в блоке справа. Мы откалибровали наши алгоритмы так, чтобы они подбирали контент не просто «по тегам», а по настроению и смыслу. Ведь в конечном итоге, онлайн-кинотеатр — это не склад файлов, а место, где каждый вечер можно найти свою историю. Приятного вам отдыха на RUVIDEO!
Видео взято из открытых источников Rutube. Если вы правообладатель, обратитесь к первоисточнику.