Уведомления в реальном времени

SweetAlert — это популярная JavaScript библиотека для создания красивых и функциональных уведомлений, диалоговых окон и сообщений, которые можно использовать для уведомлений в реальном времени. В отличие от стандартных alert, confirm или prompt, SweetAlert позволяет пользователям получать более стильные и информативные сообщения. Особенно полезно это для отображения уведомлений при взаимодействии с сервером, асинхронных запросах или при уведомлении пользователя о действиях на странице. В этой статье рассматриваются различные аспекты использования SweetAlert для реализации уведомлений в реальном времени.

Основы работы с SweetAlert

Для начала использования библиотеки необходимо подключить SweetAlert к проекту. Существует несколько способов, но самым распространённым является использование CDN (Content Delivery Network).

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

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

Swal.fire('Hello World!');

Этот код отобразит стандартное уведомление с текстом «Hello World!». Однако для более сложных сценариев требуется использование различных настроек и типов уведомлений, которые можно кастомизировать.

Структура уведомлений

SweetAlert позволяет создавать различные типы уведомлений, что важно при отображении сообщений в реальном времени. К примеру, можно отображать сообщения об успешной операции, ошибке или предупреждении.

  • Success: Уведомление об успешном завершении операции.
  • Error: Уведомление об ошибке.
  • Warning: Предупреждение о возможных последствиях.
  • Info: Информативное сообщение.
  • Question: Запрос от пользователя.

Пример уведомления об успешном завершении операции:

Swal.fire({
  icon: 'success',
  title: 'Операция выполнена',
  text: 'Ваши данные были успешно сохранены.'
});

В случае ошибки:

Swal.fire({
  icon: 'error',
  title: 'Ошибка',
  text: 'Произошла ошибка при сохранении данных.'
});

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

Часто требуется использовать уведомления в реальном времени при работе с асинхронными запросами, такими как AJAX. В таком случае уведомления будут не только информировать пользователя о текущем статусе, но и ожидать завершения операции. Это можно реализовать с помощью промисов (Promises) и асинхронных функций (async/await).

Пример уведомления, которое ожидает завершение асинхронной операции:

async function sendData() {
  Swal.fire({
    title: 'Отправка данных...',
    text: 'Пожалуйста, подождите.',
    allowOutsideClick: false,
    didOpen: () => {
      Swal.showLoading();
    }
  });

  try {
    let response = await fetch('/api/data', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: { 'Content-Type': 'application/json' }
    });
    if (!response.ok) {
      throw new Error('Ошибка при отправке данных');
    }
    Swal.fire({
      icon: 'success',
      title: 'Данные успешно отправлены',
      text: 'Ваши данные были успешно отправлены на сервер.'
    });
  } catch (error) {
    Swal.fire({
      icon: 'error',
      title: 'Ошибка',
      text: error.message
    });
  }
}

В этом примере после отправки данных отображается уведомление с индикатором загрузки. Когда запрос завершён, показывается либо уведомление об успехе, либо об ошибке, в зависимости от результата операции.

Динамическое обновление уведомлений

SweetAlert предоставляет возможность динамически обновлять содержимое уведомлений. Например, если необходимо обновить уведомление с прогрессом выполнения операции, можно использовать функции для изменения состояния уведомления, такие как Swal.update().

Пример отображения прогресса:

Swal.fire({
  title: 'Загрузка файла...',
  html: 'Процесс загрузки: <b></b>',
  allowOutsideClick: false,
  didOpen: () => {
    Swal.showLoading();
  }
});

let progress = 0;
let interval = setInterval(() => {
  progress += 10;
  Swal.getContent().querySelector('b').textContent = `${progress}%`;
  if (progress >= 100) {
    clearInterval(interval);
    Swal.fire({
      icon: 'success',
      title: 'Файл загружен',
      text: 'Загрузка файла завершена.'
    });
  }
}, 1000);

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

Параметры конфигурации

SweetAlert поддерживает множество параметров конфигурации, которые можно использовать для кастомизации внешнего вида и поведения уведомлений. Рассмотрим некоторые из них:

  • title и text: Основной заголовок и текст уведомления.
  • icon: Тип уведомления (success, error, warning, info, question).
  • showCancelButton: Параметр, который позволяет добавить кнопку для отмены действия.
  • allowOutsideClick: Позволяет или запрещает закрытие уведомления при клике вне его области.
  • timer: Время (в миллисекундах), через которое уведомление закроется автоматически.

Пример уведомления с кнопками:

Swal.fire({
  title: 'Вы уверены?',
  text: 'Вы хотите удалить этот файл?',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да, удалить',
  cancelButtonText: 'Отмена'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire('Удалено!', 'Ваш файл был удалён.', 'success');
  }
});

Уведомления с кастомными стилями и контентом

Одной из сильных сторон SweetAlert является возможность добавления кастомных стилей и контента. Это может быть полезно, когда необходимо интегрировать уведомления в уже существующий дизайн страницы или отображать сложные компоненты.

Пример уведомления с кастомным контентом:

Swal.fire({
  title: 'Уведомление с изображением',
  html: '<img src="image.jpg" alt="Custom Image" style="width: 100px; height: auto;">',
  icon: 'info'
});

Можно также добавить различные HTML-элементы внутри уведомления, что даёт широкие возможности для кастомизации.

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

Когда необходимо управлять несколькими уведомлениями одновременно, SweetAlert позволяет легко контролировать, какие из уведомлений отображаются в текущий момент времени. Это важно, если на странице выполняются несколько асинхронных операций.

Пример отображения нескольких уведомлений:

let alert1 = Swal.fire({
  title: 'Загрузка...',
  text: 'Данные обрабатываются',
  allowOutsideClick: false
});

let alert2 = Swal.fire({
  title: 'Информация',
  text: 'Пожалуйста, подождите',
  allowOutsideClick: false
});

setTimeout(() => {
  alert1.close();
  alert2.fire('Операция завершена', 'Все данные успешно загружены', 'success');
}, 3000);

В этом примере два уведомления показываются одно за другим, и после завершения операции одно из них закрывается, а другое обновляется с новыми данными.

Заключение

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

Оглавление