Уведомления о новых сообщениях

iziToast — это легкая и гибкая библиотека для отображения уведомлений в веб-приложениях. Она позволяет создавать всплывающие сообщения с широкими возможностями кастомизации, управлять их положением, стилем, временем отображения и поведением при взаимодействии пользователя. Для начала работы необходимо подключить библиотеку через CDN или npm:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast/dist/css/iziToast.min.css">
<script src="https://cdn.jsdelivr.net/npm/izitoast/dist/js/iziToast.min.js"></script>

или через npm:

npm install izitoast

и импортировать в проект:

import iziToast from 'izitoast';
import 'izitoast/dist/css/iziToast.min.css';

После подключения доступны методы для создания уведомлений и управления ими.

Создание уведомлений

Базовый вызов уведомления выглядит так:

iziToast.show({
    title: 'Новое сообщение',
    message: 'Вы получили новое сообщение от пользователя',
    position: 'topRight'
});

Ключевые параметры:

  • title — заголовок уведомления.
  • message — текст сообщения.
  • position — позиция на экране (topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter).
  • timeout — время жизни уведомления в миллисекундах. По умолчанию 5000.
  • color — цветовая тема (blue, red, green, yellow или пользовательский HEX).
  • icon — иконка уведомления (строка с классом иконки или URL изображения).
  • close — позволяет ли закрывать уведомление кнопкой (true/false).
  • progressBar — отображение индикатора времени жизни уведомления (true/false).

Пример с кастомизацией:

iziToast.success({
    title: 'Сообщение отправлено',
    message: 'Ваше сообщение успешно доставлено.',
    position: 'bottomRight',
    timeout: 3000,
    icon: 'fa fa-check',
    color: 'green',
    progressBar: true
});

Обработка событий уведомлений

iziToast позволяет отслеживать действия пользователя и автоматические события уведомлений через callback-функции:

  • onOpening — срабатывает в момент начала появления уведомления.
  • onOpened — уведомление полностью отображено.
  • onClosing — уведомление начинает закрываться.
  • onClosed — уведомление закрыто.
  • onClick — пользователь кликнул на уведомление.

Пример:

iziToast.info({
    title: 'Внимание',
    message: 'У вас новое уведомление',
    onClick: function () {
        console.log('Пользователь открыл уведомление');
    },
    onClosed: function () {
        console.log('Уведомление закрыто');
    }
});

Группировка и очередь уведомлений

iziToast поддерживает управление очередью уведомлений, чтобы они не перекрывали друг друга. По умолчанию уведомления появляются одно за другим, но можно управлять количеством одновременно отображаемых:

iziToast.settings({
    timeout: 5000,
    maxWidth: 400,
    position: 'topRight',
    layout: 2  // количество уведомлений в одной линии
});

layout управляет числом уведомлений в ряду, maxWidth — шириной уведомления.

Уведомления для новых сообщений

Для реализации уведомлений о новых сообщениях в реальном времени можно использовать сочетание WebSocket, AJAX и iziToast. Пример для WebSocket:

const socket = new WebSocket('wss://example.com/messages');

socket.onmess age = function(event) {
    const data = JSON.parse(event.data);
    
    iziToast.show({
        title: `Новое сообщение от ${data.sender}`,
        message: data.text,
        position: 'topRight',
        timeout: 7000,
        color: 'blue',
        icon: 'fa fa-envelope',
        progressBar: true,
        onClick: function () {
            openChatWithUser(data.senderId);
        }
    });
};

В этом примере каждое новое сообщение вызывает уведомление с динамическим заголовком и текстом. Клик по уведомлению открывает чат с отправителем.

Кастомизация внешнего вида

iziToast поддерживает CSS-персонализацию, что позволяет интегрировать уведомления в любой дизайн:

iziToast.show({
    title: 'Важное сообщение',
    message: 'Требуется внимание!',
    color: '#ff5722',
    icon: 'fa fa-exclamation-triangle',
    theme: 'dark',
    position: 'topRight',
    progressBarColor: '#ffccbc',
});
  • theme — light или dark.
  • progressBarColor — цвет индикатора времени жизни уведомления.
  • iconColor — цвет иконки.

Дополнительно можно применять CSS-классы через class или zindex для контроля порядка слоев и перекрытия с другими элементами интерфейса.

Управление массовыми уведомлениями

Для приложений с высокой частотой уведомлений можно использовать методы iziToast.destroy() и iziToast.hide(), чтобы очищать очередь или удалять отдельные уведомления:

// Закрыть все уведомления
iziToast.destroy();

// Закрыть конкретное уведомление
const toastId = iziToast.show({ message: 'Тест' });
iziToast.hide({ id: toastId });

Это позволяет избегать захламления экрана и поддерживать чистый интерфейс даже при поступлении множества сообщений.

Адаптивность и мобильные устройства

iziToast автоматически адаптируется под размеры экрана, но для улучшения мобильного опыта можно использовать:

iziToast.settings({
    transitionInMobile: 'fadeInDown',
    transitionOutMobile: 'fadeOutUp',
    maxWidth: 300
});

Параметры transitionInMobile и transitionOutMobile задают анимации для смартфонов, а maxWidth ограничивает ширину уведомления для компактного отображения.

Выводы по использованию

iziToast обеспечивает комплексное решение для уведомлений в реальном времени: гибкая кастомизация, обработка событий, управление очередью и адаптивность под мобильные устройства делают библиотеку идеальной для уведомлений о новых сообщениях. Правильная интеграция с WebSocket или AJAX позволяет динамически информировать пользователя без перегрузки интерфейса.

Оглавление