Привет, друзья! В данном туториале мы разработаем чат с использованием следующих технологий: Функционал чата будет таким: Репозиторий с кодом проекта. Если вам это интересно, прошу под кат. Материалы для изучения (опционально): Полезные расширения для VSCode (опционально): Обратите внимание: для успешного прохождения туториала на вашей машине должны быть установлены Node.js и Docker. Для работы с зависимостями будет использоваться Yarn. Создаем директорию, переходим в нее и инициализируем Node.js-проект: Создаем файл docker-compose.yml следующего содержания: Создаем файл .env и определяем в нем переменные среды окружения для Postgres: Запускаем сервер Postgres в контейнере: Это приводит к созданию и запуску контейнера react-nest-postgres-chat-1 с сервером Postgres в сервисе react-nest-postgres-chat. 
 БД доступна по адресу http://localhost:5432/chat. Устанавливаем Prisma в качестве зависимости для разработки и инициализируем ее: Это приводит к созданию файла prisma/schema.prisma. Определяем в нем модель сообщения: Определяем переменную со строкой для подключения к БД в файле .env: Выполняем миграцию: Это приводит к созданию директории migrations с выполненной миграцией в формате SQL. Устанавливаем клиента Prisma и генерируем типы: Глобально устанавливаем Nest CLI и инициализируем Nest-проект: Создаем шаблон React + TS приложения с помощью create-vite: Устанавливаем concurrently: Определяем команду для одновременного запуска сервера и клиента в режиме разработки в файле package.json: Работоспособность приложения можно проверить, выполнив команду yarn dev. На этом подготовка и настройка проекта завершены. Переходим к разработке сервера. Переходим в директорию сервера и устанавливаем модули для работы с сокетами: Генерируем шлюз (gateway) для модуля App: Приводим файлы сервера к следующей структуре: Определяем сервис Prisma в файле prisma.service.ts: Настраиваем данный сервис в файле main.ts: И подключаем его в качестве провайдера в модуле App (app.module.ts): Определяем адрес клиента в файле constants.ts: И тип полезной нагрузки для обновления сообщения в файле types.ts: Определяем методы для работы с сообщениями в файле app.service.ts: Осталось реализовать обработку событий сокетов в файле app.gateway.ts. Импортируем зависимости и прочее, а также определяем переменную для хранения записей "идентификатор сокета — имя пользователя": Инициализируем сокет-соединение, определяем шлюз App и инициализируем в нем сервис App: Инициализируем сокет-сервер и регистрируем инициализацию: Обрабатываем подключение и отключение клиентов: Наконец, обрабатываем события сокетов: Подключаем шлюз в качестве провайдера в модуле App (app.module.ts): На этом разработка сервера завершена. Переходим к разработке клиента. Переходим в директорию клиента и инициализируем Tailwind: Редактируем файл tailwind.config.js: Добавляем директивы @tailwind в файл App.css: Переопределяем дефолтный шрифт и добавляем несколько переиспользуемых стилей (reused styles): Подключаем шрифт в файле index.html: Устанавливаем несколько библиотек: Приводим файлы клиента к следующей структуре: Определяем константы в файле constants.ts: Определяем типы в файле types.ts: И утилиты в файле utils.ts: Начнем, пожалуй, с основного компонента приложения (App.tsx): Если в локальном хранилище содержится информация о пользователе, рендерится экран чата. В противном случае, рендерится экран приветствия. Экран приветствия (ChatScreen.tsx): Инкапсулируем логику обработки событий сокетов в кастомном хуке (useChat.ts): Наконец, экран чата (ChatScreen.tsx): На этом разработка клиента также завершена. Посмотрим, как выглядит наш чат и убедимся в его работоспособности. Находясь в корневой директории проекта, выполняем команду yarn dev и открываем 2 вкладки браузера по адресу http://localhost:3000 (хотя бы одну вкладку необходимо открыть в режиме инкогнито): 
 Вводим имя пользователя, например, Bob в одной из вкладок и нажимаем Start chat: 
 Делаем тоже самое (только с другим именем, например, Alice) в другой вкладке: 
 Получаем в первой вкладке сообщение о подключении Alice. Данные пользователя можно найти в разделе Storage -> Local Storage вкладки Application инструментов разработчика в браузере: 
 Обмениваемся сообщениями: 
 Как проверить, что сообщения записываются в БД? С Prisma — сделать это проще простого. Выполняем команду yarn prisma studio и в открывшейся по адресу http://localhost:5555 вкладке выбираем модель Message: 
 Пробуем редактировать и удалять сообщения — все работает, как ожидается: 
 Закрываем одну из вкладок: 
 Получаем во второй вкладке сообщение об отключении Alice. Открываем консоль инструментов разработчика и вызываем метод clearMessages. Все сообщения удаляются, вкладка перезагружается: 
 Пожалуй, это все, чем я хотел поделиться с вами в этой статье. Надеюсь, вы нашли для себя что-то интересное и не зря потратили время. Благодарю за внимание и happy coding!  JavaScript Developer