Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Java
Code

Создание приложение чата реального времени с Modulus и Spring Boot

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Getting Started with Modulus.
Build a Real-Time Chat Application With Modulus and Python
The Hitchhiker's Guide to Docker and Modulus
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

В этом уроке мы будем использовать Spring Boot для среды веб-разработки, Websockets для обмена данными в реальном времени, Tomcat для контейнера приложений Java, Gradle для создания и управления зависимостями, Thymeleaf для рендеринга шаблонов, MongoDB для хранения данных и, наконец, там не будет XML для конфигураций bean-компонентов. Чтобы вдохновить вас, в конце этой статьи вы увидите полностью работающее приложение, подобное показанному ниже.

Realtime Chat Application Chat Screen

1. Сценарий

  1. Доу открывает страницу чата, чтобы общаться со своими друзьями.
  2. Ему предлагается выбрать прозвище.
  3. Он входит на страницу чата и отправляет сообщение. Сообщение отправляется на ендпоинт Spring MVC для сохранения в базу данных и трансляции.
  4. Указанный ендпоинт обрабатывает сообщение и передает это сообщение всем клиентам, подключенным к системе чата.

2. Зависимости и конфигурация Gradle

Прежде чем приступить к внутренней структуре проекта, позвольте мне объяснить, какие библиотеки мы будем использовать для перечисленных выше функций проекта, и управлять ими, используя Gradle. Когда вы клонируете проект из GitHub, вы увидите файл с именем build.gradle в корневом каталоге проекта, как показано ниже.

Я не буду погружаться в внутренности Gradle, но позвольте мне объяснить те части, которые нам нужны для нашего проекта. Spring Boot создан в основном для разработки автономных приложений в формате jar. В нашем проекте мы создадим проект war, а не jar. Это потому, что для Modulus нужен war файл для автоматического развертывания проекта в облаке.

Чтобы создать war файл, мы применили apply plugin: 'war'. Modulus также ожидает, что название будет ROOT.war по умолчанию, и именно поэтому мы использовали:

Когда вы запускаете задачу build Gradle, она будет генерировать war файл для развертывания в контейнере Tomcat. И, наконец, как вы можете догадаться, раздел зависимостей предназначен для сторонних библиотек для конкретных действий.

Это все для раздела зависимостей проекта, и вы можете обратиться к руководству Gradle за дополнительной информацией о Gradle.

3. Дизайн

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

3.1. Модель

Мы разрабатываем чат-приложение, поэтому можем сказать, что у нас есть модель ChatMessageModel (т. е. Объект домена). Хотя мы сохраняем и просматриваем детали сообщения чата, мы можем отбросить объект чата от или к этой ChatMessageModel. Кроме того, мы можем использовать модель User для пользователей чата, но чтобы упростить приложение, мы будем использовать только nickname как текст. Модель ChatMessageModel имеет следующие поля: text, author и createDate. Представление класса этой модели выглядит следующим образом:

Этот объект домена помогает нам представлять сообщение чата как JSON при необходимости. Наша модель в порядке, поэтому давайте продолжим работу с контроллерами.

3.2. контроллер

Контроллер - это поведение вашего приложения. Это означает, что вам необходимо просто и легко контролировать ваш контроллер с моделями доменов и другими службами. Мы ожидаем, что наши контроллеры будут обрабатывать:

  1. Запросы на сохранение сообщений чата
  2. Список последних сообщений чата
  3. Обслуживание страницы приложения чата
  4. Обслуживание страницы входа в систему
  5. Передача сообщений чата клиентам

Здесь вы можете увидеть общие ендпоинты:

Первая и вторая ендпоинты предназначены только для того, чтобы обслуживать страницу входа в систему и главную страницу чата. Третье действие - обработка нового хранилища сообщений и трансляции чата. После того, как сообщение будет сохранено, оно будет отправлено клиентам через канал /topic/message. Чтобы хранить данные сообщений в MongoDB, мы будем использовать репозиторий MongoDB.

Как вы можете видеть, существуют два типа ендпоинтов /messages: GET и POST. Когда вы отправляете POST-запрос на ендпоинт /messages с надлежащим пейлоадом к сообщению, он автоматически переходит в класс ChatMessageModel, и сообщение будет сохранено в MongoDB. После успешного сохранения он автоматически будет перенаправлен клиентам. Но как? В этом экшене есть аннотация @SendTo("/topic/newMessage") Это отправит содержимое, возвращаемое функцией, клиентам. И возвращаемый контент выглядит следующим образом:

Это последнее сообщение из базы данных:

Sample JSON message

Вышеупомянутое сообщение будет преобразовано в формат для обмена через WebSocket. Это сообщение канала будет обрабатываться на стороне клиента со сторонней библиотекой JavaScript, и оно будет обрабатываться в следующих разделах.

