Демо
Выбор технологий
Прежде чем создавать наш будущий мессенджер, нам необходимо определиться с технологией, которую мы будем использовать для его разработки. Среди инструментов веб-разработки для одностраничных приложений (SPA) явными фаворитами являются Angular и React . Я не буду подробно останавливаться на преимуществах каждого из этих инструментов, а сосредоточусь на Angular, поскольку ранее я проводил исследования неклассических виртуализированных списков и обнаружил, что он справляется с этой задачей лучше, чем React.Технические требования
- Мы создадим зону для группового просмотра, которая будет выходить прямо с причала.
- Область просмотра сообщений, отсортированных по дате создания.
- Процесс редактирования и удаления сообщений.
- Блок создания сообщения.
- Поиск сообщений по подстроке.
- Уникальный дизайн с тематической отделкой.
- Решение, поддерживающее различные браузеры и платформы.
Разработка решения
Давайте создадим новый проект Angular; в этом примере мы будем использовать версию 20.x. Добавьте пакет ng-virtual-list и настройте его, как описано.Я сразу же предоставлю исходный код проекта ng-virtual-list-chat-demo . Позже я выделю ключевые моменты в коде репозитория, чтобы объяснить их более подробно.
Проект полностью работает на основе моков, а транспортировка реализована с использованием мок-сервисов.
Услуги
- Сервис для работы с группами сообщений ( groups-mock.service.ts ). Реализует методы getGroups, createGroup, updateGroup и deleteGroup.
- Сервис для переключения между чатами ( message.service.ts )
- Имитационный сервис для работы с сообщениями ( messages-mock.service.ts ). Этот сервис предоставляет функциональность getMessages, createMessage, updateMessage, patchMessages и deleteMessage для указанного chatId.
- Сервис для работы с уведомлениями о новых сообщениях (имитация веб-сервиса) ( messages-notification-mock.service.ts ) реализует два Observable: $typing (сигнализирует о том, что пользователь с указанным userId набрал сообщение) и $messages (сигнализирует о добавлении сообщения, передавая в качестве значения версию изменений).
- Сервис тем оформления ( theme.service.ts )
- Сервис локализации ( localization.service.ts ). Важно отметить, что интерфейс может быть адаптирован для языков с письмом справа налево, таких как иврит. За это отвечает директива locale-sensitive.directive.ts .
- Главная страница мессенджера: chat.component.ts
- Компонент группы чата: groups.component.ts
- Компонент области просмотра сообщений: messages.component.ts . Реализация коллекции основана на ProxyCollection. При получении необработанных данных они преобразуются в ProxyCollection<IMessageItemData>, который при изменении генерирует новый список элементов для <ng-virtual-list>.
Важно отметить, что ng-virtual-list может кэшировать сообщения по типу. Для этого он вводит такие типы элементов, как typing-indicator, unmailed-separator, group, quote и message, которые отображаются как элементы определенного типа.
<ng-template #itemRenderer let-index="index" let-data="data" let-prevData="prevData" let-nextData="nextData" let-measures="measures" let-config="config" let-reseted="reseted">
<div staticClick [maxStaticClickDistance]="maxStaticClickDistance" class="message-template" (onStaticClick)="config.select(data.edited ? true : undefined)">
@if (data?.data) {
@switch (data.data.type) {
@case ("typing-indicator") {
<x-messages-typing-indicator ... />
}
@case ("unmailed-separator") {
<x-message-unmailed-separator ... />
}
@case ("group") {
<x-message-group ... />
}
@case ("quote") {
<x-message-box [messageType]="'quote'"... />
}
@Default {
<x-message-box ... />
}
}
}
</div>
</ng-template>
