Разрабатываем чат на React с использованием Socket.IO
18 мин
Доброго времени суток, друзья!
Хочу поделиться с вами опытом разработки простого чата на React с помощью библиотеки «Socket.IO».
Предполагается, что вы знакомы с названной библиотекой. Если не знакомы, то вот соответствующее руководство с примерами создания «тудушки» и чата на ванильном JavaScript.
Также предполагается, что вы хотя бы поверхностно знакомы с Node.js.
В данной статье я сосредоточусь на практической составляющей совместного использования Socket.IO, React и Node.js.
Наш чат будет иметь следующие основные возможности:
- Выбор комнаты
- Отправка сообщений
- Удаление сообщений отправителем
- Хранение сообщений в локальной базе данных в формате JSON
- Хранение имени и идентификатора пользователя в локальном хранилище браузера (local storage)
- Отображение количества активных пользователей
- Отображение списка пользователей с онлайн-индикатором
Также мы реализуем возможность отправки эмодзи.
Если вам это интересно, то прошу следовать за мной.
Для тех, кого интересует только код: вот ссылка на репозиторий.
Песочница:
