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

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

Настройка подключения iziToast

Для работы с iziToast необходимо подключить библиотеку через CDN или пакетный менеджер:

<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

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

Отслеживание состояния соединения

Для контроля соединения с сервером или интернетом часто используют события online и offline:

window.addEventListener('online', () => {
    iziToast.success({
        title: 'Соединение восстановлено',
        message: 'Интернет доступен',
        position: 'topRight',
        timeout: 3000
    });
});

window.addEventListener('offline', () => {
    iziToast.error({
        title: 'Соединение потеряно',
        message: 'Проверьте подключение к интернету',
        position: 'topRight',
        timeout: 5000,
        overlay: true
    });
});

Ключевые моменты:

  • title — заголовок уведомления.
  • message — основной текст уведомления.
  • position — место отображения (topRight, bottomLeft, topCenter и др.).
  • timeout — время автоматического закрытия уведомления (в миллисекундах).
  • overlay — затемнение фона для привлечения внимания к уведомлению.

Использование кастомных иконок

Для различения типов уведомлений можно использовать кастомные иконки:

iziToast.info({
    title: 'Информация',
    message: 'Сервер временно недоступен, попробуйте позже',
    icon: 'fa fa-server',
    position: 'topRight'
});

Поддерживаются любые иконки из библиотеки FontAwesome или SVG. Это позволяет визуально различать предупреждения, ошибки и успешные действия.

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

iziToast позволяет полностью настраивать внешний вид и поведение уведомлений:

iziToast.warning({
    title: 'Потенциальная проблема',
    message: 'Соединение нестабильно',
    position: 'bottomLeft',
    timeout: false,
    close: true,
    progressBar: true,
    theme: 'dark',
    transitionIn: 'fadeInDown',
    transitionOut: 'fadeOutUp',
    animateInside: true,
    layout: 2
});

Опции, полезные для уведомлений о соединении:

  • timeout: false — уведомление не исчезает автоматически, пока пользователь не закроет его.
  • progressBar — отображение полосы прогресса времени до закрытия уведомления.
  • theme — визуальная тема (light/dark).
  • transitionIn и transitionOut — анимации появления и исчезновения.
  • layout — определяет компоновку текста, заголовка и кнопок.

Реакция на события соединения с сервером через WebSocket

Для приложений с постоянным соединением, например через WebSocket, можно динамически уведомлять о статусе соединения:

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

socket.addEventListener('open', () => {
    iziToast.success({
        title: 'Подключение установлено',
        message: 'Связь с сервером активна',
        position: 'topRight',
        timeout: 2000
    });
});

socket.addEventListener('close', () => {
    iziToast.error({
        title: 'Подключение потеряно',
        message: 'Попытка переподключения...',
        position: 'topRight',
        timeout: false,
        overlay: true
    });
});

socket.addEventListener('error', (err) => {
    iziToast.warning({
        title: 'Ошибка соединения',
        message: 'Произошла ошибка при соединении с сервером',
        position: 'topRight',
        timeout: 4000
    });
});

Создание повторяющихся уведомлений при нестабильном соединении

Для уведомлений о периодических проверках соединения можно использовать интервалы:

function checkConnection() {
    if (!navigator.onLine) {
        iziToast.error({
            title: 'Нет подключения',
            message: 'Проверка соединения не удалась',
            position: 'topRight',
            timeout: 3000
        });
    }
}

setInterval(checkConnection, 10000); // Проверка каждые 10 секунд

Настройка кнопок действий в уведомлениях

Уведомления можно снабдить кнопками для перезагрузки страницы или повторного подключения:

iziToast.error({
    title: 'Соединение потеряно',
    message: 'Нажмите, чтобы попробовать снова',
    position: 'topRight',
    buttons: [
        ['<button>Повторить</button>', function (instance, toast) {
            location.reload();
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }]
    ]
});

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

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

  • Использовать разные типы уведомлений (success, error, info, warning) для визуального различия статусов.
  • Подключение iziToast через CDN или npm обеспечивает гибкость интеграции.
  • Настройка позиции, времени отображения, анимаций и иконок позволяет адаптировать уведомления под конкретный интерфейс.
  • Интерактивные кнопки и overlay делают уведомления более заметными и полезными для пользователя.

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

Оглавление