Network мониторинг

Quasar Framework предоставляет удобные инструменты для отслеживания состояния сети, управления сетевыми событиями и интеграции их с компонентами приложения. Основной объект для работы с сетевым состоянием в Quasar — это $q.network.

Объект $q.network и его свойства

$q.network позволяет получить текущую информацию о подключении пользователя и реагировать на изменения сети. Основные свойства:

  • status — логическое значение, показывающее, есть ли подключение к интернету (true — подключение активно, false — отсутствует).

  • type — тип текущего соединения. Возможные значения:

    • unknown — неизвестный тип сети
    • ethernet — проводное соединение
    • wifi — Wi-Fi
    • cellular — мобильная сеть
    • none — отсутствует соединение

  • effectiveType — оценка скорости сети для мобильных подключений (slow-2g, 2g, 3g, 4g).

  • downlink — скорость соединения в мегабитах в секунду.

  • rtt — оценка времени отклика сети в миллисекундах.

  • saveData — флаг, указывающий, включен ли режим экономии трафика.

Пример использования в компоненте Vue:

export default {
  computed: {
    isOnline() {
      return this.$q.network.status;
    },
    connectionType() {
      return this.$q.network.type;
    }
  }
}

Подписка на события изменения сети

Quasar позволяет отслеживать изменения сети через событие change. Это полезно для динамического обновления интерфейса при потере или восстановлении подключения.

export default {
  mounted() {
    this.$q.network.onChange(this.handleNetworkChange);
  },
  beforeUnmount() {
    this.$q.network.offChange(this.handleNetworkChange);
  },
  methods: {
    handleNetworkChange(status) {
      if (status) {
        console.log('Сеть восстановлена');
      } else {
        console.log('Сеть отсутствует');
      }
    }
  }
}

Ключевой момент: метод onChange регистрирует обработчик, а offChange удаляет его. Это важно для предотвращения утечек памяти при работе с динамическими компонентами.

Реактивное использование сетевого состояния

Состояние сети можно интегрировать с реактивными свойствами Vue для изменения интерфейса в реальном времени. Например, отображение баннера об отсутствии соединения:

<template>
  <q-banner v-if="!$q.network.status" color="negative" icon="wifi_off">
    Нет подключения к сети
  </q-banner>
</template>
export default {
  name: 'NetworkStatusBanner'
}

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

Проверка скорости сети и адаптивное поведение

Свойства downlink и effectiveType позволяют оптимизировать загрузку контента:

if (this.$q.network.downlink < 1 || this.$q.network.effectiveType === '2g') {
  // Загружать только критически важные данные
  this.loadMinimalContent();
} else {
  this.loadFullContent();
}

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

Интеграция с Quasar Plugins и Notifications

События сети можно комбинировать с уведомлениями Quasar для информирования пользователя:

methods: {
  handleNetworkChange(status) {
    this.$q.notify({
      message: status ? 'Сеть восстановлена' : 'Сеть отсутствует',
      color: status ? 'positive' : 'negative',
      position: 'top'
    });
  }
}

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

Поддержка оффлайн-режима

Quasar позволяет создавать приложения с оффлайн-режимом, используя localStorage или IndexedDB для кэширования данных и синхронизации при восстановлении сети:

methods: {
  saveDataOffline(data) {
    localStorage.setItem('pendingData', JSON.stringify(data));
  },
  syncData() {
    if (this.$q.network.status) {
      const data = JSON.parse(localStorage.getItem('pendingData'));
      if (data) {
        this.sendDataToServer(data);
        localStorage.removeItem('pendingData');
      }
    }
  }
}

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

Практические рекомендации

  • Всегда использовать onChange и offChange для подписки на события сети, чтобы избегать утечек памяти.
  • Реализовывать визуальные индикаторы состояния сети через компоненты Quasar (q-banner, q-dialog).
  • Использовать свойства downlink и effectiveType для адаптации контента под скорость соединения.
  • Интегрировать уведомления через this.$q.notify для мгновенной обратной связи.
  • Планировать оффлайн-логику и синхронизацию данных для мобильных и прогрессивных веб-приложений.

Эффективное использование $q.network обеспечивает стабильность приложения, улучшает пользовательский опыт и минимизирует ошибки при работе с сетью.

Оглавление