Для операций db сообщений используется spring-boot-starter-data-mongodb. Эта библиотека помогает нам в работе с репозиториями, а создание объекта репозитория для MongoDB очень просто. Ниже приведен пример ChatMessageRepository:

Если вы создаете интерфейс и расширяете MongoRepository <?, String>, вы сможете автоматически использовать операции CRUD, такие как find(), findAll(), save() и т.д.

Как вы можете видеть, MongoRepository ожидает объект домена. Мы уже определили эту модель в разделе «Модель» учебника. В этом репозитории мы определили пользовательскую функцию findAllByOrderByCreateDateAsc().

Если вы когда-либо использовали JPA прежде, то сможете это легко понять, но позвольте мне кратко объяснить. Если вы определяете имя функции в интерфейсе, который расширяет MongoRepository, это имя функции будет автоматически парсится на запрос в Spring. Это будет что-то вроде:

В ChatMessageController мы использовали эту функцию, а также использовали функции по умолчанию MongoRepository:

findAll используется параметр для сортировки и разбивки на страницы. Вы можете посмотреть руководство на веб-сайте Spring для получения более подробной информации о Spring JPA.

3.3. View

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

Как вы можете видеть в разделе контроллера выше, они отображаются с использованием двух ендпоинтов, /login и /chat. Для создания интерактивных страниц мы будем использовать некоторые сторонние библиотеки JavaScript. Мы будем использовать их с CDN-страниц. Вы можете увидеть страницу входа ниже:

На странице входа у нас есть примерное текстовое поле псевдонима. Когда вы нажмете Enter Chat, ваш ник будет сохранен в файл cookie. Этот псевдоним будет использоваться для установки поля автора сообщений чата. Когда вы нажмете Enter Chat, откроется страница чата. Если вы уже вошли в систему и перешли на страницу входа в систему, вы будете перенаправлены на страницу чата.

Вот страница чата:

Эта страница предназначена для простого просмотра и отправки сообщений. Сообщения доставляются на эту страницу через WebSockets. На этой странице вы можете увидеть sockjs и stompjs. Это касается обработки уведомлений. Всякий раз, когда приходит новое сообщение, последняя область сообщений повторно заполняется.

Кстати, когда вы впервые открываете страницу чата, последние сообщения будут извлекаться в области сообщений. Как видно на стороне JavaScript, наш канал сообщений - newMessage. Итак, мы слушаем этот канал, и когда вы нажимаете кнопку Send, сообщение в текстовом поле будет отправлено на ендпоинт, и это сообщение будет передано подключенным клиентам после успешного хранения.

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

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

4. Развертывание

4.1. Предпосылки

Перед развертыванием приложения создадим базу данных с помощью панели администрирования Modulus. Вам нужна учетная запись модуля для создания и развертывания dba, поэтому, пожалуйста, создайте учетную запись, если у вас ее нет.

Перейдите на панель инструментов Modulus и создайте базу данных:

Database creation

На экране создания базы данных укажите имя базы данных, выберите версию MongoDB (я использовал 2.6.3, так что будет лучше, если вы выберете также 2.6.3) и, наконец, определите пользователя для применения операций чтения / записи базы данных.

Create Database

После успешного создания базы данных вы можете получить URL MongoDB. Мы будем использовать URL MongoDB в переменных среды, которые будут использоваться приложением Spring Boot.

Чтобы установить переменные среды для MongoDB, вам необходимо иметь приложение. Перейдите на Dashboard и нажмите на Projects. На этой странице нажмите Create New Project.

Чтобы продолжить настройку переменных среды, перейдите в Dashboard и нажмите Projects. Выберите свой проект и нажмите Administration. Прокрутите страницу вниз и установите переменные окружения с помощью ключа SPRING_DATA_MONGODB_URI и значения вашего URI базы данных:

Environment Variables

При развертывании приложения Spring будет использовать значение переменной среды. Мы выполнили требования и продолжим работу с частью развертывания.

4.2. Развертывание с помощью CLI

Чтобы развернуть проект, выполните build задачу gradle:

Эта задача создаст файл war ROOT.war. Скопируйте этот файл в новую папку и установите CLI modulus, если вы этого не сделали.

Войдите в систему;

Теперь выполните следующую команду для развертывания ROOT.war для Modulus.

Это приведет к развертыванию war файла, и вы можете отслеживать логи проектов, чтобы просмотреть состояние своего развертывания, выполнив следующую команду:

Вот и все с развертыванием!

5. Заключение

Основная цель этого учебника - показать вам, как создать чат-приложение в режиме реального времени с Spring Boot, WebSockets и MongoDB.

Для запуска проекта в продакшене Modulus используется как поставщик PaaS. Modulus содержит очень простые шаги для развертывания, а также имеет внутреннюю базу данных (MongoDB) для наших проектов. Кроме того, вы можете использовать очень полезные инструменты на панели инструментов Modulus, такие как журналы, уведомления, автомасштабирование, администрирование Db и т.д.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.